use seasonColorKey in planting timeline

calblueprint · Dec 23, 2024 · fb2fa11 · fb2fa11
1 parent 660fdbb
commit fb2fa11
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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>
   );
 }