use SmallButton in view plants

calblueprint · Dec 23, 2024 · 7b63176 · 7b63176
1 parent 9c3a04e
commit 7b63176
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 36 deletions.
diff --git a/app/view-plants/page.tsx b/app/view-plants/page.tsx
@@ -7,7 +7,7 @@ import {
   getMatchingPlantForUserPlant,
 } from '@/api/supabase/queries/plants';
 import { getCurrentUserPlantsByUserId } from '@/api/supabase/queries/userPlants';
-import { SmallButton } from '@/components/Buttons';
+import { Button, SmallButton } from '@/components/Buttons';
 import FilterDropdownMultiple from '@/components/FilterDropdownMultiple';
 import Icon from '@/components/Icon';
 import PlantCard from '@/components/PlantCard';
@@ -38,7 +38,6 @@ import {
   NumberSelectedPlants,
   NumberSelectedPlantsContainer,
   PlantGridContainer,
-  SomethingWrongButton,
   TopRowContainer,
   ViewSelection,
 } from './styles';
@@ -366,9 +365,13 @@ export default function Page() {
       >
         <Icon type="sprout"></Icon>
         <P1 $color={COLORS.midgray}>{message}</P1>
-        <SomethingWrongButton $width="170px" onClick={handleClick}>
+        <Button
+          $primaryColor={COLORS.shrub}
+          $width="170px"
+          onClick={handleClick}
+        >
           {buttonText}
-        </SomethingWrongButton>
+        </Button>
       </Flex>
     );
   }

diff --git a/app/view-plants/styles.ts b/app/view-plants/styles.ts
@@ -65,14 +65,6 @@ export const PlantGridContainer = styled.div`
   justify-content: center;
 `;
 
-// export const SelectButton = styled(SmallRoundedButton)`
-//   font-size: 0.75rem;
-//   font-weight: 400;
-//   min-width: 60px;
-//   height: 25px;
-//   padding: 0 4px;
-// `;
-
 export const ViewSelection = styled.div`
   display: flex;
   flex-direction: row;
@@ -94,13 +86,3 @@ export const NumberSelectedPlants = styled.p`
   line-height: 16px;
   color: #fff;
 `;
-
-export const SomethingWrongButton = styled.button<{ $width: string }>`
-  width: ${({ $width }) => $width};
-  height: 45px;
-  border-radius: 50px;
-  background-color: ${COLORS.shrub};
-  color: white;
-  border: none;
-  font-family: inherit;
-`;
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -1,19 +1,19 @@
 'use client';
 
-import React from 'react';
+// import React from 'react';
 import styled from 'styled-components';
 
-export const Button = React.forwardRef<
-  HTMLButtonElement,
-  React.ButtonHTMLAttributes<HTMLButtonElement>
->(({ children, ...props }, ref) => {
-  return (
-    <button ref={ref} {...props}>
-      {children}
-    </button>
-  );
-});
-Button.displayName = 'Button';
+// export const Button = React.forwardRef<
+//   HTMLButtonElement,
+//   React.ButtonHTMLAttributes<HTMLButtonElement>
+// >(({ children, ...props }, ref) => {
+//   return (
+//     <button ref={ref} {...props}>
+//       {children}
+//     </button>
+//   );
+// });
+// Button.displayName = 'Button';
 
 interface SmallRoundedButtonProps {
   $primaryColor?: string;

diff --git a/components/Buttons.tsx b/components/Buttons.tsx
@@ -6,6 +6,7 @@ import { P2, P3 } from '@/styles/text';
 interface ButtonProps {
   $primaryColor?: string;
   $secondaryColor?: string;
+  $width?: string;
 }
 
 /* shared ButtonStyles for all buttons
@@ -64,7 +65,7 @@ export const StyledLinkButton = styled(Link)`
 export const Button = styled(P2).attrs({ as: 'button' })<ButtonProps>`
   ${ButtonStyles}
 
-  width: 156px; // customizable
+  width: ${({ $width }) => $width || '156px'};
   height: 44px;
   border-radius: 44px;
 `;
@@ -75,7 +76,6 @@ export const BigButton = styled(Button)<ButtonProps>`
 
 export const SmallButton = styled(P3).attrs({ as: 'button' })<ButtonProps>`
   ${ButtonStyles}
-
   // Unique to Small Button 
   border-radius: 20px;
   min-width: 60px;