clean up PlantCardKey styling

calblueprint · Dec 30, 2024 · f41df1b · f41df1b
1 parent 954d7de
commit f41df1b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 31 deletions.
diff --git a/components/PlantCardKey/index.tsx b/components/PlantCardKey/index.tsx
@@ -22,9 +22,7 @@ const DifficultyBarAndLabel = ({
 }) => {
   return (
     <Flex $direction="column" $align="center" $gap="4px">
-      <DifficultyLevelBar
-        difficultyLevel={difficultyLevel as DifficultyLevelEnum}
-      />
+      <DifficultyLevelBar difficultyLevel={difficultyLevel} />
       <P3>{toTitleCase(difficultyLevel)}</P3>
     </Flex>
   );
@@ -53,14 +51,7 @@ export default function PlantCardKey() {
           Plant Card Key
         </P3>
       </Title>
-      <Flex
-        $direction="column"
-        $pt="16px"
-        $pb="12px"
-        $px="16px"
-        $align="start"
-        $gap="8px"
-      >
+      <Flex $direction="column" $p="16px" $align="start" $gap="8px">
         <P3 $color={COLORS.shrub} $fontWeight={400}>
           Planting Difficulty Level
         </P3>
@@ -69,22 +60,20 @@ export default function PlantCardKey() {
           <DifficultyBarAndLabel difficultyLevel="MODERATE" />
           <DifficultyBarAndLabel difficultyLevel="HARD" />
         </DifficultyLevelsContainer>
-      </Flex>
-      <Flex $px="16px">
         <HorizontalLine />
+        <IconKeyContainer>
+          <P3 $color={COLORS.shrub} $fontWeight={400}>
+            Icon Key
+          </P3>
+          <IconAndLabel
+            iconName="outdoorsSeason"
+            label="Outdoors Growing Season"
+          />
+          <IconAndLabel iconName="harvestSeason" label="Harvest Time" />
+          <IconAndLabel iconName="wateringCan" label="Water Frequency" />
+          <IconAndLabel iconName="sun" label="Sunlight Requirement" />
+        </IconKeyContainer>
       </Flex>
-      <IconKeyContainer>
-        <P3 $color={COLORS.shrub} $fontWeight={400}>
-          Icon Key
-        </P3>
-        <IconAndLabel
-          iconName="outdoorsSeason"
-          label="Outdoors Growing Season"
-        />
-        <IconAndLabel iconName="harvestSeason" label="Harvest Time" />
-        <IconAndLabel iconName="wateringCan" label="Water Frequency" />
-        <IconAndLabel iconName="sun" label="Sunlight Requirement" />
-      </IconKeyContainer>
     </PlantCardKeyContainer>
   );
 }
diff --git a/components/PlantCardKey/styles.ts b/components/PlantCardKey/styles.ts
@@ -4,7 +4,7 @@ import COLORS from '@/styles/colors';
 export const PlantCardKeyContainer = styled.div`
   display: flex;
   flex-direction: column;
-  border-radius: 10px;
+  border-radius: 12px;
   box-shadow: 2px 0px 8px 0px rgba(0, 0, 0, 0.1);
   background-color: white;
   border: none;
@@ -16,6 +16,7 @@ export const PlantCardKeyContainer = styled.div`
   z-index: 1000;
   min-width: 168px;
   min-height: 200px;
+  width: max-content;
 
   // creates triangle pointer above plant card key
   &::before {
@@ -37,28 +38,28 @@ export const Title = styled.div`
   justify-content: center;
   align-items: center;
   background-color: ${COLORS.shrub};
-  border-radius: 10px 10px 0px 0px;
+  border-radius: 12px 12px 0px 0px;
   color: white;
-  padding: 8px 0px 8px 0px;
+  padding: 8px 0px;
   border: none;
 `;
 
 export const DifficultyLevelsContainer = styled.div`
   display: flex;
   flex-direction: row;
-  padding: 8px;
   gap: 20px;
+  justify-content: space-between;
 `;
 
 export const HorizontalLine = styled.div`
+  margin-top: 4px;
   width: 100%;
   height: 1px;
-  background-color: #e4e4e4;
+  background-color: ${COLORS.lightgray};
 `;
 
 export const IconKeyContainer = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 8px 12px 12px 16px;
   gap: 4px;
 `;