style Clear Filters button

calblueprint · Dec 23, 2024 · 4804804 · 4804804
1 parent 4c831ad
commit 4804804
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/app/view-plants/page.tsx b/app/view-plants/page.tsx
@@ -402,7 +402,9 @@ export default function Page() {
             placeholder="Growing Season"
           />
 
-          <button onClick={clearFilters}>Clear Filters</button>
+          <SelectButton $secondaryColor={COLORS.shrub} onClick={clearFilters}>
+            Clear Filters
+          </SelectButton>
         </FilterContainer>
       </TopRowContainer>
       <Box $h="24px">

diff --git a/app/view-plants/styles.ts b/app/view-plants/styles.ts
@@ -7,6 +7,7 @@ export const FilterContainer = styled.div`
   flex-direction: row;
   gap: 8px;
   margin-bottom: 20px;
+  align-items: center;
 `;
 
 export const TopRowContainer = styled.div`
@@ -67,12 +68,10 @@ export const PlantGridContainer = styled.div`
 
 export const SelectButton = styled(SmallRoundedButton)`
   font-size: 0.75rem;
-  font-style: normal;
   font-weight: 400;
-  line-height: normal;
-  width: 60px;
+  min-width: 60px;
   height: 25px;
-  padding: 0;
+  padding: 0 4px;
 `;
 
 export const ViewSelection = styled.div`

diff --git a/components/Button.tsx b/components/Button.tsx
@@ -21,6 +21,7 @@ interface SmallRoundedButtonProps {
 }
 
 export const SmallRoundedButton = styled.button<SmallRoundedButtonProps>`
+  font-family: inherit;
   padding: 10px 20px;
   border-radius: 15px;
   box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.05);