[feat] mostly done

calblueprint · Nov 15, 2024 · 121ad82 · 121ad82
1 parent 4e8961b
commit 121ad82
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 47 deletions.
diff --git a/components/StatusDropdown/index.tsx b/components/StatusDropdown/index.tsx
@@ -1,6 +1,12 @@
 import React from 'react'; //REMOVE
 import { FilterType } from '@/types/schema';
 import { ExitIcon } from '../../assets/Dropdown-Icons/icons';
+import COLORS from '../../styles/colors';
+import {
+  ApplyFiltersText,
+  FilterNameText,
+  FilterOptionsText,
+} from '../../styles/texts';
 import {
   ApplyButtonStyles,
   ButtonStyles,
@@ -29,26 +35,28 @@ export default function StatusDropdown({
   label,
   currFilter,
 }: StatusDropdownProps) {
-  const filterOptions = [{ title: 'In Progress' }, { title: 'Operational' }];
+  const filterOptions = [
+    { title: 'In Progress', color: `${COLORS.ashGrey}` },
+    { title: 'Operational', color: `${COLORS.chateauGreen}` },
+  ];
 
-  // Function to handle status change, ensuring only one option can be selected
   const handleStatusChange = (status: string) => {
     setSelectedStatus(selectedStatus[0] === status ? [] : [status]);
   };
 
-  // Determine if any status is selected
   const isApplyButtonActive = selectedStatus.length > 0;
 
   return (
     <FilterDropdownStyles>
       <ButtonWithIconStyles onClick={() => handleButtonClick(currFilter)}>
-        {icon}
-        <ButtonStyles>{label}</ButtonStyles>
+        <FilterNameText>{icon}</FilterNameText>
+        <ButtonStyles>
+          <FilterNameText>{label}</FilterNameText>
+        </ButtonStyles>
         <ExitStyles>
           <ExitIcon />
         </ExitStyles>
       </ButtonWithIconStyles>
-
       <div>
         {filterOptions.map(option => (
           <CheckboxContainer key={option.title}>
@@ -57,14 +65,17 @@ export default function StatusDropdown({
               checked={selectedStatus.includes(option.title)}
               onChange={() => handleStatusChange(option.title)}
             />
-            <OptionTitleStyles>{option.title}</OptionTitleStyles>
+            <OptionTitleStyles color={option.color}>
+              <FilterOptionsText $color={option.color}>
+                {' '}
+                {option.title}
+              </FilterOptionsText>
+            </OptionTitleStyles>
           </CheckboxContainer>
         ))}
       </div>
-
-      {/* Apply Button with conditional styling */}
       <ApplyButtonStyles isActive={isApplyButtonActive}>
-        APPLY
+        <ApplyFiltersText>APPLY</ApplyFiltersText>
       </ApplyButtonStyles>
     </FilterDropdownStyles>
   );

diff --git a/components/StatusDropdown/styles.ts b/components/StatusDropdown/styles.ts
@@ -1,38 +1,23 @@
 import styled from 'styled-components';
-import { CoinbaseMono, CoinbaseSans, CoinbaseText } from '@/styles/fonts';
+import COLORS from '../../styles/colors';
 
 export const FilterDropdownStyles = styled.div`
   position: relative;
-  background: #fff;
+  background: ${COLORS.white};
   width: 11rem;
   border-radius: 0.5rem;
   padding-bottom: 0.5rem;
 `;
 
-export const CategoryTitleStyles = styled.p`
-  font-family: ${CoinbaseMono};
-  font-size: 0.625rem;
-  color: rgba(46, 58, 89, 0.85);
-  font-style: normal;
-  font-weight: 400;
-  margin-top: 1rem;
-  margin-left: 0.5rem;
-  margin-bottom: 0.15rem;
-`;
-
-export const OptionTitleStyles = styled.p`
-  font-family: ${CoinbaseText};
-  font-size: 0.75rem;
-  color: rgba(46, 58, 89, 0.85);
-  font-style: normal;
-  font-weight: 300;
-  line-height: normal;
+export const OptionTitleStyles = styled.p<{ color: string }>`
+  background: ${({ color }) => `${color}15`};
+  border-radius: 0.5rem;
+  padding: 0.1rem 0.4rem;
+  display: inline-block;
 `;
 
 export const CheckboxStyles = styled.input`
   cursor: pointer;
-  // margin-left: auto;
-  // margin-right: 1rem;
 `;
 
 export const ApplyButtonStyles = styled.button<{ isActive: boolean }>`
@@ -42,39 +27,28 @@ export const ApplyButtonStyles = styled.button<{ isActive: boolean }>`
   border-radius: 0.25rem;
   background: ${({ isActive }) =>
     isActive
-      ? '#4974e0'
+      ? COLORS.electricBlue
       : 'rgba(73, 116, 224, 0.50)'}; // Active vs Inactive color
   margin-top: 1rem;
+  margin-top: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: ${({ isActive }) => (isActive ? 'pointer' : 'not-allowed')};
-  color: #fff;
-  font-family: ${CoinbaseText};
-  font-size: 0.75rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
   border: none;
   margin-bottom: 0.5rem;
   width: 88%;
   margin: 1rem auto 0.5rem auto;
-  pointer-events: ${({ isActive }) =>
-    isActive ? 'auto' : 'none'}; // Disable clicking when inactive
+  pointer-events: ${({ isActive }) => (isActive ? 'auto' : 'none')};
 `;
 
 export const ButtonStyles = styled.button`
-  font-family: ${CoinbaseSans};
   color: rgba(46, 58, 89, 0.85);
-  font-size: 0.875rem;
-  background: #fff;
+  background: ${COLORS.white};
   border: none;
   border-radius: 6.25rem;
   display: flex;
   align-items: center;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
   cursor: pointer;
 `;
 

diff --git a/styles/colors.ts b/styles/colors.ts
@@ -5,6 +5,7 @@ const COLORS = {
   lightGreen: '#E8FFEF',
   green: '#0E7B30',
   earthyGreen: '#4D8B31',
+  chateauGreen: '#3D9458',
   navy: '#2E3A59',
   electricBlue: '#4974E0',
   lightBlue: '#92ACED',
@@ -14,6 +15,7 @@ const COLORS = {
   cyanBlue: '#68C6E2',
   veryLightGrey: '#F4F4F4',
   lightGrey: '#D9D9D9',
+  ashGrey: '#818181',
   grey: '#525454',
   black: '#000000',
   white: '#FFFFFF',

diff --git a/styles/texts.ts b/styles/texts.ts
@@ -184,6 +184,33 @@ export const SearchBarTextInUse = styled.p<TextProps>`
   color: ${COLORS.electricBlue};
 `;
 
+export const FilterNameText = styled.p<TextProps>`
+  ${TextStylesCoinbaseSans}
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  color: rgba(46, 58, 89, 0.85);
+`;
+
+export const FilterOptionsText = styled.p<TextProps>`
+  ${TextStylesCoinbaseText}
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+  color: ${({ $color }) => $color || COLORS.navy};
+`;
+
+export const ApplyFiltersText = styled.p<TextProps>`
+  ${TextStylesCoinbaseText}
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  color: ${COLORS.white};
+`;
+
 /*
 
 export const FilterFont = styled.h1`