app styling updates (#1596)

darker tone

frontend/apps/artcraft/app/src/components/signaled/TopBar/TaskQueue.tsx

@@ -1003,7 +1003,7 @@ export const TaskQueue = () => {
           )}
           <PopoverMenu
             mode="default"
-            buttonClassName="h-[38px] w-[38px] !p-0 relative"
+            buttonClassName="h-[34px] w-[34px] !p-0 relative"
             panelClassName="w-[400px] p-2 bg-ui-panel mt-2.5"
             position="bottom"
             align="end"

frontend/apps/artcraft/app/src/components/signaled/TopBar/TopBar.tsx

@@ -784,19 +784,19 @@ export const TopBar = ({ pageName }: Props) => {
                   variant="primary"
                   icon={faGem}
                   onClick={toggleSubscriptionModal}
-                  className="h-[38px] shadow-md shadow-primary-500/50 transition-all duration-300 hover:shadow-md hover:shadow-primary-500/75"
+                  className="transition-all duration-300"
                 >
                   Support
                 </Button>
               )}
 
-              <UploadImagesButton className="h-[38px] w-[38px]" />
+              <UploadImagesButton className="h-[34px] w-[34px]" />
 
               <Tooltip content="Settings" position="bottom" delay={300}>
                 <Button
                   variant="secondary"
                   icon={faGear}
