all styled up

calblueprint · Nov 21, 2024 · d5aecbe · d5aecbe
1 parent 1a8b2f2
commit d5aecbe
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 106 deletions.
diff --git a/app/test-plant-page/page.tsx b/app/test-plant-page/page.tsx
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -12,29 +12,29 @@ export const Button = React.forwardRef<
 Button.displayName = 'Button';
 
 interface SmallRoundedButtonProps {
-  primaryColor?: string;
-  secondaryColor: string;
+  $primaryColor?: string;
+  $secondaryColor: string;
 }
 
 export const SmallRoundedButton = styled.button<SmallRoundedButtonProps>`
   padding: 10px 20px;
   border-radius: 50px;
-  border: 2px solid ${({ secondaryColor }) => secondaryColor};
-  background-color: ${({ primaryColor }) =>
-    primaryColor ? primaryColor : 'white'};
-  color: ${({ primaryColor, secondaryColor }) =>
-    primaryColor ? 'white' : secondaryColor};
+  border: 2px solid ${({ $secondaryColor }) => $secondaryColor};
+  background-color: ${({ $primaryColor }) =>
+    $primaryColor ? $primaryColor : 'white'};
+  color: ${({ $primaryColor, $secondaryColor }) =>
+    $primaryColor ? 'white' : $secondaryColor};
   font-size: 16px;
   cursor: pointer;
   transition:
     background-color 0.3s ease,
     border-color 0.3s ease;
 
   &:hover {
-    background-color: ${({ primaryColor, secondaryColor }) =>
-      primaryColor ? primaryColor : secondaryColor};
-    color: ${({ primaryColor, secondaryColor }) =>
-      primaryColor ? secondaryColor : 'white'};
-    border-color: ${({ secondaryColor }) => secondaryColor};
+    background-color: ${({ $primaryColor, $secondaryColor }) =>
+      $primaryColor ? $primaryColor : $secondaryColor};
+    color: ${({ $primaryColor, $secondaryColor }) =>
+      $primaryColor ? $secondaryColor : 'white'};
+    border-color: ${({ $secondaryColor }) => $secondaryColor};
   }
 `;
diff --git a/components/DifficultyLevelBar/index.tsx b/components/DifficultyLevelBar/index.tsx
@@ -1,31 +1,18 @@
 'use client';
 
 import { DifficultyLevelEnum } from '@/types/schema';
-import { Bar, IndicatorContainer } from './style';
+import Icon from '../Icon';
 
 export default function DifficultyLevelBar({
   difficultyLevel,
 }: {
   difficultyLevel: DifficultyLevelEnum;
 }) {
-  const colors = {
-    EASY: ['#8bc34a', '#e0e0e0', '#e0e0e0'],
-    MODERATE: ['#fbc02d', '#fbc02d', '#e0e0e0'],
-    HARD: ['#e53935', '#e53935', '#e53935'],
-  };
-
-  const selectedColors = colors[difficultyLevel];
-
   return (
-    <IndicatorContainer>
-      {selectedColors.map((color, index) => (
-        <Bar
-          key={index}
-          active={color !== '#e0e0e0'}
-          color={color}
-          position={index === 0 ? 'left' : index === 2 ? 'right' : 'middle'}
-        />
-      ))}
-    </IndicatorContainer>
+    <div>
+      {difficultyLevel === 'EASY' && <Icon type="easy_bar"></Icon>}
+      {difficultyLevel === 'MODERATE' && <Icon type="moderate_bar"></Icon>}
+      {difficultyLevel === 'HARD' && <Icon type="hard_bar"></Icon>}
+    </div>
   );
 }
diff --git a/components/DifficultyLevelBar/style.ts b/components/DifficultyLevelBar/style.ts
diff --git a/components/GardeningTips/style.ts b/components/GardeningTips/style.ts
@@ -8,7 +8,6 @@ export const Container = styled.div`
   flex-direction: column;
   align-items: center;
   text-align: center;
-  font-family: Arial, sans-serif;
   color: #333;
 `;
 

diff --git a/components/PlantCareDescription/style.ts b/components/PlantCareDescription/style.ts
@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  font-family: Arial, sans-serif;
   color: #333;
 `;
 
@@ -17,7 +16,7 @@ export const CareItem = styled.div`
 `;
 
 export const IconWrapper = styled.div`
