🐛 Fix invitation badge colors

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -315,7 +315,13 @@
   --modal-navigator-foreground-color-rest: var(--color-background-quaternary);
   --modal-navigator-foreground-color-active: var(--color-accent-primary);
 
-  // ALERTS NOTIFICATION TOAST & STATUS WIDGET
+  // ALERTS, NOTIFICATION, TOAST & BADGES
+
+  --alert-background-color-default: var(--color-background-primary);
+  --alert-text-foreground-color-default: var(--color-foreground-primary);
+  --alert-icon-foreground-color-default: var(--color-foreground-primary);
+  --alert-border-color-default: var(--color-background-quaternary);
+
   --alert-background-color-success: var(--color-success-background);
   --alert-text-foreground-color-success: var(--color-foreground-primary);
   --alert-icon-foreground-color-success: var(--color-success-foreground);
@@ -336,26 +342,20 @@
   --alert-icon-foreground-color-info: var(--color-info-foreground);
   --alert-border-color-info: var(--color-info-foreground);
 
-  --alert-background-color-default: var(--color-background-primary);
-  --alert-text-foreground-color-default: var(--color-foreground-primary);
-  --alert-icon-foreground-color-default: var(--color-foreground-primary);
-  --alert-border-color-default: var(--color-background-quaternary);
+  --alert-text-foreground-color-focus: var(--color-accent-primary);
+  --alert-border-color-focus: var(--color-accent-primary);
 
-  --notification-background-color-success: var();
-  --notification-foreground-color-success: var();
-  --notification-border-color-success: var();
   --notification-foreground-color-default: var(--color-foreground-secondary);
 
+  --element-foreground-warning: var(--status-color-warning-500);
+  --element-foreground-error: var(--status-color-error-500);
+
+  // STATUS WIDGET
   --status-widget-background-color-success: var(--status-color-success-500);
   --status-widget-background-color-warning: var(--status-color-warning-500);
   --status-widget-background-color-pending: var(--status-color-pending-500);
   --status-widget-background-color-error: var(--status-color-error-500);
-  --status-widget-icon-foreground-color: var(--color-background-primary); // TODO review
-
-  --element-foreground-success: var(--status-color-success-500);
-  --element-foreground-warning: var(--status-color-warning-500);
-  --element-foreground-pending: var(--status-color-info-500);
-  --element-foreground-error: var(--status-color-error-500);
+  --status-widget-icon-foreground-color: var(--color-background-primary);
 
   // INTERFACE ELEMENTS
   --search-bar-background-color: var(--color-background-primary);
@@ -370,9 +370,6 @@
   --pill-background-color: var(--color-background-tertiary);
   --pill-foreground-color: var(--color-foreground-primary);
 
-  --tag-background-color: var(--color-accent-primary);
-  --tag-background-color-disabled: var(--color-foreground-primary);
-
   --link-foreground-color: var(--color-accent-primary);
 
   --resize-area-background-color: var(--color-background-primary);
@@ -382,6 +379,7 @@
   --dashboard-list-background-color: var(--color-background-tertiary);
   --dashboard-list-foreground-color: var(--color-foreground-primary);
   --dashboard-list-text-foreground-color: var(--color-foreground-secondary);
+
   --flow-tag-background-color: var(--color-background-tertiary);
   --flow-tag-foreground-color: var(--color-foreground-secondary);
   --flow-tag-background-color-hover: var(--color-background-quaternary);

frontend/src/app/main/ui/dashboard/team.cljs

@@ -24,6 +24,7 @@
    [app.main.ui.dashboard.change-owner]
    [app.main.ui.dashboard.team-form]
    [app.main.ui.icons :as i]
+   [app.main.ui.notifications.badge :refer [badge-notification]]
    [app.main.ui.notifications.context-notification :refer [context-notification]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -551,19 +552,6 @@
              :on-click on-change'}
         (tr "labels.editor")]]]]))
 
-(mf/defc invitation-status-badge
-  {::mf/wrap-props false}
-  [{:keys [status]}]
-  [:div
-   {:class (stl/css-case
-            :status-badge true
-            :badge-expired      (= status :expired)
-            :badge-pending      (= status :pending))}
-   [:span {:class (stl/css :status-label)}
-    (if (= status :expired)
-      (tr "labels.expired-invitation")
-      (tr "labels.pending-invitation"))]])
-
 (mf/defc invitation-actions
   {::mf/wrap-props false}
   [{:keys [invitation team-id]}]
@@ -668,6 +656,10 @@
         email    (:email invitation)
         role     (:role invitation)
         status   (if expired? :expired :pending)
+        type     (if expired? :warning :default)
+        badge-content (if (= status :expired)
+                        (tr "labels.expired-invitation")
+                        (tr "labels.pending-invitation"))
 
         on-change-role
         (mf/use-fn
@@ -688,7 +680,7 @@
         :on-change on-change-role}]]
 
      [:div {:class (stl/css :table-field :field-status)}
-      [:& invitation-status-badge {:status status}]]
+      [:& badge-notification {:type type :content badge-content}]]
 
      [:div {:class (stl/css :table-field :field-actions)}
       (when can-invite?

frontend/src/app/main/ui/dashboard/team.scss

@@ -322,25 +322,6 @@
   align-items: center;
 }
 
-// STATUS BADGE
-.status-badge {
-  @include flexCenter;
-  @include headlineSmallTypography;
-  min-width: $s-76;
-  width: fit-content;
-  height: $s-24;
-  border-radius: $br-8;
-  color: var(--pill-foreground-color);
-}
-
-.badge-pending {
-  background-color: var(--status-widget-background-color-warning);
-}
-
-.badge-expired {
-  background-color: var(--tag-background-color-disabled);
-}
-
 .invitations-dropdown {
   bottom: calc(-1 * $s-112);
   right: calc(-1 * $s-20);

frontend/src/app/main/ui/notifications/badge.cljs

@@ -0,0 +1,27 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.notifications.badge
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [rumext.v2 :as mf]))
+
+(mf/defc badge-notification
+  "They are persistent, informative and non-actionable.
+   They are small messages in specific areas off the app"
+
+  {::mf/props :obj}
+  [{:keys [type content size is-focus] :as props}]
+
+  [:aside {:class (stl/css-case :badge-notification true
+                                :warning      (= type :warning)
+                                :error        (= type :error)
+                                :success      (= type :success)
+                                :info         (= type :info)
+                                :small        (= size :small)
+                                :focus        is-focus)}
+   content])
+

