add tailwind colors

pennlabs · Oct 20, 2024 · e669467 · e669467
1 parent 4de185a
commit e669467
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 11 deletions.
diff --git a/frontend/components/dashboard/DashboardHeader.tsx b/frontend/components/dashboard/DashboardHeader.tsx
@@ -43,8 +43,7 @@ export const DashboardHeader = ({
           }
         >
           <Button
-            className="flex items-center justify-center"
-            color={colors.GREEN}
+            className="flex items-center justify-center bg-green"
             round
             style={{ margin: '0 0 0 1rem' }}
           >

diff --git a/frontend/components/form/StatusBar.tsx b/frontend/components/form/StatusBar.tsx
@@ -43,11 +43,7 @@ const StatusBar = ({ status }: iStatusBarProps) => {
 
   return (
     <>
-      <Group
-        horizontal
-        className="flex items-center"
-        style={{ margin: '0 0.5rem' }}
-      >
+      <Group horizontal className="flex items-center mx-2">
         <IconCircle color={colors.MEDIUM_BLUE} />
         <StatusGroup compareStatus={Status.REVISION} />
         <StatusGroup compareStatus={Status.APPROVED} />

diff --git a/frontend/components/styles/Buttons.tsx b/frontend/components/styles/Buttons.tsx
@@ -54,7 +54,7 @@ export const ToggleOption = React.forwardRef<
     type="button"
     className={`
       border-0
-      ${active ? 'bg-blue-500 text-white' : 'bg-neutral-100 text-gray-700'}
+      ${active ? 'bg-mediumBlue text-white' : 'bg-neutral-100 text-gray-700'}
       rounded-full
       py-1 px-4
       outline-none
@@ -76,7 +76,7 @@ export const PostPollToggle = ({
   activeOption: PageType
   setActiveOption: React.Dispatch<React.SetStateAction<PageType>>
 }) => (
-  <div className="flex items-center rounded-full bg-neutral-100 p-1.5 h-10 align-middle border shadow-sm shadow-neutral-50">
+  <div className="flex items-center rounded-full bg-neutral-100 p-1.5 h-10 align-middle border border-lighterGray shadow-sm shadow-neutral-50">
     <ToggleOption
       active={activeOption === PageType.POST}
       onClick={() => setActiveOption(PageType.POST)}

diff --git a/frontend/components/styles/Nav.tsx b/frontend/components/styles/Nav.tsx
@@ -49,7 +49,7 @@ const NavItem = ({
       <div
         className={`flex gap-2 cursor-pointer items-center py-2 px-4 rounded-full border ${
           isActive
-            ? 'bg-neutral-50 shadow-sm shadow-neutral-100'
+            ? 'bg-neutral-50 shadow-sm shadow-neutral-100 border-lighterGray'
             : 'border-transparent'
         }`}
       >
@@ -77,7 +77,7 @@ export const Nav = () => {
 
   return (
     <div
-      className={`w-[12rem] bg-${colors.NAV_BACKGROUND} flex flex-col justify-between items-center min-h-screen fixed py-4`}
+      className={`w-[12rem] bg-white flex flex-col justify-between items-center min-h-screen fixed py-4`}
     >
       <div className="flex flex-initial flex-col gap-6 justify-center items-center">
         <h1 className="flex justify-center items-center gap-4">

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -9,6 +9,26 @@ module.exports = {
       fontFamily: {
         'work-sans': ['"Work Sans"', 'sans-serif'],
       },
+      colors: {
+        white: '#ffffff',
+        yellow: '#F2C94C',
+        orange: '#f2994a',
+        lightRed: '#EED4D4',
+        red: '#EB9387',
+        darkRed: '#AE2727',
+        purple: '#a98abf',
+        lightBlue: '#d3e3f5',
+        mediumBlue: '#2175cb',
+        imageBlue: '#2D9CDB',
+        navBackground: '#ffffff',
+        navProfileBackground: '#D3E3F566',
+        gray: '#999999',
+        lighterGray: '#e5e5e5',
+        lightGray: '#bdbdbd',
+        darkGray: '#828282',
+        lightGreen: '#D4EEDF',
+        green: '#3faa6d',
+      },
     },
   },
   plugins: [],