Merge pull request #2 from Suvraneel/main

fix(consistent color scheme in UI elements & default mode to dark): 📘
SettleX-Labs · Dec 29, 2024 · f72d9c7 · f72d9c7
2 parents c569af7 + 7065400
commit f72d9c7
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 99 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app)
 
 ## Getting Started
 

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -4,66 +4,64 @@
 
 @layer base {
     :root {
-        --background: 0 0% 0%;
-        --foreground: 240 10% 3.9%;
-        --muted: 240 4.8% 95.9%;
-        --muted-foreground: 240 3.8% 46.1%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 240 10% 3.9%;
-        --card: 0 0% 100%;
-        --card-foreground: 240 10% 3.9%;
-        --border: 240 5.9% 90%;
-        --input: 240 5.9% 90%;
-        --primary: 240 5.9% 10%;
-        --primary-foreground: 0 0% 98%;
-        --secondary: 240 4.8% 95.9%;
-        --secondary-foreground: 240 5.9% 10%;
-        --accent: 240 4.8% 95.9%;
-        --accent-foreground: 240 5.9% 10%;
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 0 0% 98%;
-        --ring: 240 10% 3.9%;
-        --chart-1: 12 76% 61%;
-        --chart-2: 173 58% 39%;
-        --chart-3: 197 37% 24%;
-        --chart-4: 43 74% 66%;
-        --chart-5: 27 87% 67%;
+        --background: #FFFFFF;
+        --foreground: #0A0A0A;
+        --muted: #F3F3F3;
+        --muted-foreground: #A3A3A3;
+        --popover: #FFFFFF;
+        --popover-foreground: #0A0A0A;
+        --card: #FFFFFF;
+        --card-foreground: #0A0A0A;
+        --border: #E6E6E6;
+        --input: #E6E6E6;
+        --primary: #19C0DE; /* Logo Cyan */
+        --primary-foreground: #000000;
+        --secondary: #F3F3F3;
+        --secondary-foreground: #1A1A1A;
+        --accent: #F3F3F3;
+        --accent-foreground: #1A1A1A;
+        --destructive: #D93636;
+        --destructive-foreground: #FAFAFA;
+        --ring: #0A0A0A;
+        --chart-1: #F28B3B;
+        --chart-2: #2B9E63;
+        --chart-3: #3B5F7E;
+        --chart-4: #F2B02B;
+        --chart-5: #F2B02B;
         --radius: 0.5rem;
     }
 
     .dark {
-        --background: 255 100% 100%; /* White */
-        --foreground: 0 0% 98%; /* White */
-        --muted: 240 3.7% 15.9%; /* Dark blue-gray */
-        --muted-foreground: 240 5% 64.9%; /* Light blue-gray */
-        --popover: 240 10% 3.9%; /* Dark blue-gray */
-        --popover-foreground: 0 0% 98%; /* White */
-        --card: 240 10% 3.9%; /* Dark blue-gray */
-        --card-foreground: 0 0% 98%; /* White */
-        --border: 240 3.7% 15.9%; /* Dark blue-gray */
-        --input: 240 3.7% 15.9%; /* Dark blue-gray */
-        --primary: 0 0% 98%; /* White */
-        --primary-foreground: 240 5.9% 10%; /* Dark blue-gray */
-        --secondary: 240 3.7% 15.9%; /* Dark blue-gray */
-        --secondary-foreground: 0 0% 98%; /* White */
-        --accent: 240 3.7% 15.9%; /* Dark blue-gray */
-        --accent-foreground: 0 0% 98%; /* White */
-        --destructive: 0 62.8% 30.6%; /* Dark red */
-        --destructive-foreground: 0 0% 98%; /* White */
-        --ring: 240 4.9% 83.9%; /* Light blue-gray */
-        --chart-1: 220 70% 50%; /* Blue */
-        --chart-2: 160 60% 45%; /* Green */
-        --chart-3: 30 80% 55%; /* Orange */
-        --chart-4: 280 65% 60%; /* Purple */
-        --chart-5: 340 75% 55%; /* Pink */
-    }
-
-    * {
-        @apply border-border;
-    }
-
-    body {
-        font-family: Arial, Helvetica, sans-serif;
+        --background: #101010;
+        --foreground: #FAFAFA;
+        --muted: #292929;
+        --muted-foreground: #A3A3A3;
+        --popover: #0A0A0A;
+        --popover-foreground: #FAFAFA;
+        --card: #0A0A0A;
+        --card-foreground: #FAFAFA;
+        --border: #292929;
+        --input: #292929;
+        --primary: #19C0DE; /* Logo Cyan */
+        --primary-foreground: #000000;
+        --secondary: #292929;
+        --secondary-foreground: #FAFAFA;
+        --accent: #292929;
+        --accent-foreground: #FAFAFA;
+        --destructive: #9E1E1E;
+        --destructive-foreground: #FAFAFA;
+        --ring: #D3D3D3;
+        --chart-1: #3B5F7E;
+        --chart-2: #2B9E63;
+        --chart-3: #F28B3B;
+        --chart-4: #B23B7E;
+        --chart-5: #D93B7E;
     }
+}
 
