From b014ea8950ec15b6cb64ab3f6f366ad08b27c0ae Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 10 Dec 2025 09:38:55 +0200
Subject: [PATCH] feat(breadcrumb_badges): add colors to the badges

---
 apps/client/src/widgets/BreadcrumbBadges.css | 10 +++++++---
 apps/client/src/widgets/BreadcrumbBadges.tsx |  7 +++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/widgets/BreadcrumbBadges.css b/apps/client/src/widgets/BreadcrumbBadges.css
index c7e461113..58ffe2cff 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.css
+++ b/apps/client/src/widgets/BreadcrumbBadges.css
@@ -9,15 +9,19 @@
         padding: 2px 6px;
         border-radius: 12px;
         font-size: 0.75em;
-        background-color: var(--badge-background-color);
-        color: var(--badge-text-color);
+        background-color: var(--color, --badge-background-color);
+        color: white;
 
         &.clickable {
             cursor: pointer;
 
             &:hover {
-                background-color: var(--badge-background-hover-color);
+                background-color: color-mix(in srgb, var(--color, --badge-background-color) 80%, black);
             }
         }
+
+        &.temporarily-editable-badge { --color: #4fa52b; }
+        &.read-only-badge { --color: #e33f3b; }
+        &.share-badge { --color: #3b82f6; }
     }
 }
diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx
index e4d0ef55e..ffa922063 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.tsx
+++ b/apps/client/src/widgets/BreadcrumbBadges.tsx
@@ -28,6 +28,7 @@ function ReadOnlyBadge() {
         return <Badge
             icon="bx bx-lock-open-alt"
             tooltip={t("breadcrumb_badges.read_only_temporarily_disabled_description")}
+            className="temporarily-editable-badge"
             onClick={() => enableEditing(false)}
         >
             {t("breadcrumb_badges.read_only_temporarily_disabled")}
@@ -36,6 +37,7 @@ function ReadOnlyBadge() {
         return <Badge
             icon="bx bx-lock-alt"
             tooltip={isExplicitReadOnly ? t("breadcrumb_badges.read_only_explicit_description") : t("breadcrumb_badges.read_only_auto_description")}
+            className="read-only-badge"
             onClick={() => enableEditing()}
         >
             {isExplicitReadOnly ? t("breadcrumb_badges.read_only_explicit") : t("breadcrumb_badges.read_only_auto")}
@@ -54,6 +56,7 @@ function ShareBadge() {
                 t("breadcrumb_badges.shared_publicly_description", { link }) :
                 t("breadcrumb_badges.shared_locally_description", { link })
             }
+            className="share-badge"
             onClick={(e) => linkHref && goToLinkExt(e, linkHref)}
         >
             {isSharedExternally ? t("breadcrumb_badges.shared_publicly") : t("breadcrumb_badges.shared_locally")}
@@ -61,7 +64,7 @@ function ShareBadge() {
     );
 }
 
-function Badge({ icon, children, tooltip, onClick }: { icon: string, tooltip: string, children: ComponentChildren, onClick?: MouseEventHandler<HTMLDivElement> }) {
+function Badge({ icon, className, children, tooltip, onClick }: { icon: string, className: string, tooltip: string, children: ComponentChildren, onClick?: MouseEventHandler<HTMLDivElement> }) {
     const containerRef = useRef<HTMLDivElement>(null);
     useStaticTooltip(containerRef, {
         placement: "bottom",
@@ -74,7 +77,7 @@ function Badge({ icon, children, tooltip, onClick }: { icon: string, tooltip: st
     return (
         <div
             ref={containerRef}
-            className={clsx("breadcrumb-badge", { "clickable": !!onClick })}
+            className={clsx("breadcrumb-badge", className, { "clickable": !!onClick })}
             onClick={onClick}
         >
             <Icon icon={icon} />&nbsp;