adjust seasonal planting guide styles

calblueprint · Dec 7, 2024 · c1ad295 · c1ad295
1 parent f33a7c1
commit c1ad295
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx
@@ -7,7 +7,7 @@ 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 { Box, Flex } from '@/styles/containers';
 import { H1, H3 } from '@/styles/text';
 import { DropdownOption, PlantingTypeEnum, SeasonEnum } from '@/types/schema';
 import { useProfile } from '@/utils/ProfileProvider';
@@ -138,7 +138,9 @@ export default function SeasonalPlantingGuide() {
         </StateOptionsContainer>
       ) : (
         <Box $p="20px">
-          <SeasonColorKey />
+          <Flex $direction="row" $justify="center">
+            <SeasonColorKey />
+          </Flex>
           <PlantCalendarList
             growingSeasonFilterValue={selectedGrowingSeason}
             harvestSeasonFilterValue={selectedHarvestSeason}

diff --git a/app/seasonal-planting-guide/styles.ts b/app/seasonal-planting-guide/styles.ts
@@ -21,7 +21,7 @@ export const HeaderContainer = styled.div`
 export const FilterContainer = styled.div`
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
+  gap: 8px;
   margin-top: 12px;
   position: relative;
   overflow-x: auto;
@@ -34,7 +34,7 @@ export const StateOptionsContainer = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 1rem;
+  gap: 16px;
   flex-grow: 1;
   background-color: ${COLORS.glimpse};
 `;

diff --git a/components/SeasonColorKey/styles.ts b/components/SeasonColorKey/styles.ts
@@ -4,17 +4,16 @@ export const SeasonColorKeyContainer = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr;
-  column-gap: 2rem;
-  row-gap: 0.75rem;
-  width: 244px;
-  justify-self: center;
+  column-gap: 32px;
+  row-gap: 12px;
+  width: max-content;
   margin-bottom: 12px;
 `;
 
 export const ColorKeyItemContainer = styled.div`
   display: flex;
   flex-direction: row;
-  gap: 0.625rem;
+  gap: 10px;
   align-items: center;
   min-width: 108px;
 `;