diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 2d7862ae00..44f594d0ab 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -202,6 +202,7 @@ --badge-share-background-color: #6b6b6b; --badge-clipped-note-background-color: #2284c0; --badge-execute-background-color: #7b47af; + --badge-icon-pack-background-color: rgb(228, 163, 44); --note-icon-background-color: #4f4f4f; --note-icon-color: white; @@ -322,4 +323,4 @@ .note-split.with-hue *::selection, .quick-edit-dialog-wrapper.with-hue *::selection { --selection-background-color: hsl(var(--custom-color-hue), 60%, 90%); -} \ No newline at end of file +} diff --git a/apps/client/src/widgets/layout/NoteBadges.css b/apps/client/src/widgets/layout/NoteBadges.css index ec163da6f2..7c11c7fce6 100644 --- a/apps/client/src/widgets/layout/NoteBadges.css +++ b/apps/client/src/widgets/layout/NoteBadges.css @@ -37,6 +37,7 @@ pointer-events: none; } } + &.icon-pack-badge { --color: var(--badge-icon-pack-background-color); } min-width: 0; diff --git a/apps/client/src/widgets/layout/NoteBadges.tsx b/apps/client/src/widgets/layout/NoteBadges.tsx index b4fba9e28a..669778d71b 100644 --- a/apps/client/src/widgets/layout/NoteBadges.tsx +++ b/apps/client/src/widgets/layout/NoteBadges.tsx @@ -19,6 +19,7 @@ export default function NoteBadges() { + ); } @@ -147,3 +148,17 @@ export function SaveStatusBadge() { /> ); } + +function IconPackBadge() { + const { note } = useNoteContext(); + const isEnabledIconPack = useNoteLabelBoolean(note, "iconPack"); + const isDisabledIconPack = useNoteLabelBoolean(note, "disabled:iconPack"); + + return ((isEnabledIconPack || isDisabledIconPack) && + + ); +}