diff --git a/components/PlantCardKey/index.tsx b/components/PlantCardKey/index.tsx index c5185f1..0a955f2 100644 --- a/components/PlantCardKey/index.tsx +++ b/components/PlantCardKey/index.tsx @@ -22,9 +22,7 @@ const DifficultyBarAndLabel = ({ }) => { return ( - + {toTitleCase(difficultyLevel)} ); @@ -53,14 +51,7 @@ export default function PlantCardKey() { Plant Card Key - + Planting Difficulty Level @@ -69,22 +60,20 @@ export default function PlantCardKey() { - - + + + Icon Key + + + + + + - - - Icon Key - - - - - - ); } diff --git a/components/PlantCardKey/styles.ts b/components/PlantCardKey/styles.ts index f50b01a..be4d428 100644 --- 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; `;