-                  className="h-[38px] w-[38px]"
+                  className="h-[34px] w-[34px]"
                   onClick={() => {
                     setSettingsSection("general");
                     setIsSettingsModalOpen(true);
@@ -807,7 +807,6 @@ export const TopBar = ({ pageName }: Props) => {
 
               <Button
                 variant="secondary"
-                className="h-[38px]"
                 icon={faImages}
                 onClick={handleOpenGalleryModal}
               >

frontend/apps/artcraft/app/src/config/appMenu.tsx

@@ -259,7 +259,7 @@ export const getBadgeStyles = (badge?: string) => {
     case "BEST":
       return "bg-primary text-white";
     case "SOON":
-      return "bg-gray-600 text-white";
+      return "bg-ui-controls text-base-fg";
     default:
       return "";
   }

frontend/apps/artcraft/app/src/styles/base.css

@@ -42,7 +42,16 @@ h6 {
 }
 
 body {
-  font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-family:
+    "Source Sans 3",
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
   color: var(--st-fg);
   background-color: var(--st-bg);
   color-scheme: var(--st-color-scheme, dark);
@@ -51,7 +60,7 @@ body {
 
 /* ===================== THEME VARIABLES ===================== */
 :root {
-  --st-bg: #242424;
+  --st-bg: #121212;
   /* gray theme default */
   --st-panel: #1f1f1f;
   --st-panel-border: #3f3f3f;
@@ -96,7 +105,7 @@ body {
 
 /* Gray (current) */
 .theme-gray {
-  --st-bg: #242424;
+  --st-bg: #121212;
   --st-panel: #1f1f1f;
   --st-panel-border: #272727;
   --st-modal: #1f1f1f;
@@ -109,7 +118,7 @@ body {
   --st-color-scheme: dark;
   --st-gallery-vignette-alpha: 0.3;
   --st-photo-tint-rgb: 0 0 0;
-  --st-photo-tint-alpha: 0.4;
+  --st-photo-tint-alpha: 0.6;
   --st-photo-grayscale: 1;
   --st-badge-alpha: 0.4;
 }
@@ -193,9 +202,11 @@ body {
 
 .bg-ui-panel-gradient {
   background:
-    radial-gradient(60.68% 60.68% at 50% 0%,
+    radial-gradient(
+      60.68% 60.68% at 50% 0%,
       rgba(255, 255, 255, 0.08) 0%,
-      rgba(0, 0, 0, 0) 70%),
+      rgba(0, 0, 0, 0) 70%
+    ),
     var(--st-panel);
   background-color: var(--st-panel);
 }
@@ -310,11 +321,21 @@ img {
   width: 10px;
   height: 10px;
   pointer-events: none;
-  background:
-    linear-gradient(135deg,
-      transparent 40%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.5) 45%, transparent 45%,
-      transparent 55%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0.5) 60%, transparent 60%,
-      transparent 70%, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0.5) 75%, transparent 75%);
+  background: linear-gradient(
+    135deg,
+    transparent 40%,
+    rgba(255, 255, 255, 0.5) 40%,
+    rgba(255, 255, 255, 0.5) 45%,
+    transparent 45%,
+    transparent 55%,
+    rgba(255, 255, 255, 0.5) 55%,
+    rgba(255, 255, 255, 0.5) 60%,
+    transparent 60%,
+    transparent 70%,
+    rgba(255, 255, 255, 0.5) 70%,
+    rgba(255, 255, 255, 0.5) 75%,
+    transparent 75%
+  );
 }
 
 .scrollbar-hidden {
@@ -579,7 +600,8 @@ img {
   /* shorter visible segment + larger gap = clearer motion */
   stroke-dashoffset: 0;
   animation: st-solid-wrap 1.6s linear infinite;
-  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.8)) drop-shadow(0 0 18px rgba(59, 130, 246, 0.5));
+  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.8))
+    drop-shadow(0 0 18px rgba(59, 130, 246, 0.5));
 }
 
 @keyframes st-solid-wrap {
@@ -600,4 +622,4 @@ img {
   100% {
     transform: translateX(-100%);
   }
-}
+}

frontend/libs/components/menu-icon-selector/src/lib/menu-icon-selector.tsx

@@ -87,14 +87,14 @@ export const MenuIconSelector: React.FC<MenuIconSelectorProps> = ({
     >
       <div
         ref={containerRef}
-        className="relative flex gap-1 rounded-xl px-1 py-0.5 min-w-max bg-ui-panel border border-ui-panel-border"
+        className="relative flex gap-1 rounded-full px-1 py-0.5 min-w-max bg-ui-panel border border-ui-panel-border"
         style={{ minWidth: 0 }}
         onMouseLeave={() => setHoveredIndex(-1)}
       >
         {/* Active tab background */}
         {selectedIndex >= 0 && (
           <div
-            className="absolute z-10 rounded-lg bg-primary/25 border-2 border-primary shadow-md transition-all duration-150 ease-in-out -ml-[1px]"
+            className="absolute z-10 rounded-full bg-primary/25 border-2 border-primary shadow-md transition-all duration-150 ease-in-out -ml-[1px]"
             style={{
               left: activeStyle.left,
               width: activeStyle.width,
@@ -106,7 +106,7 @@ export const MenuIconSelector: React.FC<MenuIconSelectorProps> = ({
         {/* Hover background (only if hovering a different tab) */}
         {hoveredIndex !== -1 && hoveredIndex !== selectedIndex && (
           <div
-            className="absolute z-20 rounded-lg bg-primary/10 transition-all duration-150 ease-in-out pointer-events-none -ml-[1px]"
+            className="absolute z-20 rounded-full bg-primary/10 transition-all duration-150 ease-in-out pointer-events-none -ml-[1px]"
             style={{
               left: hoverStyle.left,
               width: hoverStyle.width,
@@ -147,7 +147,7 @@ export const MenuIconSelector: React.FC<MenuIconSelectorProps> = ({
                 onClick={() => !disabled && onMenuChange(item.id)}
                 onMouseEnter={() => setHoveredIndex(idx)}
                 className={twMerge(
-                  "relative z-30 flex flex-col items-center justify-center px-3 py-2 rounded-lg transition-all duration-150 text-base-fg",
+                  "relative z-30 flex flex-col items-center justify-center px-3 py-2 rounded-full transition-all duration-150 text-base-fg",
                   disabled ? "cursor-not-allowed opacity-60" : "",
                 )}
                 tabIndex={0}