From 3bbf97fde9e5ccc527a2a96341e19826e3c356e8 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Tue, 12 Mar 2024 17:19:40 +0100 Subject: [PATCH] :bug: Fix invitation badge colors --- .../styles/common/refactor/design-tokens.scss | 32 +++++----- frontend/src/app/main/ui/dashboard/team.cljs | 20 ++---- frontend/src/app/main/ui/dashboard/team.scss | 19 ------ .../src/app/main/ui/notifications/badge.cljs | 27 ++++++++ .../src/app/main/ui/notifications/badge.scss | 64 +++++++++++++++++++ .../app/main/ui/workspace/sidebar/layers.cljs | 4 +- .../app/main/ui/workspace/sidebar/layers.scss | 10 --- .../main/ui/workspace/sidebar/sitemap.cljs | 6 +- .../main/ui/workspace/sidebar/sitemap.scss | 16 +---- 9 files changed, 121 insertions(+), 77 deletions(-) create mode 100644 frontend/src/app/main/ui/notifications/badge.cljs create mode 100644 frontend/src/app/main/ui/notifications/badge.scss diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 4049cc42e..a1527bf05 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/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); diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs index adc63664c..76652e98a 100644 --- a/frontend/src/app/main/ui/dashboard/team.cljs +++ b/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? diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss index c5d67a027..e79a69f63 100644 --- a/frontend/src/app/main/ui/dashboard/team.scss +++ b/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); diff --git a/frontend/src/app/main/ui/notifications/badge.cljs b/frontend/src/app/main/ui/notifications/badge.cljs new file mode 100644 index 000000000..e6e6c449e --- /dev/null +++ b/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]) + diff --git a/frontend/src/app/main/ui/notifications/badge.scss b/frontend/src/app/main/ui/notifications/badge.scss new file mode 100644 index 000000000..b98a5ee88 --- /dev/null +++ b/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); +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index c3f927e04..5d3f5da5d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/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)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index 422f72c19..4c0823ddf 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index 73977a797..975615048 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/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])] diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index a02e38df3..1363ea1c5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss +++ b/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; }