+* {
+    @apply border-border;
 }
+
+body {
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -24,7 +24,7 @@ export default function RootLayout({children}: Readonly<{ children: ReactNode }>
     return (
         <html lang="en">
         <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <NextThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+        <NextThemeProvider attribute="class" defaultTheme="dark" disableTransitionOnChange>
             <Header/>
             {children}
         </NextThemeProvider>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,15 +5,7 @@ import Link from "next/link";
 import TextScramble from "@components/ui/Scrambler";
 
 const encryptedSuffixPhrases = ["Compute", "Transfers", "Swaps", "Intents"];
-const phrases = [
-  "Interoperability",
-  "Confidentiality",
-  "High Performance",
-  "Scalability",
-  "Communication",
-  "Privacy",
-  "Liquidity",
-];
+const layerPrefixPhrases = ["Interoperability", "Confidentiality", "Scalability", "Communication", "Privacy", "Liquidity", "Security"];
 export default function Home() {
   return (
     <div className="h-screen w-screen overflow-hidden flex justify-evenly items-center p-5 min-h-screen font-[family-name:var(--font-geist-sans)]">
@@ -40,7 +32,7 @@ export default function Home() {
                 aria-live="polite"
                 role="text"
               >
-                <TextScramble phrases={phrases} />
+                <TextScramble phrases={layerPrefixPhrases} />
               </span>
               <br />
               Layer
@@ -75,7 +67,7 @@ export default function Home() {
                 </a>
               </span>
             </p>
-            <div className="w-full h-full mt-3 sm:mt-5 md:mt-8 flex flex-col sm:flex-row justify-start items-start gap-3 sm:gap-8 max-[410px]:gap-2">
+            <div className="w-full h-full mt-3 sm:mt-5 md:mt-8 lg:mt-16 flex flex-col sm:flex-row justify-start items-start gap-3 sm:gap-8 max-[410px]:gap-2">
               <Link
                 href="mailto: [email protected]"
                 target="_blank"
@@ -86,7 +78,7 @@ export default function Home() {
                   className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md
                                         text-xs sm:text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
                                         disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
-                                        bg-primary hover:bg-zinc-400 text-primary-foreground shadow px-4 py-2"
+                                        bg-primary hover:bg-cyan-400 text-primary-foreground shadow px-4 py-2"
                 >
                   Contact Us
                 </button>
@@ -96,7 +88,7 @@ export default function Home() {
                   className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md
                                         text-xs sm:text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
                                         disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 group
-                                        bg-transparent shadow border border-cyan-300 text-black dark:text-white hover:bg-accent/40 hover:text-neutral-500 h-9 px-4 py-2"
+                                        bg-transparent shadow border border-primary text-black dark:text-white hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2"
                 >
                   Join Waitlist
                   <ChevronRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />

diff --git a/src/components/ui/ThemeToggle.tsx b/src/components/ui/ThemeToggle.tsx
@@ -5,8 +5,8 @@ import "@theme-toggles/react/css/Within.css"
 import {Within} from "@theme-toggles/react";
 
 function ThemeToggle() {
-    const {resolvedTheme, setTheme} = useTheme();
-    const [toggleIsDark, setToggleIsDark] = React.useState(resolvedTheme === 'dark');
+    const {setTheme} = useTheme();
+    const [toggleIsDark, setToggleIsDark] = React.useState(true);
 
     const toggleTheme = () => {
         setToggleIsDark(!toggleIsDark);
@@ -17,7 +17,7 @@ function ThemeToggle() {
     }, [toggleIsDark]);
 
     return (
-        <Within className='scale-150 transition-all duration-1000 ease-in-out'
+        <Within className='scale-150'
                 toggled={toggleIsDark} toggle={toggleTheme} duration={1000} placeholder={'Toggle Theme'}
                 aria-label={'Toggle Theme'} title={'Toggle Theme'} tabIndex={0}
                 type="button" onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}/>

diff --git a/src/components/ui/floating-navbar.tsx b/src/components/ui/floating-navbar.tsx
@@ -67,7 +67,7 @@ export const FloatingNav = ({
                     hover:bg-neutral-100 dark:hover:bg-neutral-900"
           >
             <span>Waitlist</span>
-            <span className="absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-gradient-to-r from-transparent via-blue-500 to-transparent  h-px" />
+            <span className="absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-gradient-to-r from-transparent via-primary to-transparent  h-px" />
           </button>
         </Link>
       </motion.div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -13,45 +13,45 @@ export default {
     theme: {
         extend: {
             colors: {
-                background: 'hsl(var(--background))',
-                foreground: 'hsl(var(--foreground))',
+                background: 'var(--background)',
+                foreground: 'var(--foreground)',
                 card: {
-                    DEFAULT: 'hsl(var(--card))',
-                    foreground: 'hsl(var(--card-foreground))'
+                    DEFAULT: 'var(--card)',
+                    foreground: 'var(--card-foreground)'
                 },
                 popover: {
-                    DEFAULT: 'hsl(var(--popover))',
-                    foreground: 'hsl(var(--popover-foreground))'
+                    DEFAULT: 'var(--popover)',
+                    foreground: 'var(--popover-foreground)'
                 },
                 primary: {
-                    DEFAULT: 'hsl(var(--primary))',
-                    foreground: 'hsl(var(--primary-foreground))'
+                    DEFAULT: 'var(--primary)',
+                    foreground: 'var(--primary-foreground)'
                 },
                 secondary: {
-                    DEFAULT: 'hsl(var(--secondary))',
-                    foreground: 'hsl(var(--secondary-foreground))'
+                    DEFAULT: 'var(--secondary)',
+                    foreground: 'var(--secondary-foreground)'
                 },
                 muted: {
-                    DEFAULT: 'hsl(var(--muted))',
-                    foreground: 'hsl(var(--muted-foreground))'
+                    DEFAULT: 'var(--muted)',
+                    foreground: 'var(--muted-foreground)'
                 },
                 accent: {
-                    DEFAULT: 'hsl(var(--accent))',
-                    foreground: 'hsl(var(--accent-foreground))'
+                    DEFAULT: 'var(--accent)',
+                    foreground: 'var(--accent-foreground)'
                 },
                 destructive: {
-                    DEFAULT: 'hsl(var(--destructive))',
-                    foreground: 'hsl(var(--destructive-foreground))'
+                    DEFAULT: 'var(--destructive)',
+                    foreground: 'var(--destructive-foreground)'
                 },
-                border: 'hsl(var(--border))',
-                input: 'hsl(var(--input))',
-                ring: 'hsl(var(--ring))',
+                border: 'var(--border)',
+                input: 'var(--input)',
+                ring: 'var(--ring)',
                 chart: {
-                    '1': 'hsl(var(--chart-1))',
-                    '2': 'hsl(var(--chart-2))',
-                    '3': 'hsl(var(--chart-3))',
-                    '4': 'hsl(var(--chart-4))',
-                    '5': 'hsl(var(--chart-5))'
+                    '1': 'var(--chart-1)',
+                    '2': 'var(--chart-2)',
+                    '3': 'var(--chart-3)',
+                    '4': 'var(--chart-4)',
+                    '5': 'var(--chart-5)'
                 }
             },
             borderRadius: {