From 2ebee2e8ee56941612b1dc0a03844287de8b6bdc Mon Sep 17 00:00:00 2001
From: theborakompanioni <theborakompanioni+github@gmail.com>
Date: Thu, 9 Jul 2026 09:44:34 +0200
Subject: [PATCH] chore(ui): colorize selected jar name

---
 src/components/layout/AppNavbar.tsx     | 2 +-
 src/components/ui/jam/Jar.tsx           | 3 ++-
 src/components/ui/jam/SelectableJar.tsx | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/AppNavbar.tsx b/src/components/layout/AppNavbar.tsx
index d7296a35..a1e5e88e 100644
--- a/src/components/layout/AppNavbar.tsx
+++ b/src/components/layout/AppNavbar.tsx
@@ -1,5 +1,5 @@
-import type { SessionResponse } from '@joinmarket-webui/joinmarket-ng-api-ts/jm'
 import type { ComponentProps } from 'react'
+import type { SessionResponse } from '@joinmarket-webui/joinmarket-ng-api-ts/jm'
 import { useMutation } from '@tanstack/react-query'
 import type { TFunction } from 'i18next'
 import { LockKeyholeIcon, LogOutIcon, PackageSearchIcon, SettingsIcon, ShuffleIcon, WalletIcon } from 'lucide-react'
diff --git a/src/components/ui/jam/Jar.tsx b/src/components/ui/jam/Jar.tsx
index e41e49a6..451ea510 100644
--- a/src/components/ui/jam/Jar.tsx
+++ b/src/components/ui/jam/Jar.tsx
@@ -42,7 +42,8 @@ export function Jar({
         <p
           className={cn(
             'text-muted-foreground',
-            disabled ? [] : ['group-hover/jar:font-bold', `group-hover/jar:text-[${color}]`],
+            !disabled && isSelected ? ['font-bold', `text-[${color}]`] : [],
+            !disabled ? ['group-hover/jar:font-bold', `group-hover/jar:text-[${color}]`] : [],
           )}
         >
           {name}
diff --git a/src/components/ui/jam/SelectableJar.tsx b/src/components/ui/jam/SelectableJar.tsx
index a5a379ad..60e76f9b 100644
--- a/src/components/ui/jam/SelectableJar.tsx
+++ b/src/components/ui/jam/SelectableJar.tsx
@@ -34,7 +34,7 @@ export const SelectableJar = ({
       tabIndex={-1}
     >
       <Jar
-        className="flex-col gap-0"
+        className="flex-col"
         name={name}
         color={color}
         totalBalance={totalBalance}