Skip to content

Commit

Permalink
fix(consistent color scheme in UI elements): 📘
Browse files Browse the repository at this point in the history
  • Loading branch information
@Suvraneel
Suvraneel committed Dec 29, 2024
1 parent 5b54290 commit 7065400
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 94 deletions.
110 changes: 54 additions & 56 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
}
18 changes: 5 additions & 13 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)]">
Expand All @@ -40,7 +32,7 @@ export default function Home() {
aria-live="polite"
role="text"
>
<TextScramble phrases={phrases} />
<TextScramble phrases={layerPrefixPhrases} />
</span>
<br />
Layer
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand All @@ -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" />
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/floating-navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
48 changes: 24 additions & 24 deletions tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down

0 comments on commit 7065400

Please sign in to comment.