0
Fork 0
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:
Eva Marco 2024-03-12 17:19:40 +01:00 committed by Alonso Torres
parent a3bfeace73
commit 3bbf97fde9
9 changed files with 121 additions and 77 deletions

View file

@ -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);

View file

@ -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?

View file

@ -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);

View 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])

View 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);
}

View file

@ -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))

View file

@ -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;

View file

@ -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])]

View file

@ -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;
}