feat: update colors of all existing components

nishiki-tech · Dec 6, 2023 · 75f8844 · 75f8844
1 parent e915b4b
commit 75f8844
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 12 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -31,9 +31,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
       {/* Reducing hydration error. Reference : https://nextjs.org/docs/messages/react-hydration-error */}
       <html lang="en" suppressHydrationWarning>
         <head />
-        <body
-          className={cn('min-h-screen bg-background font-sans antialiased', fontInter.variable)}
-        >
+        <body className={cn('min-h-screen bg-primary-lightest antialiased', fontInter.variable)}>
           <MobileLayout>{children}</MobileLayout>
         </body>
       </html>

diff --git a/src/components/base/parts/mobile/BottomTab.tsx b/src/components/base/parts/mobile/BottomTab.tsx
@@ -9,7 +9,7 @@ export const BottomTab = () => {
   const pathName = usePathname();
 
   return (
-    <div className="fixed bottom-0 left-0 z-50 w-full h-16 bg-popover border-t border-border">
+    <div className="fixed bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-light">
       <div className="grid h-full max-w-lg grid-cols-3 mx-auto font-medium">
         <BottomTabIconLink name="groups" isSelected={pathName === mainRouteConfig['groups'].path} />
         <BottomTabIconLink name="foods" isSelected={pathName === mainRouteConfig['foods'].path} />

diff --git a/src/components/base/parts/mobile/MobileHeader.tsx b/src/components/base/parts/mobile/MobileHeader.tsx
@@ -1,20 +1,32 @@
 'use client';
 
-import { Button, Icon } from '@/components/ui';
+import { Icon } from '@/components/ui';
 
 import React from 'react';
 
 export const MobileHeader = () => {
   return (
-    <header className="bg-popover sticky top-0 z-40 w-full">
-      <div className="flex h-16 items-center justify-between px-5">
-        <Button variant="ghost" size="icon" onClick={() => {}} className="hover:bg-popover">
-          <Icon iconName="arrowLeft" color="popover-foreground" />
+    <header className="bg-white sticky top-0 z-40 w-full">
+      <div className="flex h-12 items-center justify-between">
+        <Button>
+          <Icon iconName="arrowLeft" color="gray-dark" />
         </Button>
-        <Button variant="ghost" size="icon" onClick={() => {}} className="hover:bg-popover">
-          <Icon iconName="menuCircle" color="popover-foreground" />
+        <Button>
+          <Icon iconName="menuCircle" color="gray-dark" />
         </Button>
       </div>
     </header>
   );
 };
+
+interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+}
+
+const Button: React.FC<IButtonProps> = ({ children, ...props }) => {
+  return (
+    <button className="h-full aspect-square flex items-center justify-center" {...props}>
+      {children}
+    </button>
+  );
+};
diff --git a/src/components/ui/BottomTabIconLink.tsx b/src/components/ui/BottomTabIconLink.tsx
@@ -34,7 +34,7 @@ export const BottomTabIconLink: React.FC<Props> = ({ name, isSelected }) => {
   // const fillStyle = isSelected ? 'primary' : 'secondary';
 
   // text color based on "isSelected" variable
-  const color = isSelected ? 'primary' : 'secondary';
+  const color = isSelected ? 'primary' : 'gray-dark';
   const textColorStyle = `text-${color}`;
 
   return (