From 3904ba403aa78f9e63e01fbb203454d24238051e Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Sat, 1 Aug 2026 18:22:37 +0200
Subject: [PATCH] Add conditional styling for disabled user status in
 AdminPanel

Added CSS class to distinguish disabled users with red text color while active users display in green. Enhanced admin user row styling with pill-shaped role badges, improved mobile layout with adjusted grid positioning, and refined typography sizing for better visual hierarchy on smaller screens.
---
 frontend/src/components/AdminPanel.jsx         |  2 +-
 frontend/src/styles/hooks/useHpGlobalStyles.js | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/AdminPanel.jsx b/frontend/src/components/AdminPanel.jsx
index 2eeae91..639ffc8 100644
--- a/frontend/src/components/AdminPanel.jsx
+++ b/frontend/src/components/AdminPanel.jsx
@@ -102,7 +102,7 @@ export default function AdminPanel() {
             <div className="hp-admin-role" style={{ textAlign: "center", fontWeight: 900, color: stylesTokens.textGold }}>
               {u.role}
             </div>
-            <div className="hp-admin-status" style={{ textAlign: "center", opacity: 0.85, color: stylesTokens.textMain }}>
+            <div className={`hp-admin-status ${u.disabled ? "hp-admin-status--disabled" : ""}`} style={{ textAlign: "center", opacity: 0.85, color: stylesTokens.textMain }}>
               {u.disabled ? "disabled" : "active"}
             </div>
 
diff --git a/frontend/src/styles/hooks/useHpGlobalStyles.js b/frontend/src/styles/hooks/useHpGlobalStyles.js
index 3f5114c..11ce07a 100644
--- a/frontend/src/styles/hooks/useHpGlobalStyles.js
+++ b/frontend/src/styles/hooks/useHpGlobalStyles.js
@@ -93,6 +93,9 @@ export function useHpGlobalStyles() {
       .hp-user-menu-wrap { min-width: 0; }
       .hp-admin-user-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) 70px 76px 86px; }
       .hp-admin-action { min-width: 0; }
+      .hp-admin-role { padding: 4px 8px; border-radius: 999px; background: rgba(233,216,166,0.10); border: 1px solid rgba(233,216,166,0.16); font-size: 12px; }
+      .hp-admin-status { color: #baf3c9 !important; font-size: 13px; }
+      .hp-admin-status--disabled { color: #ffb3b3 !important; }
       @media (max-width: 600px) {
         .hp-shell { padding: calc(12px + env(safe-area-inset-top)) 10px calc(28px + env(safe-area-inset-bottom)) !important; }
         .hp-topbar { align-items: flex-start !important; padding: 12px !important; flex-wrap: wrap !important; }
@@ -103,12 +106,12 @@ export function useHpGlobalStyles() {
         .hp-topbar-user { justify-content: center; }
         .hp-user-dropdown { left: 0 !important; right: auto !important; width: max-content; max-width: calc(100vw - 20px); min-width: min(220px, calc(100vw - 20px)) !important; }
         .hp-user-dropdown > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-        .hp-admin-user-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; padding: 11px !important; }
-        .hp-admin-name { grid-column: 1; grid-row: 1; }
-        .hp-admin-email { grid-column: 1; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .hp-admin-user-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 11px !important; border-radius: 15px !important; }
+        .hp-admin-name { grid-column: 1; grid-row: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
+        .hp-admin-email { grid-column: 1; grid-row: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px !important; }
         .hp-admin-role { grid-column: 2; grid-row: 1; }
         .hp-admin-status { grid-column: 2; grid-row: 2; }
-        .hp-admin-action { grid-column: 1 / -1; grid-row: 3; width: 100%; min-height: 42px; }
+        .hp-admin-action { grid-column: 2; grid-row: 3; justify-self: end; width: auto; min-width: 94px; min-height: 38px; padding: 7px 14px !important; }
         .hp-row { grid-template-columns: minmax(0, 1fr) 42px 62px !important; gap: 7px !important; padding: 12px 11px !important; }
         .hp-row button { min-height: 40px; }
         button { min-height: 42px; }