-  margin-right: 0.5rem;
+  margin-right: 6px;
   color: #8bc34a;
 `;
 

diff --git a/components/YourPlantDetails/index.tsx b/components/YourPlantDetails/index.tsx
@@ -3,7 +3,7 @@
 import COLORS from '@/styles/colors';
 import { H3 } from '@/styles/text';
 import { PlantingTypeEnum } from '@/types/schema';
-import { formatTimestampToDate, useTitleCase } from '@/utils/helpers';
+import { formatTimestamp, useTitleCase } from '@/utils/helpers';
 import Icon from '../Icon';
 import {
   Container,
@@ -28,17 +28,15 @@ export default function YourPlantDetails({
     <Container>
       <Header>
         <H3 $color={COLORS.shrub}>Your Plant Details</H3>
-        <EditButton secondaryColor={COLORS.shrub}>Edit</EditButton>
+        <EditButton $secondaryColor={COLORS.shrub}>Edit</EditButton>
       </Header>
 
       <DetailsContainer>
         <DetailRow>
           <StyledIcon>
             <Icon type="calendar" />
           </StyledIcon>
-          <DetailText>
-            Date Planted: {formatTimestampToDate(datePlanted)}
-          </DetailText>
+          <DetailText>Date Planted: {formatTimestamp(datePlanted)}</DetailText>
         </DetailRow>
 
         <DetailRow>
@@ -54,8 +52,7 @@ export default function YourPlantDetails({
               <Icon type="plant" />
             </StyledIcon>
             <DetailText>
-              Most Recent Harvest Date:{' '}
-              {formatTimestampToDate(recentHarvestDate)}
+              Most Recent Harvest Date: {formatTimestamp(recentHarvestDate)}
             </DetailText>
           </DetailRow>
         )}

diff --git a/lib/icons.tsx b/lib/icons.tsx
@@ -189,6 +189,65 @@ export const IconSvgs = {
       </defs>
     </svg>
   ),
+  easy_bar: (
+    <svg
+      width="24"
+      height="6"
+      viewBox="0 0 24 6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 3C0 1.34315 1.34315 0 3 0H7.55556V6H3C1.34315 6 0 4.65685 0 3Z"
+        fill="#A1BE23"
+      />
+      <path d="M8.22223 0H15.7778V6H8.22223V0Z" fill="#DEDEDE" />
+      <path
+        d="M16.4445 0H21C22.6569 0 24 1.34315 24 3C24 4.65685 22.6569 6 21 6H16.4445V0Z"
+        fill="#DDDDDD"
+        fill-opacity="0.866667"
+      />
+    </svg>
+  ),
+  moderate_bar: (
+    <svg
+      width="24"
+      height="6"
+      viewBox="0 0 24 6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 3C0 1.34315 1.34315 0 3 0H7.55556V6H3C1.34315 6 0 4.65685 0 3Z"
+        fill="#EDB73A"
+      />
+      <path d="M8.22222 0H15.7778V6H8.22222V0Z" fill="#EDB73A" />
+      <path
+        d="M16.4444 0H21C22.6569 0 24 1.34315 24 3C24 4.65685 22.6569 6 21 6H16.4444V0Z"
+        fill="#DDDDDD"
+        fill-opacity="0.866667"
+      />
+    </svg>
+  ),
+  hard_bar: (
+    <svg
+      width="24"
+      height="6"
+      viewBox="0 0 24 6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 3C0 1.34315 1.34315 0 3 0H7.55556V6H3C1.34315 6 0 4.65685 0 3Z"
+        fill="#D94E4E"
+      />
+      <path d="M8.22222 0H15.7778V6H8.22222V0Z" fill="#D94E4E" />
+      <path
+        d="M16.4444 0H21C22.6569 0 24 1.34315 24 3C24 4.65685 22.6569 6 21 6H16.4444V0Z"
+        fill="#D94E4E"
+      />
+    </svg>
+  ),
 };
 
 export type IconType = keyof typeof IconSvgs;
diff --git a/utils/helpers.ts b/utils/helpers.ts
@@ -215,7 +215,7 @@ export function checkDifficulty(
 export function useTitleCase(text: string) {
   return text.charAt(0) + text.slice(1).toLowerCase();
 }
-export function formatTimestampToDate(timestamp: string | number): string {
+export function formatTimestamp(timestamp: string): string {
   // Convert the input to a Date object
   const date = new Date(timestamp);