Cabinet UI Polish: Implemented custom StatusLightbulbIcon and optimized vertical spacing for better list density

Author: realtomchuk-source

web/src/pages/Cabinet/Cabinet.module.css

@@ -31,7 +31,13 @@
 .section {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 0;
+}
+
+.cardSection {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 }
 
 .sectionTitle {
@@ -140,6 +146,11 @@
     color: #EE7221;
 }
 
+.statusIconActive {
+    background: var(--cb-brand-orange);
+    border: 1px solid var(--cb-brand-orange);
+}
+
 .profileName {
     font-size: 17px;
     font-weight: 700;
@@ -264,10 +275,10 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 12px 20px 12px 16px; /* Unified 20px side padding for optical balance */
+    padding: 10px 20px 10px 16px; /* Tightened 10px vertical padding */
     cursor: pointer;
     position: relative;
-    min-height: 52px;
+    min-height: 48px; /* Optimized height for menus */
     box-sizing: border-box;
     width: 100%;
     transition: all 0.2s ease;
@@ -380,11 +391,13 @@
     -webkit-tap-highlight-color: transparent;
 }
 
-.statusIconOnly {
-    background: transparent !important;
-    border: none !important;
-    transform: translateY(2px);
-    justify-content: flex-end; /* Align to the right edge of the grid cell */
+.statusIconActive {
+    background: var(--cb-brand-orange) !important;
+    border-color: var(--cb-brand-orange) !important;
+}
+
+.statusIconAnonBtn {
+    /* Standard syncIconBtn style is enough, but we can refine if needed */
 }
 
 .syncIconBtn:active {

web/src/pages/Cabinet/components/NotificationSlots.tsx

@@ -63,7 +63,7 @@ export const NotificationSlots: React.FC<NotificationSlotsProps> = ({ slots, isL
     };
 
     return (
-        <div className={styles.section}>
+        <div className={styles.cardSection}>
             <div className={styles.sectionTitle}>Налаштування сповіщень</div>
 
             {displaySlots.map((slot, index) => (

web/src/pages/Cabinet/components/ProfileCard.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { clsx } from 'clsx';
 import { BrandIcon } from '../../../assets/brand/BrandIcon';
-import { PlusStatusIcon, MinusStatusIcon } from '../../../assets/icons/StatusIcons';
 import styles from '../Cabinet.module.css';
 
 // ── SVG Icons ──────────────────────────────────────────────────────────────────
@@ -29,6 +28,18 @@ const TelegramIcon: React.FC = () => (
     </svg>
 );
 
+const StatusLightbulbIcon: React.FC<{ active: boolean }> = ({ active }) => {
+    // Registered: Orange bulb (#ee7221)
+    // Guest: Gray bulb (#d4d4d8)
+    const bulbColor = active ? "#ee7221" : "#d4d4d8";
+    return (
+        <svg width="16" height="22" viewBox="0 0 90.61 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M22.58,106.06c0,10.46,8.47,18.94,18.94,18.94h7.57c10.46,0,18.94-8.47,18.94-18.94v-3.79H22.58v3.79Z" fill={bulbColor} />
+            <path d="M45.31.03C6.31-1.32-15.03,49.85,12.34,76.74c3.9,4.12,7.38,8.9,9.09,14.18h47.76c1.73-5.28,5.18-10.06,9.09-14.18C105.65,49.85,84.3-1.33,45.31.03Z" fill={bulbColor} />
+        </svg>
+    );
+};
+
 // ── Component ──────────────────────────────────────────────────────────────────
 
 interface ProfileCardProps {
@@ -91,8 +102,12 @@ export const ProfileCard: React.FC<ProfileCardProps> = ({ user, onClick, onSignO
 
                         {/* Row 2: Status Icon in the far bottom-right corner (under Google) */}
                         <div /> {/* Empty cell under Telegram */}
-                        <div className={clsx(styles.syncIconBtn, styles.statusIconOnly)}>
-                            {isAnon ? <MinusStatusIcon size={18} /> : <PlusStatusIcon size={18} />}
+                        <div 
+                            className={clsx(styles.syncIconBtn, styles.statusIconAnonBtn)}
+                            onClick={!isAnon ? (e) => { e.stopPropagation(); onSignOut?.(); } : undefined}
+                            style={{ cursor: !isAnon ? 'pointer' : 'default' }}
+                        >
+                            <StatusLightbulbIcon active={!isAnon} />
                         </div>
                     </div>