style

calblueprint · Nov 20, 2024 · 1a8b2f2 · 1a8b2f2
1 parent 2e31503
commit 1a8b2f2
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 37 deletions.
diff --git a/app/test-plant-page/page.tsx b/app/test-plant-page/page.tsx
@@ -3,8 +3,17 @@ import DifficultyLevelBar from '@/components/DifficultyLevelBar';
 import GardeningTips from '@/components/GardeningTips';
 import PlantCareDescription from '@/components/PlantCareDescription';
 import YourPlantDetails from '@/components/YourPlantDetails';
+import { PlantingTypeEnum } from '@/types/schema';
 
 export default function Home() {
+  const userPlant = {
+    id: '10327f7b-ce30-4168-8827-557fb6f5719c',
+    user_id: '0802d796-ace8-480d-851b-d16293c74a21',
+    plant_id: '010ae695-6cc8-4af4-919a-d15b92fdd68d',
+    date_added: '2024-10-26 00:42:16+00',
+    planting_type: 'TRANSPLANT',
+    date_removed: '2024-10-26 00:42:28+00',
+  };
   return (
     <div style={{ width: '50%', margin: '0 auto' }}>
       <DifficultyLevelBar difficultyLevel="EASY"></DifficultyLevelBar>
@@ -18,13 +27,15 @@ export default function Home() {
       ></PlantCareDescription>
       <GardeningTips
         plantName="Tomato"
-        plantTips="1. Use a trellis for vertical growth. 2. Stake or cage to support growth. 3. Water deeply but infrequently."
+        plantTips="1. Loves full sun. 
+        2. Pinch off flower buds for more leaves. 
+        3. Keep well-watered but not soggy."
       ></GardeningTips>
       <SmallRoundedButton secondaryColor="green"></SmallRoundedButton>
       <YourPlantDetails
-        datePlanted="01/01/2024"
-        plantingType="INDOORS"
-        recentHarvestDate="01/05/2024"
+        datePlanted={userPlant.date_added}
+        plantingType={userPlant.planting_type as PlantingTypeEnum}
+        recentHarvestDate={userPlant.date_removed}
       ></YourPlantDetails>
     </div>
   );

diff --git a/components/GardeningTips/index.tsx b/components/GardeningTips/index.tsx
@@ -1,7 +1,9 @@
 'use client';
 
+import COLORS from '@/styles/colors';
+import { H3 } from '@/styles/text';
 import Icon from '../Icon';
-import { Container, IconWrapper, TipsList, Title } from './style';
+import { Container, IconWrapper, TipsList, TitleWrapper } from './style';
 
 export default function GardeningTips({
   plantName,
@@ -14,12 +16,12 @@ export default function GardeningTips({
 
   return (
     <Container>
-      <Title>
+      <TitleWrapper>
         <IconWrapper>
           <Icon type="lightbulb" />
         </IconWrapper>
-        Gardening Tips for {plantName}
-      </Title>
+        <H3 $color={COLORS.shrub}>Gardening Tips for {plantName}</H3>
+      </TitleWrapper>
       <TipsList>
         {tipsArray.map((tip, index) => (
           <li key={index}>{tip.trim()}</li>

diff --git a/components/GardeningTips/style.ts b/components/GardeningTips/style.ts
@@ -12,16 +12,14 @@ export const Container = styled.div`
   color: #333;
 `;
 
-export const Title = styled.h3`
+export const TitleWrapper = styled.div`
   display: flex;
   align-items: center;
-  font-size: 1.25rem;
-  margin-bottom: 1rem;
-  color: #2e7d32;
+  margin-bottom: 6px;
 `;
 
 export const IconWrapper = styled.span`
-  margin-right: 0.5rem;
+  margin-right: 6px;
   color: #8bc34a;
 `;
 

diff --git a/components/YourPlantDetails/index.tsx b/components/YourPlantDetails/index.tsx
@@ -1,6 +1,9 @@
 'use client';
 
+import COLORS from '@/styles/colors';
+import { H3 } from '@/styles/text';
 import { PlantingTypeEnum } from '@/types/schema';
+import { formatTimestampToDate, useTitleCase } from '@/utils/helpers';
 import Icon from '../Icon';
 import {
   Container,
@@ -10,7 +13,6 @@ import {
   EditButton,
   Header,
   StyledIcon,
-  Title,
 } from './style';
 
 export default function YourPlantDetails({
@@ -20,40 +22,40 @@ export default function YourPlantDetails({
 }: {
   datePlanted: string;
   plantingType: PlantingTypeEnum;
-  recentHarvestDate: string;
+  recentHarvestDate: string | null;
 }) {
   return (
     <Container>
       <Header>
-        <Title>Your Plant Details</Title>
-        <EditButton secondaryColor="#1b5e20">Edit</EditButton>
+        <H3 $color={COLORS.shrub}>Your Plant Details</H3>
+        <EditButton secondaryColor={COLORS.shrub}>Edit</EditButton>
       </Header>
 
       <DetailsContainer>
         <DetailRow>
           <StyledIcon>
-            <Icon type="watering_can" />
+            <Icon type="calendar" />
           </StyledIcon>
-          <DetailText>Date Planted: {datePlanted}</DetailText>
+          <DetailText>
+            Date Planted: {formatTimestampToDate(datePlanted)}
+          </DetailText>
         </DetailRow>
 
         <DetailRow>
           <StyledIcon>
-            <Icon type="watering_can" />
+            <Icon type="plant_hand" />
           </StyledIcon>
-          <DetailText>
-            Planting Type:{' '}
-            {plantingType.charAt(0) + plantingType.slice(1).toLowerCase()}
-          </DetailText>
+          <DetailText>Planting Type: {useTitleCase(plantingType)}</DetailText>
         </DetailRow>
 
         {recentHarvestDate && (
           <DetailRow>
             <StyledIcon>
-              <Icon type="watering_can" />
+              <Icon type="plant" />
             </StyledIcon>
             <DetailText>
-              Most Recent Harvest Date: {recentHarvestDate}
+              Most Recent Harvest Date:{' '}
+              {formatTimestampToDate(recentHarvestDate)}
             </DetailText>
           </DetailRow>
         )}

diff --git a/components/YourPlantDetails/style.ts b/components/YourPlantDetails/style.ts
@@ -1,23 +1,18 @@
 import styled from 'styled-components';
+import COLORS from '@/styles/colors';
 import { SmallRoundedButton } from '../Button';
 
 export const Container = styled.div`
   padding: 1rem;
-  background-color: #f9fafb;
+  background-color: ${COLORS.backgroundGrey};
   border-radius: 0.5rem;
 `;
 
 export const Header = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
-`;
-
-export const Title = styled.h2`
-  color: #1b5e20;
-  font-size: 1.25rem;
-  font-weight: 600;
+  margin-bottom: 18px;
 `;
 
 export const EditButton = styled(SmallRoundedButton)`
@@ -27,13 +22,13 @@ export const EditButton = styled(SmallRoundedButton)`
 export const DetailsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 6px;
 `;
 
 export const DetailRow = styled.div`
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 6px;
 `;
 
 export const DetailText = styled.span`

diff --git a/lib/icons.tsx b/lib/icons.tsx
@@ -189,7 +189,6 @@ export const IconSvgs = {
       </defs>
     </svg>
   ),
-
 };
 
 export type IconType = keyof typeof IconSvgs;
diff --git a/styles/colors.ts b/styles/colors.ts
@@ -12,5 +12,6 @@ const COLORS = {
   darkgray: '#555555',
   midgray: '#888888',
   lightgray: '#DDDDDD',
+  backgroundGrey: '#f9fafb',
 };
 export default COLORS;
diff --git a/utils/helpers.ts b/utils/helpers.ts
@@ -212,3 +212,18 @@ export function checkDifficulty(
   // Return false if no matches found
   return false;
 }
+export function useTitleCase(text: string) {
+  return text.charAt(0) + text.slice(1).toLowerCase();
+}
+export function formatTimestampToDate(timestamp: string | number): string {
+  // Convert the input to a Date object
+  const date = new Date(timestamp);
+
+  // Extract the month, day, and year
+  const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-based
+  const day = date.getDate().toString().padStart(2, '0');
+  const year = date.getFullYear();
+
+  // Return in MM/DD/YYYY format
+  return `${month}/${day}/${year}`;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -189,7 +189,6 @@ export const IconSvgs = { @@
           </defs>
         </svg>
       ),
     };
     export type IconType = keyof typeof IconSvgs;