feat: update component styles for improved UI consistency and responsiveness

ErwanDecoster · ErwanDecoster · commit cac3f5b2f019 · 2025-09-29T16:32:07.000+02:00
diff --git a/src/components/SmartLinkGroup.tsx b/src/components/SmartLinkGroup.tsx
@@ -76,7 +76,7 @@ export default function SmartLinkGroup({
       {!isCurrentPage ? (
         <Button
           variant="link"
-          className="h-auto gap-1 p-0 text-sm text-orange-200"
+          className="h-auto gap-1 p-0 text-sm"
           asChild
         >
           <Link
diff --git a/src/components/Stepper.tsx b/src/components/Stepper.tsx
@@ -43,7 +43,7 @@ export const Stepper: React.FC<StepperProps> = ({
                 className={cn(
                   'mx-auto flex size-8 items-center justify-center rounded-full',
                   isActive ? 'bg-foreground text-background' : 'bg-muted',
-                  isCompleted && 'bg-primary text-background'
+                  isCompleted && 'bg-brand text-background'
                 )}
                 aria-label={`Step ${index + 1}`}
               >
diff --git a/src/components/icons/IexecAccountIcon.tsx b/src/components/icons/IexecAccountIcon.tsx
@@ -11,43 +11,43 @@ const IexecAccountIcon = ({ size = 20, className = '' }) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M15.4675 11.3324H15.3194C14.5782 11.4065 14.0593 11.9995 14.1334 12.7406C14.1334 12.8888 14.0593 13.1112 13.911 13.1853C13.8369 13.2594 13.7628 13.2594 13.6144 13.2594C13.5404 13.2594 13.4663 13.2594 13.392 13.1853C13.1696 13.0371 12.9474 12.9629 12.6509 12.9629H12.5027C11.7615 13.037 11.2426 13.63 11.3167 14.3711C11.3167 14.5936 11.2426 14.7417 11.0943 14.8158C11.0202 14.8899 10.9461 14.8899 10.7978 14.8899C10.7237 14.8899 10.6496 14.8899 10.5753 14.8158C10.3529 14.6676 10.1307 14.5934 9.90827 14.5934C9.1671 14.5934 8.5741 15.1864 8.5741 15.9275C8.5741 16.6687 9.1671 17.2617 9.90827 17.2617H10.0564C10.7235 17.1876 11.1682 16.6687 11.2424 16.0757V15.8533C11.2424 15.7051 11.3165 15.4827 11.4649 15.4086C11.5389 15.3345 11.613 15.3345 11.7614 15.3345C11.8354 15.3345 11.9095 15.3345 11.9838 15.4086C12.2062 15.5568 12.4284 15.631 12.7249 15.631H12.8731C13.5402 15.557 13.9848 15.038 14.0591 14.445V14.2226C14.0591 14.0002 14.1332 13.852 14.2815 13.7779C14.3556 13.7039 14.4297 13.7039 14.578 13.7039C14.6521 13.7039 14.7262 13.7039 14.8005 13.7779C15.0229 13.9261 15.2451 14.0004 15.5416 14.0004C16.2828 14.0004 16.8758 13.4074 16.8758 12.6662C16.8017 11.925 16.2087 11.332 15.4675 11.332"
-      fill="#FCD15A"
+      fill="currentColor"
     />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M15.4674 11.3324H15.3193C14.5781 11.4065 14.0592 11.9995 14.1333 12.7406C14.1333 12.8888 14.0592 13.1112 13.9108 13.1853C13.8367 13.2594 13.7627 13.2594 13.6143 13.2594C13.5402 13.2594 13.4662 13.2594 13.3919 13.1853C13.1695 13.0371 12.9472 12.9629 12.6507 12.9629H12.5026C11.7614 13.037 11.2425 13.63 11.3166 14.3711C11.3166 14.5936 11.2425 14.7417 11.0942 14.8158C11.0201 14.8899 10.946 14.8899 10.7976 14.8899C10.7236 14.8899 10.6495 14.8899 10.5752 14.8158C10.3528 14.6676 10.1306 14.5934 9.90814 14.5934C9.16698 14.5934 8.57397 15.1864 8.57397 15.9275C8.57397 16.6687 9.16698 17.2617 9.90814 17.2617H10.0563C10.7234 17.1876 11.168 16.6687 11.2423 16.0757V15.8533C11.2423 15.7051 11.3164 15.4827 11.4647 15.4086C11.5388 15.3345 11.6129 15.3345 11.7612 15.3345C11.8353 15.3345 11.9094 15.3345 11.9837 15.4086C12.2061 15.5568 12.4283 15.631 12.7248 15.631H12.873C13.5401 15.557 13.9847 15.038 14.059 14.445V14.2226C14.059 14.0002 14.1331 13.852 14.2814 13.7779C14.3555 13.7039 14.4296 13.7039 14.5779 13.7039C14.652 13.7039 14.7261 13.7039 14.8003 13.7779C15.0228 13.9261 15.245 14.0004 15.5415 14.0004C16.2827 14.0004 16.8757 13.4074 16.8757 12.6662C16.8016 11.925 16.2086 11.332 15.4674 11.332"
-      fill="#FCD15A"
+      fill="currentColor"
     />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M12.6508 9.62518H12.5027C11.7615 9.69926 11.2426 10.2923 11.3167 11.0334C11.3167 11.2559 11.2426 11.404 11.0943 11.4781C11.0202 11.5522 10.9461 11.5522 10.7978 11.5522C10.7237 11.5522 10.6496 11.5522 10.5753 11.4781C10.3529 11.3299 10.1307 11.2557 9.83417 11.2557H9.68601C9.01892 11.3298 8.5 11.9228 8.5 12.5898C8.5 13.331 9.093 13.924 9.83417 13.924H9.98233C10.6494 13.8499 11.0941 13.331 11.1683 12.738V12.5156C11.1683 12.2932 11.2424 12.145 11.3908 12.0709C11.4648 11.9968 11.5389 11.9968 11.6873 11.9968C11.7613 11.9968 11.8354 11.9968 11.9097 12.0709C12.1321 12.2191 12.3543 12.2933 12.6508 12.2933H12.799C13.4661 12.2193 13.985 11.6263 13.985 10.9592C13.985 10.218 13.392 9.625 12.6508 9.625"
-      fill="#FCD15A"
+      fill="currentColor"
     />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M12.6508 9.62518H12.5027C11.7615 9.69926 11.2426 10.2923 11.3167 11.0334C11.3167 11.2559 11.2426 11.404 11.0943 11.4781C11.0202 11.5522 10.9461 11.5522 10.7978 11.5522C10.7237 11.5522 10.6496 11.5522 10.5753 11.4781C10.3529 11.3299 10.1307 11.2557 9.83417 11.2557H9.68601C9.01892 11.3298 8.5 11.9228 8.5 12.5898C8.5 13.331 9.093 13.924 9.83417 13.924H9.98233C10.6494 13.8499 11.0941 13.331 11.1683 12.738V12.5156C11.1683 12.2932 11.2424 12.145 11.3908 12.0709C11.4648 11.9968 11.5389 11.9968 11.6873 11.9968C11.7613 11.9968 11.8354 11.9968 11.9097 12.0709C12.1321 12.2191 12.3543 12.2933 12.6508 12.2933H12.799C13.4661 12.2193 13.985 11.6263 13.985 10.9592C13.985 10.218 13.392 9.625 12.6508 9.625"
-      fill="#FCD15A"
+      fill="currentColor"
     />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M8.5 9.33417C8.5 10.0753 9.093 10.6683 9.83417 10.6683C10.5753 10.6683 11.1683 10.0753 11.1683 9.33417C11.1683 8.593 10.5753 8 9.83417 8C9.093 8 8.5 8.593 8.5 9.33417Z"
-      fill="#FCD15A"
+      fill="currentColor"
     />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M8.5 9.33417C8.5 10.0753 9.093 10.6683 9.83417 10.6683C10.5753 10.6683 11.1683 10.0753 11.1683 9.33417C11.1683 8.593 10.5753 8 9.83417 8C9.093 8 8.5 8.593 8.5 9.33417Z"
-      fill="#FCD15A"
+      fill="currentColor"
     />
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M12.0031 4C7.33814 4 3.5 7.77913 3.5 12.4441C3.5 17.1091 7.33829 20.8882 12.0031 20.8882C13.125 20.8882 14.2471 20.652 15.31 20.2387C18.4396 18.9396 20.5064 15.869 20.5064 12.5031C20.5654 7.77913 16.7271 4 12.0031 4Z"
-      stroke="#FCD15A"
+      stroke="currentColor"
       strokeWidth="1.59441"
       strokeLinecap="round"
       stroke-linejoin="round"
diff --git a/src/components/icons/WalletIcon.tsx b/src/components/icons/WalletIcon.tsx
@@ -9,21 +9,21 @@ const WalletIcon = ({ size = 20, className = '' }) => (
   >
     <path
       d="M18.9617 5.46094H5.03832C3.9126 5.46094 3 6.37354 3 7.49926V16.4993C3 17.625 3.9126 18.5376 5.03832 18.5376H18.9617C20.0874 18.5376 21 17.625 21 16.4993V7.49926C21 6.37354 20.0874 5.46094 18.9617 5.46094Z"
-      stroke="#FCD15A"
+      stroke="currentColor"
       strokeWidth="1.56"
       strokeLinecap="round"
       stroke-linejoin="round"
     />
     <path
       d="M21 9.96019C21 8.83447 20.0874 7.92188 18.9617 7.92188H5.03832C3.9126 7.92188 3 8.83447 3 9.96019"
-      stroke="#FCD15A"
+      stroke="currentColor"
       strokeWidth="1.56"
       strokeLinecap="round"
       stroke-linejoin="round"
     />
     <path
       d="M21 12.5383C21 11.4126 20.0874 10.5 18.9617 10.5H15.4116C15.1471 10.5 14.8924 10.6001 14.6986 10.7802L12.713 12.6257C12.311 12.9992 11.689 12.9992 11.287 12.6257L9.30144 10.7802C9.10764 10.6001 8.853 10.5 8.5884 10.5H5.03832C3.9126 10.5 3 11.4126 3 12.5383"
-      stroke="#FCD15A"
+      stroke="currentColor"
       strokeWidth="1.56"
       strokeLinecap="round"
       stroke-linejoin="round"
diff --git a/src/components/navbar/AddressChip.tsx b/src/components/navbar/AddressChip.tsx
@@ -40,7 +40,7 @@ export function AddressChip({ address }: { address: string }) {
       <Tooltip open={showTooltip}>
         <TooltipTrigger asChild>
           <Button
-            className="bg-popover hover:bg-muted text-primary duration-200"
+            className="dark:bg-popover bg-brand-foreground hover:bg-muted text-primary dark:text-brand duration-300"
             variant="secondary"
             onClick={handleCopy}
             onMouseEnter={handleMouseEnter}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -8,11 +8,11 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-brand text-brand-foreground hover:bg-brand/90',
         destructive:
           'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/30 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          'border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+          'border bg-background hover:bg-accent hover:text-accent-foreground',
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost:
@@ -21,7 +21,7 @@ const buttonVariants = cva(
         'gradient-outline':
           'from-grey-400 hover:before:bg-muted relative z-0 overflow-hidden bg-gradient-to-b to-transparent before:absolute before:inset-px before:-z-10 before:rounded-[29px] before:bg-secondary dark:before:bg-[#15151B] before:duration-200',
         'gradient-outline-active':
-          'from-primary text-primary hover:before:bg-muted relative z-0 overflow-hidden bg-gradient-to-b to-primary before:absolute before:inset-px before:-z-10 before:rounded-[29px] before:bg-secondary dark:before:bg-[#322B1E] before:duration-200',
+          'from-brand text-brand hover:before:bg-muted relative z-0 overflow-hidden bg-gradient-to-b to-brand before:absolute before:inset-px before:-z-10 before:rounded-[29px] before:bg-secondary dark:before:bg-[#322B1E] before:duration-200',
       },
       size: {
         xs: 'h-6 rounded-full px-2 text-xs has-[>svg]:px-1.5 gap-1',
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
@@ -34,7 +34,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-secondary data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-border data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-muted flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -58,7 +58,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-muted relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-muted relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
@@ -5,7 +5,7 @@ function Table({ className, ...props }: React.ComponentProps<'table'>) {
   return (
     <div
       data-slot="table-container"
-      className="border-secondary relative w-full overflow-x-auto rounded-3xl border"
+      className="relative w-full overflow-x-auto rounded-3xl border"
     >
       <table
         data-slot="table"
@@ -20,7 +20,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
   return (
     <thead
       data-slot="table-header"
-      className={cn('[&_tr]:border-muted [&_tr]:border-b', className)}
+      className={cn('[&_tr]:border-b', className)}
       {...props}
     />
   );
@@ -38,7 +38,7 @@ function TableBody({
     <tbody
       data-slot="table-body"
       className={cn(
-        '[&_tr]:border-muted *:bg-background [&_tr]:hover:*:bg-tooltip dark:[&_tr]:hover:*:bg-muted [&_tr:last-child]:border-0',
+        '*:bg-background [&_tr]:hover:*:bg-tooltip dark:[&_tr]:hover:*:bg-muted [&_tr:last-child]:border-0',
         zebra &&
           'dark:[&_tr]:odd:*:bg-tooltip [&_tr]:hover:*:bg-tooltip dark:[&_tr]:odd:hover:*:bg-muted [&_tr]:odd:*:bg-[#fafaff]',
         className
diff --git a/src/index.css b/src/index.css
@@ -149,6 +149,9 @@
   --color-tooltip: var(--tooltip);
   --color-tooltip-foreground: var(--tooltip-foreground);
 
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
+
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
 
@@ -215,8 +218,11 @@
   --tooltip-foreground: var(--color-grey-800);
   --tooltip-border: var(--color-grey-700);
 
-  --primary: var(--color-yellow-300);
-  --primary-foreground: var(--primary-foreground);
+  --brand: var(--color-yellow-300);
+  --brand-foreground: var(--primary-foreground);
+
+  --primary: #183ee9;
+  --primary-foreground: #f4f7fc;
 
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
@@ -230,8 +236,8 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
 
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
+  --destructive: var(--color-red-400);
+  --border: var(--color-grey-200);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
 }
@@ -240,36 +246,35 @@
   --background: var(--color-grey-900);
   --foreground: var(--color-grey-50);
 
-  --card: oklch(0.208 0.042 265.755); 
-  --card-foreground: oklch(0.984 0.003 247.858); 
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+
+  --popover: var(--color-grey-800);
+  --popover-foreground: var(--color-grey-50);
 
-  --popover: var(--color-grey-800); 
-  // used in footer ! addressChip ! and Select
-  --popover-foreground: var(--color-grey-50); 
+  --tooltip: var(--color-grey-800);
+  --tooltip-foreground: var(--color-grey-50);
 
-  --tooltip: var(--color-grey-800); 
-  // used in Table ! and Tooltip
-  --tooltip-foreground: var(--color-grey-50); 
-  // used in Tooltip
+  --brand: var(--color-yellow-300);
+  --brand-foreground: var(--color-grey-900);
 
-  --primary: var(--color-yellow-300); 
-  --primary-foreground: var(--color-grey-900);
+  --primary: #c0cbff;
+  --primary-foreground: #f4f7fc;
 
-  --secondary: var(--color-grey-600); 
-  --secondary-foreground: var(--color-grey-50); 
+  --secondary: var(--color-grey-600);
+  --secondary-foreground: var(--color-grey-50);
 
   --muted: var(--color-grey-700);
-  --muted-foreground: var(--color-grey-300);
+  --muted-foreground: var(--color-grey-200);
 
-  --intermediate: var(--color-grey-500); // used in scrollbar
-  --intermediate-foreground: var(--color-grey-200); // used in footer
+  --intermediate: var(--color-grey-500);
+  --intermediate-foreground: var(--color-grey-200);
 
   --accent: var(--color-grey-600);
   --accent-foreground: var(--color-white);
 
   --destructive: var(--color-red-500);
-  /* --border: var(--color-white); */
-  --border: var(--color-grey-600); 
+  --border: var(--color-grey-600);
   --input: var(--color-grey-400);
   --ring: var(--color-primary);
 }
diff --git a/src/modules/datasets/SchemaSearch.tsx b/src/modules/datasets/SchemaSearch.tsx
@@ -44,7 +44,7 @@ export function SchemaSearch({
   };
 
   return (
-    <div className="rounded-2xl border border-[#303038]">
+    <div className="rounded-2xl border">
       <button
         className={cn('flex w-full items-center gap-2 px-10 py-6 duration-200')}
         onClick={() => setIsOpen(!isOpen)}
diff --git a/src/routes/$chainSlug/_layout/account.tsx b/src/routes/$chainSlug/_layout/account.tsx
@@ -197,7 +197,7 @@ function RouteComponent() {
           )}
         >
           <p className="font-anybody flex items-center gap-4 font-extrabold">
-            <span className="bg-primary/10 text-primary rounded-lg p-2">
+            <span className="bg-primary-foreground text-primary rounded-lg p-2">
               <WalletIcon size={20} />
             </span>
             Your Wallet
@@ -237,7 +237,7 @@ function RouteComponent() {
           )}
         >
           <p className="font-anybody flex items-center gap-4 font-extrabold">
-            <span className="bg-primary/10 text-primary rounded-lg p-2">
+            <span className="bg-primary-foreground text-primary rounded-lg p-2">
               <IexecAccountIcon size={20} />
             </span>
             Your iExec Account

Original file line number	Diff line number	Diff line change
`@@ -76,7 +76,7 @@ export default function SmartLinkGroup({`
`76`	`76`	`{!isCurrentPage ? (`
`77`	`77`	`<Button`
`78`	`78`	`variant="link"`
`79`		`- className="h-auto gap-1 p-0 text-sm text-orange-200"`
	`79`	`+ className="h-auto gap-1 p-0 text-sm"`
`80`	`80`	`asChild`
`81`	`81`	`>`
`82`	`82`	`<Link`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ export const Stepper: React.FC<StepperProps> = ({`
`43`	`43`	`className={cn(`
`44`	`44`	`'mx-auto flex size-8 items-center justify-center rounded-full',`
`45`	`45`	`isActive ? 'bg-foreground text-background' : 'bg-muted',`
`46`		`- isCompleted && 'bg-primary text-background'`
	`46`	`+ isCompleted && 'bg-brand text-background'`
`47`	`47`	`)}`
`48`	`48`	aria-label={`Step ${index + 1}`}
`49`	`49`	`>`