Update brand colors

ten-protocol · Apr 3, 2024 · a89d4f4 · a89d4f4
1 parent 4affa8a
commit a89d4f4
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 67 deletions.
diff --git a/tools/tenscan/frontend/src/components/modules/common/copy.tsx b/tools/tenscan/frontend/src/components/modules/common/copy.tsx
@@ -14,7 +14,7 @@ const Copy = ({ value }: { value: string | number }) => {
       onClick={() => copyToClipboard(value.toString())}
     >
       <span className="sr-only">Copy</span>
-      {copied ? <CheckIcon /> : <CopyIcon />}
+      {copied ? <CheckIcon className="text-primary" /> : <CopyIcon />}
     </Button>
   );
 };

diff --git a/tools/tenscan/frontend/src/components/modules/common/truncated-address.tsx b/tools/tenscan/frontend/src/components/modules/common/truncated-address.tsx
@@ -33,7 +33,7 @@ const TruncatedAddress = ({
             <Tooltip>
               <TooltipTrigger>{truncatedAddress}</TooltipTrigger>
               <TooltipContent>
-                <p>{address}</p>
+                <p className="text-primary">{address}</p>
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>

diff --git a/tools/tenscan/frontend/src/components/ui/badge.tsx b/tools/tenscan/frontend/src/components/ui/badge.tsx
@@ -8,8 +8,7 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        default: "border-transparent bg-primary hover:bg-primary/80",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:

diff --git a/tools/tenscan/frontend/styles/globals.css b/tools/tenscan/frontend/styles/globals.css
@@ -5,83 +5,63 @@
 @import "./fonts/DMSans/stylesheet.css";
 @import "./fonts/Quicksand/stylesheet.css";
 
+/* --brand-orange: 6, 61%, 64%;
+--brand-yellow: 32 61% 64%;
+--brand-green: 156 18% 65%;
+--brand-pink: 328 87% 69%; */
+
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
+    --foreground: 20 14.3% 4.1%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 6, 61%, 64%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
     --success: 120 63% 31%;
     --success-foreground: 210 40% 98%;
-
     --warning: 45 80% 50%;
     --warning-foreground: 0 0% 20%;
-
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 6, 61%, 64%;
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 6, 61%, 64%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
     --success: 120 63% 31%;
     --success-foreground: 210 40% 98%;
-
-    --warning: 45 80% 40%;
-    --warning-foreground: 0 0% 80%;
-
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
+    --warning: 45 80% 50%;
+    --warning-foreground: 0 0% 20%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 6, 61%, 64%;
   }
 }