mirror of
https://github.com/penpot/penpot.git
synced 2025-03-17 18:21:23 -05:00
🐛 Fix invitation badge colors
This commit is contained in:
parent
a3bfeace73
commit
3bbf97fde9
9 changed files with 121 additions and 77 deletions
|
@ -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);
|
||||
|
|
|
@ -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?
|
||||
|
|
|
@ -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);
|
||||
|
|
27
frontend/src/app/main/ui/notifications/badge.cljs
Normal file
27
frontend/src/app/main/ui/notifications/badge.cljs
Normal file
|
@ -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])
|
||||
|
64
frontend/src/app/main/ui/notifications/badge.scss
Normal file
64
frontend/src/app/main/ui/notifications/badge.scss
Normal file
|
@ -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);
|
||||
}
|
|
@ -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))
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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])]
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue