refactor: adjust colors

jobstash · Jul 29, 2024 · 09ce2ed · 09ce2ed
1 parent 44f823d
commit 09ce2ed
Show file tree

Hide file tree

Showing 14 changed files with 30 additions and 42 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -4,20 +4,15 @@
 
 @layer base {
 	:root {
-		--color-base-dark: #141317;
+		--color-base-dark: 13 13 13; /* #0D0D0D */
+		--color-dark-gray: 25 25 25; /* #191919 */
 		--color-white: 255 255 255;
-		--color-darkest-gray: 30 30 30;
-		--color-darker-gray: 41 41 41;
-		--color-dark-gray: 52 52 52;
-		--color-primary: 135 67 255; /* #8743FF */
-		--color-mid-primary: 102 61 249; /* #663DF9 */
-		--color-secondary: 65 54 241; /* #4136F1 */
+		--color-primary: 65 54 241; /* #4136F1 */
+		--color-secondary: 135 67 255; /* #8743FF */
 	}
 }
 
 html {
-	background-color: #141317;
-	color: #fff;
 	overflow-y: scroll;
 	scrollbar-gutter: stable;
 }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -22,7 +22,10 @@ interface RootLayoutProps {
 }
 
 const RootLayout: React.FC<RootLayoutProps> = ({ children }) => (
-  <html lang="en" className={`${lato.variable} ${roboto.variable}`}>
+  <html
+    lang="en"
+    className={`bg-[#0D0D0D] ${lato.variable} ${roboto.variable}`}
+  >
     <body className={inter.className}>
       <NextUIProvider>
         <ReactQueryProvider>

diff --git a/src/shared/components/card-skeleton.tsx b/src/shared/components/card-skeleton.tsx
@@ -4,7 +4,7 @@ import { Divider } from './divider';
 
 export const CardSkeleton = () => {
   return (
-    <div className="flex flex-col gap-3 rounded-3xl bg-darkest-gray p-6">
+    <div className="flex flex-col gap-3 rounded-3xl bg-white/5 p-6">
       <div className="flex w-full items-center justify-between">
         <Skeleton className="h-6 w-9/12 rounded-md md:w-6/12" />
         <Skeleton className="h-6 w-2/12 rounded-md" />

diff --git a/src/shared/components/card-wrapper.tsx b/src/shared/components/card-wrapper.tsx
@@ -9,9 +9,9 @@ interface Props {
 }
 
 const CARD_WRAPPER_BASE_CLASS =
-  'rounded-3xl bg-darkest-gray transition-all duration-300 hover:bg-darker-gray';
+  'rounded-3xl bg-white/5 transition-all duration-300 hover:bg-white/10';
 const CARD_WRAPPER_ACTIVE_CLASS =
-  'bg-gradient-to-l from-primary to-secondary hover:brightness-125';
+  'bg-gradient-to-l from-[#0D0D0D] to-primary hover:brightness-125';
 
 export const CardWrapper = (props: Props) => {
   const { id, idAtom, children } = props;

diff --git a/src/shared/components/chains-info-tag.tsx b/src/shared/components/chains-info-tag.tsx
@@ -22,7 +22,7 @@ const CHAIN_COUNTS = {
 const AvatarGroupCount = ({ count }: { count: number }) => (
   <Tooltip content={`${count} other ${getPluralText('chain', count)}`}>
     <div className="z-10 ml-[-10px] flex size-[30px] items-center justify-center rounded-full bg-[#E5ECF6]">
-      <Text className="font-lato text-sm text-dark-gray" text={`+${count}`} />
+      <Text className="font-lato text-sm text-black" text={`+${count}`} />
     </div>
   </Tooltip>
 );

diff --git a/src/shared/components/details-panel/card-wrapper.tsx b/src/shared/components/details-panel/card-wrapper.tsx
@@ -2,11 +2,10 @@ import { getGradientBorderStyle } from '@/shared/utils/get-gradient-border-style
 
 interface Props {
   children: React.ReactNode;
-  isPrimary?: boolean;
 }
 
-export const DetailsPanelCardWrapper = ({ children, isPrimary }: Props) => {
-  const style = getGradientBorderStyle(isPrimary);
+export const DetailsPanelCardWrapper = ({ children }: Props) => {
+  const style = getGradientBorderStyle();
 
   return (
     <div className="flex flex-col gap-4 rounded-3xl p-6" style={style}>

diff --git a/src/shared/components/details-panel/layout.tsx b/src/shared/components/details-panel/layout.tsx
@@ -10,10 +10,10 @@ interface Props {
 
 export const DetailsPanelLayout = ({ backHref, children }: Props) => {
   return (
-    <div className="hide-scrollbar fixed right-0 top-0 z-20 size-full min-h-screen overflow-y-auto bg-darkest-gray pt-[68px] md:w-[calc((100%-212px))] md:pt-20 lg:w-[calc((100%-212px)/2)] lg:pt-0">
+    <div className="hide-scrollbar fixed right-0 top-0 z-20 size-full min-h-screen overflow-y-auto bg-[#191919] pt-[68px] md:w-[calc((100%-212px))] md:pt-20 lg:w-[calc((100%-212px)/2)] lg:pt-0">
       <MobileHeader
         left={<DetailsPanelBackButton href={backHref} />}
-        className="z-50 bg-darkest-gray md:left-auto md:right-0 md:flex md:w-[calc((100%-220px))] lg:hidden"
+        className="z-50 bg-[#191919] md:left-auto md:right-0 md:flex md:w-[calc((100%-220px))] lg:hidden"
       />
       <div className="flex flex-col gap-4 p-5 lg:p-6">{children}</div>
 

diff --git a/src/shared/components/details-panel/tab.tsx b/src/shared/components/details-panel/tab.tsx
@@ -15,7 +15,7 @@ export const DetailsPanelTab = ({ href, isActive, text }: TabProps) => {
   const linkStyle = isActive ? getGradientBorderStyle() : undefined;
 
   const wrapperClassName =
-    'flex h-10 shrink-0 items-center justify-center rounded-lg border border-white/20 px-4 py-2 sm:h-12 md:h-8';
+    'flex h-10 shrink-0 items-center justify-center rounded-lg border border-white/10 px-4 py-2 sm:h-12 md:h-8';
 
   const contentClassName = cn(
     `rounded-lg border border-transparent font-lato text-sm`,

diff --git a/src/shared/components/info-tag/index.tsx b/src/shared/components/info-tag/index.tsx
@@ -9,7 +9,7 @@ import { InfoTagLink } from './info-tag-link';
 const DEFAULT_CLASSNAME =
   'flex h-6 shrink-0 items-center gap-x-2 rounded-[4px] py-1 pr-2 lg:rounded-md';
 const LINK_CLASSNAME =
-  'bg-white/10 hover:bg-white/40 cursor-pointer duration-300 transition-all px-2';
+  'bg-white/10 cursor-pointer duration-300 transition-all px-2';
 const COMPACT_CLASSNAME = 'h-10 sm:h-12 md:h-6';
 
 interface Props {

diff --git a/src/shared/components/mobile-header.tsx b/src/shared/components/mobile-header.tsx
@@ -15,7 +15,7 @@ export const MobileHeader = ({ left, className }: Props) => {
   return (
     <div
       className={cn(
-        'fixed left-0 top-0 z-10 flex h-[70px] w-full items-center justify-between border-b border-white/10 bg-base-dark p-4 py-2 md:hidden md:h-20',
+        'fixed left-0 top-0 z-10 flex h-[70px] w-full items-center justify-between border-b border-white/10 bg-[#191919] p-4 py-2 md:hidden md:h-20',
         className,
       )}
     >

diff --git a/src/shared/components/nav/bartab.tsx b/src/shared/components/nav/bartab.tsx
@@ -29,8 +29,9 @@ export const Bartab = (props: BartabProps) => {
     closeNav();
   };
 
-  const buttonClassName = cn('justify-start bg-none', {
-    'bg-gradient-to-l from-[#8743FF] to-[#4136F1]': isActive || isMobile,
+  const buttonClassName = cn('justify-start hover:bg-white/15', {
+    'bg-white/5': !isActive,
+    'bg-gradient-to-l from-[#0D0D0D] to-primary': isActive || isMobile,
   });
 
   return (

diff --git a/src/shared/providers/next-ui-provider.tsx b/src/shared/providers/next-ui-provider.tsx
@@ -9,7 +9,7 @@ export const NextUIProvider = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <BaseProvider navigate={router.push}>
-      <main className="bg-base-dark text-white dark">{children}</main>
+      <main>{children}</main>
     </BaseProvider>
   );
 };
diff --git a/src/shared/utils/get-gradient-border-style.ts b/src/shared/utils/get-gradient-border-style.ts
@@ -1,20 +1,13 @@
-const PRIMARY_START_COLOR = '#8743FF';
-const PRIMARY_END_COLOR = '#4136F1';
-const SECONDARY_START_COLOR = '#363638';
-const SECONDARY_END_COLOR = '#27272A';
-const BASE_BACKGROUND_COLOR = '#1e1e1e';
+const START_COLOR = '#1f1f28';
+const END_COLOR = '#4136F1';
+const BASE_BACKGROUND_COLOR = '#191919';
 const TRANSPARENT_BORDER = '2px solid transparent';
 const BASE_BACKGROUND_GRADIENT_DIRECTION = '90deg';
-const BORDER_GRADIENT_DIRECTION = '270deg';
-
-export const getGradientBorderStyle = (
-  isPrimary = true,
-): React.CSSProperties => {
-  const startColor = isPrimary ? PRIMARY_START_COLOR : SECONDARY_START_COLOR;
-  const endColor = isPrimary ? PRIMARY_END_COLOR : SECONDARY_END_COLOR;
+const BORDER_GRADIENT_DIRECTION = '330deg';
 
+export const getGradientBorderStyle = (): React.CSSProperties => {
   return {
-    background: `linear-gradient(${BASE_BACKGROUND_GRADIENT_DIRECTION}, ${BASE_BACKGROUND_COLOR}, ${BASE_BACKGROUND_COLOR}) padding-box, linear-gradient(${BORDER_GRADIENT_DIRECTION}, ${startColor}, ${endColor}) border-box`,
+    background: `linear-gradient(${BASE_BACKGROUND_GRADIENT_DIRECTION}, ${BASE_BACKGROUND_COLOR}, ${BASE_BACKGROUND_COLOR}) padding-box, linear-gradient(${BORDER_GRADIENT_DIRECTION}, ${START_COLOR}, ${END_COLOR}) border-box`,
     border: TRANSPARENT_BORDER,
   };
 };
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -22,12 +22,9 @@ const config: Config = {
       colors: {
         white: 'rgb(var(--color-white) / <alpha-value>)',
         'base-dark': 'var(--color-base-dark)',
-        'dark-gray': 'rgb(var(--color-dark-gray) / <alpha-value>)',
-        'darker-gray': 'rgb(var(--color-darker-gray) / <alpha-value>)',
-        'darkest-gray': 'rgb(var(--color-darkest-gray) / <alpha-value>)',
+        'dark-gray': 'var(--color-dark-gray)',
         primary: 'rgb(var(--color-primary) / <alpha-value>)',
         secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
-        'mid-primary': 'rgb(var(--color-mid-primary) / <alpha-value>)',
         skill1: '#F7FD36',
         skill2: '#CAE402',
         skill3: '#E2BF2B',