destructure styled props and iterating on feedback

calblueprint · Dec 3, 2024 · 053ee01 · 053ee01
1 parent 6660055
commit 053ee01
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 22 deletions.
diff --git a/components/NavColumn/index.tsx b/components/NavColumn/index.tsx
@@ -5,7 +5,9 @@ import CONFIG from '@/lib/configs';
 import { IconType } from '@/lib/icons';
 import COLORS from '@/styles/colors';
 import { H3, H4 } from '@/styles/text';
+import { UserTypeEnum } from '@/types/schema';
 import { useAuth } from '@/utils/AuthProvider';
+import { getUserType } from '@/utils/helpers';
 import { useProfile } from '@/utils/ProfileProvider';
 import Icon from '../Icon';
 import NavColumnItem from '../NavColumnItem';
@@ -67,7 +69,7 @@ export default function NavColumn({
     <>
       {isOpen && (
         <>
-          <Overlay onClick={onClose} isOpen={isOpen} />
+          <Overlay onClick={onClose} $isOpen={isOpen} />
           <NavColumnContainer>
             <div>
               <NavColumnHeader>
@@ -85,7 +87,7 @@ export default function NavColumn({
                 {navLinks.map((link: NavLink, key) => (
                   <NavColumnItem
                     key={key}
-                    name={link.name}
+                    routeName={link.name}
                     path={link.path}
                     isSelected={currentPath === link.path}
                     icon={link.iconName}
@@ -103,7 +105,7 @@ export default function NavColumn({
                       Your Account
                     </H3>
                     <H4 $color={COLORS.shrub} style={{ fontWeight: 300 }}>
-                      {profileData?.user_type}
+                      {getUserType(profileData?.user_type as UserTypeEnum)}
                     </H4>
                   </NameAndStatus>
                 </Profile>

diff --git a/components/NavColumn/styles.ts b/components/NavColumn/styles.ts
@@ -6,7 +6,7 @@ import Icon from '../Icon';
 export const NavColumnContainer = styled.div`
   min-width: 289px;
   height: 100vh;
-  background: #f7f6f3;
+  background: ${COLORS.glimpse};
   position: fixed;
   z-index: 1000;
   top: 0;
@@ -18,15 +18,15 @@ export const NavColumnContainer = styled.div`
   justify-content: space-between;
 `;
 
-export const Overlay = styled.div<{ isOpen: boolean }>`
+export const Overlay = styled.div<{ $isOpen: boolean }>`
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 999;
-  display: ${props => (props.isOpen ? 'block' : 'none')};
+  display: ${({ $isOpen }) => ($isOpen ? 'block' : 'none')};
 `;
 
 export const HamburgerButton = styled.button`
@@ -84,7 +84,7 @@ export const SignUpButton = styled(Link)`
   border: none;
   background-color: ${COLORS.shrub};
   padding: 12px 0px 12px 0px;
-  color: #ffffff;
+  color: ${COLORS.glimpse};
   text-decoration: none;
   font-size: 0.875rem;
 `;
@@ -115,10 +115,10 @@ export const SignOutButton = styled.button`
   justify-content: center;
   align-items: center;
   border-radius: 20px;
-  border: 1px solid ${COLORS.error};
-  background-color: #f7f6f3;
+  border: 1px solid ${COLORS.errorRed};
+  background-color: ${COLORS.glimpse};
   padding: 12px 0px;
-  color: ${COLORS.error};
+  color: ${COLORS.errorRed};
   text-decoration: none;
   cursor: pointer;
   font-size: 0.875rem;

diff --git a/components/NavColumnItem/index.tsx b/components/NavColumnItem/index.tsx
@@ -9,27 +9,27 @@ import {
 } from './styles';
 
 interface NavColumnItemProps {
-  name: string;
+  routeName: string;
   path: string;
   icon: IconType;
   isSelected: boolean;
   onClose: () => void;
 }
 
 export default function NavColumnItem({
-  name,
+  routeName,
   path,
   icon,
   isSelected,
   onClose,
 }: NavColumnItemProps) {
   return (
-    <NavColumnItemOuterContainer isSelected={isSelected}>
+    <NavColumnItemOuterContainer $isSelected={isSelected}>
       {isSelected && <SelectedIndicator />}
       <NavColumnItemContainer>
         <StyledIcon type={icon} />
         <StyledLink href={path} onClick={onClose}>
-          {name}
+          {routeName}
         </StyledLink>
       </NavColumnItemContainer>
     </NavColumnItemOuterContainer>

diff --git a/components/NavColumnItem/styles.ts b/components/NavColumnItem/styles.ts
@@ -3,17 +3,16 @@ import styled from 'styled-components';
 import COLORS from '@/styles/colors';
 import Icon from '../Icon';
 
-export const NavColumnItemOuterContainer = styled.div<{ isSelected: boolean }>`
+export const NavColumnItemOuterContainer = styled.div<{ $isSelected: boolean }>`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: ${props =>
-    props.isSelected ? '12px 12px 12px 0px' : '12px 12px 12px 0px'};
-  background-color: ${props =>
-    props.isSelected
-      ? 'rgba(148, 181, 6, 0.1)'
-      : '#f7f6f3'}; // this is COLORS.shrub with 10% opacity
-  border-radius: ${props => (props.isSelected ? '0px 50px 50px 0px' : 'none')};
+  padding: ${({ $isSelected }) =>
+    $isSelected ? '12px 12px 12px 0px' : '12px 12px 12px 0px'};
+  background-color: ${({ $isSelected }) =>
+    $isSelected ? COLORS.sproutLight : COLORS.glimpse};
+  border-radius: ${({ $isSelected }) =>
+    $isSelected ? '0px 50px 50px 0px' : 'none'};
   position: relative;
   z-index: 1;
   margin-right: 8px;

diff --git a/utils/helpers.ts b/utils/helpers.ts
@@ -4,6 +4,7 @@ import {
   PlantingTypeEnum,
   SeasonEnum,
   SunlightEnum,
+  UserTypeEnum,
 } from '@/types/schema';
 
 /* Helper function to process late/early month fields
@@ -294,3 +295,13 @@ export function fillCalendarGridArrayRowWithColor(
 
   return gridArray;
 }
+// return UserTypeEnum based on user type passed in
+export function getUserType(userType: UserTypeEnum) {
+  const userTypes: Record<UserTypeEnum, string> = {
+    INDIV: 'Individual Garden',
+    SCHOOL: 'School Garden',
+    ORG: 'Community Garden',
+  };
+
+  return userTypes[userType];
+}