style

calblueprint · Nov 20, 2024 · d113331 · d113331
1 parent d3e532b
commit d113331
Show file tree

Hide file tree

Showing 9 changed files with 179 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
@@ -80,6 +80,87 @@ export const IconSvgs = {
       </defs>
     </svg>
   ),
+  calendar: (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="15" height="15" fill="url(#pattern0_747_8916)" />
+      <defs>
+        <pattern
+          id="pattern0_747_8916"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
+          <use href="#image0_747_8916" transform="scale(0.0111111)" />
+        </pattern>
+        <image
+          id="image0_747_8916"
+          width="90"
+          height="90"
+          href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsTAAALEwEAmpwYAAACLUlEQVR4nO2cPW4bQQxGp4p9hET2ko0DZwj4HrmAAC0N2BeI4s7OCRO7cnKUQGpUKRhXge1mi+XP7PcANgKxwjxRFPQVUwoAAAAAAAAAAAAAKHzLp8NY70jrE491zyrHLmuse1J5JK3fL75enJh+9GfXV+ek9Y+7BLUtGuvvdnazSV6iZP5Ptslkt3XhfVj2lr2R7eyiX3ZygMOy61TLr9lFs9ad90HZverOQPT7b146hb3OC9EC0XOAiTYCoo2AaCMg2giINgKijYBoIyDaCIhequilVYFogWgOMImYaPWXh9Wh/mKxoxWi3aeOMdHiLgqrQ/0ldrWjSeuBtN4Pm8tVK1J5aK9l6U8kWh5eP7u9lqW/pBF9/eXTm2ev5WOW/pJF9LC5XL1+9vnN57Ms/SXz6uBRfmTpL3lE10M73LQfqzj9aURz8oJoheij9xRiotVfHFaH+kvFjtYFio6WRVCvWUe0LIJ6zTqiZRHUa9YRLYsYes06omUR1GvWES2LIGQd0kW5TfTSqkC0QDQHmERMtPrLw+pQf7FhdnS0LIIm9icSHSuLoIn9eUQHyyJoYn8a0dGyiGFifxrR0bIImtifSHSsLIIm9qcRvbQqEC0QzQEmMdFE4zo2GuXv7KJxwaDYXDDYbp31/tqyc9Eo32YX3S5AbRehLldyfZa1fChm1xovUDaN9bn9uyyWvEz2RrZtX/X9A1l3pPKzrQuzSQYAAAAAAAAAAAAosfkH9ZaTr8ZUdLYAAAAASUVORK5CYII="
+        />
+      </defs>
+    </svg>
+  ),
+  plant_hand: (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="15" height="15" fill="url(#pattern0_747_8919)" />
+      <defs>
+        <pattern
+          id="pattern0_747_8919"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
+          <use href="#image0_747_8919" transform="scale(0.0111111)" />
+        </pattern>
+        <image
+          id="image0_747_8919"
+          width="90"
+          height="90"
+          href="data:image/png;base64,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"
+        />
+      </defs>
+    </svg>
+  ),
+  plant: (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="15" height="15" fill="url(#pattern0_747_8922)" />
+      <defs>
+        <pattern
+          id="pattern0_747_8922"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
+          <use href="#image0_747_8922" transform="scale(0.0111111)" />
+        </pattern>
+        <image
+          id="image0_747_8922"
+          width="90"
+          height="90"
+          href="data:image/png;base64,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"
+        />
+      </defs>
+    </svg>
+  ),
 };
 
 export type IconType = keyof typeof IconSvgs;
diff --git a/styles/colors.ts b/styles/colors.ts
@@ -8,7 +8,10 @@ const COLORS = {
   sproutLight: '#F4F8E6',
 
   //grey
+  black: '#222222',
+  darkgray: '#555555',
   midgray: '#888888',
-  lightgray: '#DDDDDDDD',
+  lightgray: '#DDDDDD',
+  backgroundGrey: '#f9fafb',
 };
 export default COLORS;
diff --git a/styles/text.ts b/styles/text.ts
@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components';
+import COLORS from './colors';
+
+// 1 rem = 16 px
+interface TextProps {
+  $color?: string;
+  $align?: 'left' | 'right' | 'center' | 'end' | 'justify' | 'start';
+}
+
+const TextStyles = css<TextProps>`
+  color: ${({ $color }) => $color || COLORS.black};
+  text-align: ${({ $align }) => $align};
+  margin: 0;
+`;
+
+export const H1 = styled.h1<TextProps>`
+  ${TextStyles}
+  font-size: 2rem; // this may change later
+`;
+
+export const H2 = styled.h2<TextProps>`
+  ${TextStyles}
+  font-size: 1.75rem;
+`;
+
+export const H3 = styled.h3<TextProps>`
+  ${TextStyles}
+  font-size: 1.25rem;
+`;
+
+export const H4 = styled.h4<TextProps>`
+  ${TextStyles}
+  font-size: 1rem;
+`;
diff --git a/utils/helpers.ts b/utils/helpers.ts
@@ -151,3 +151,19 @@ export function checkSearchTerm(searchTerm: string, plant: Plant) {
   // Check if plant_name contains searchTerm
   return plant.plant_name.toLowerCase().includes(searchTerm.toLowerCase());
 }
+
+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}`;
+}