From fb2fa1184ab87cfb19636fcccc3ab68932e08775 Mon Sep 17 00:00:00 2001
From: Catherine Tan <catherine95118@gmail.com>
Date: Mon, 23 Dec 2024 13:48:11 -0800
Subject: [PATCH] use seasonColorKey in planting timeline

---
 app/seasonal-planting-guide/page.tsx  |  2 ++
 components/PlantCalendarRow/index.tsx |  5 +----
 components/SeasonColorKey/index.tsx   | 15 +++++++++------
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx
index e59149d..abefd1b 100644
--- a/app/seasonal-planting-guide/page.tsx
+++ b/app/seasonal-planting-guide/page.tsx
@@ -5,6 +5,7 @@ import FilterDropdownMultiple from '@/components/FilterDropdownMultiple';
 import FilterDropdownSingle from '@/components/FilterDropdownSingle';
 import { PlantCalendarList } from '@/components/PlantCalendarList';
 import SearchBar from '@/components/SearchBar';
+import SeasonColorKey from '@/components/SeasonColorKey';
 import COLORS from '@/styles/colors';
 import { Box } from '@/styles/containers';
 import { H1, H3 } from '@/styles/text';
@@ -113,6 +114,7 @@ export default function SeasonalPlantingGuide() {
         </StateOptionsContainer>
       ) : (
         <Box $pl="16px" $pt="12px">
+          <SeasonColorKey />
           <PlantCalendarList
             growingSeasonFilterValue={selectedGrowingSeason}
             harvestSeasonFilterValue={selectedHarvestSeason}
diff --git a/components/PlantCalendarRow/index.tsx b/components/PlantCalendarRow/index.tsx
index b005324..07d7555 100644
--- a/components/PlantCalendarRow/index.tsx
+++ b/components/PlantCalendarRow/index.tsx
@@ -1,6 +1,5 @@
 import React, { memo, useMemo } from 'react';
 import COLORS from '@/styles/colors';
-import { Flex } from '@/styles/containers';
 import { fillCalendarGridArrayRowWithColor } from '@/utils/helpers';
 import MonthHeader from '../MonthHeader';
 import SeasonColorKey from '../SeasonColorKey';
@@ -81,9 +80,7 @@ const PlantCalendarRow = memo(function PlantCalendarRow({
     <>
       {singleDisplay && (
         <>
-          <Flex $justify="center">
-            <SeasonColorKey />
-          </Flex>
+          <SeasonColorKey />
           <MonthHeader />
         </>
       )}
diff --git a/components/SeasonColorKey/index.tsx b/components/SeasonColorKey/index.tsx
index 1e66cca..80accfe 100644
--- a/components/SeasonColorKey/index.tsx
+++ b/components/SeasonColorKey/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import COLORS from '@/styles/colors';
+import { Flex } from '@/styles/containers';
 import { P3 } from '@/styles/text';
 import {
   ColorCell,
@@ -18,11 +19,13 @@ function ColorKeyItem({ label, color }: { label: string; color: string }) {
 
 export default function SeasonColorKey() {
   return (
-    <SeasonColorKeyContainer>
-      <ColorKeyItem label="Indoor Season" color={COLORS.indoors} />
-      <ColorKeyItem label="Transplant" color={COLORS.transplant} />
-      <ColorKeyItem label="Outdoor Season" color={COLORS.outdoors} />
-      <ColorKeyItem label="Harvest Season" color={COLORS.harvest} />
-    </SeasonColorKeyContainer>
+    <Flex $justify="center">
+      <SeasonColorKeyContainer>
+        <ColorKeyItem label="Indoor Season" color={COLORS.indoors} />
+        <ColorKeyItem label="Transplant" color={COLORS.transplant} />
+        <ColorKeyItem label="Outdoor Season" color={COLORS.outdoors} />
+        <ColorKeyItem label="Harvest Season" color={COLORS.harvest} />
+      </SeasonColorKeyContainer>
+    </Flex>
   );
 }