frontend/src/app/main/ui/notifications/badge.scss

@@ -0,0 +1,64 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.badge-notification {
+  @include smallTitleTipography;
+  --badge-notification-bg-color: var(--alert-background-color-default);
+  --badge-notification-fg-color: var(--alert-text-foreground-color-default);
+  --badge-notification-border-color: var(--alert-border-color-default);
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  grid-template-columns: 1fr;
+  min-height: $s-32;
+  height: fit-content;
+  min-width: $s-80;
+  width: fit-content;
+  padding: 0;
+  margin: 0;
+  border: $s-1 solid var(--badge-notification-border-color);
+  border-radius: $br-8;
+  background-color: var(--badge-notification-bg-color);
+  color: var(--badge-notification-fg-color);
+}
+
+.small {
+  @include bodySmallTypography;
+  min-height: $s-20;
+  border-radius: $br-6;
+}
+
+.warning {
+  --badge-notification-bg-color: var(--alert-background-color-warning);
+  --badge-notification-fg-color: var(--alert-text-foreground-color-warning);
+  --badge-notification-border-color: var(--alert-border-color-warning);
+}
+
+.success {
+  --badge-notification-bg-color: var(--alert-background-color-success);
+  --badge-notification-fg-color: var(--alert-text-foreground-color-success);
+  --badge-notification-border-color: var(--alert-border-color-success);
+}
+
+.info {
+  --badge-notification-bg-color: var(--alert-background-color-info);
+  --badge-notification-fg-color: var(--alert-text-foreground-color-info);
+  --badge-notification-border-color: var(--alert-border-color-info);
+}
+
+.error {
+  --badge-notification-bg-color: var(--alert-background-color-error);
+  --badge-notification-fg-color: var(--alert-text-foreground-color-error);
+  --badge-notification-border-color: var(--alert-border-color-error);
+}
+
+.focus {
+  --badge-notification-bg-color: transparent;
+  --badge-notification-fg-color: var(--alert-text-foreground-color-focus);
+  --badge-notification-border-color: var(--alert-border-color-focus);
+}

frontend/src/app/main/ui/workspace/sidebar/layers.cljs

@@ -19,6 +19,7 @@
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
+   [app.main.ui.notifications.badge :refer [badge-notification]]
    [app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
    [app.util.dom :as dom]
    [app.util.globals :as globals]
@@ -513,8 +514,7 @@
           (or title (tr "workspace.sidebar.layers"))]
 
          [:div {:class (stl/css :focus-mode-tag-wrapper)}
-          [:div {:class (stl/css :focus-mode-tag)}
-           (tr "workspace.focus.focus-mode")]]]]
+          [:& badge-notification {:content (tr "workspace.focus.focus-mode") :size :small :is-focus true}]]]]
 
        (filter-component))
 

frontend/src/app/main/ui/workspace/sidebar/layers.scss

@@ -122,16 +122,6 @@
   margin-right: $s-12;
 }
 
-.focus-mode-tag {
-  @include flexCenter;
-  @include bodySmallTypography;
-  height: $s-20;
-  padding: $s-4 $s-6;
-  border: $s-1 solid var(--tag-background-color);
-  border-radius: $br-6;
-  color: var(--tag-background-color);
-}
-
 .active-filters {
   @include flexRow;
   flex-wrap: wrap;

frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs

@@ -17,6 +17,7 @@
    [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
+   [app.main.ui.notifications.badge :refer [badge-notification]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
@@ -218,8 +219,9 @@
                     :class         (stl/css :title-spacing-sitemap)}
 
       (if ^boolean read-only?
-        [:div {:class  (stl/css :view-only-mode)}
-         (tr "labels.view-only")]
+        [:& badge-notification {:is-focus true
+                                :size :small
+                                :content (tr "labels.view-only")}]
         [:button {:class (stl/css :add-page)
                   :on-click on-create}
          i/add])]

frontend/src/app/main/ui/workspace/sidebar/sitemap.scss

@@ -33,17 +33,6 @@
   }
 }
 
-.view-only-mode {
-  @include flexCenter;
-  @include bodySmallTypography;
-  height: $s-20;
-  padding: $s-4 $s-6;
-  margin-right: $s-12;
-  border: $s-1 solid var(--tag-background-color);
-  border-radius: $br-6;
-  color: var(--tag-background-color);
-}
-
 .resize-area {
   position: absolute;
   bottom: calc(-1 * $s-8);
@@ -236,6 +225,7 @@
 }
 
 .title-spacing-sitemap {
-  padding-left: $s-8;
-  margin-top: $s-8;
+  padding-inline-start: $s-8;
+  margin-block-start: $s-8;
+  padding-inline-end: $s-20;
 }