use button styles in PlantPages

Author: ccatherinetan

app/plant-page/all-plants/[plantId]/page.tsx

@@ -4,10 +4,12 @@ import { useEffect, useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { UUID } from 'crypto';
 import { getPlantById } from '@/api/supabase/queries/plants';
+import { SmallButton } from '@/components/Buttons';
 import DifficultyLevelBar from '@/components/DifficultyLevelBar';
 import GardeningTips from '@/components/GardeningTips';
 import PlantCalendarRow from '@/components/PlantCalendarRow';
 import PlantCareDescription from '@/components/PlantCareDescription';
+import COLORS from '@/styles/colors';
 import { Flex } from '@/styles/containers';
 import { H4 } from '@/styles/text';
 import { Plant } from '@/types/schema';
@@ -22,7 +24,6 @@ import {
   PlantImage,
   PlantName,
 } from '../../style';
-import { AddPlant } from './style';
 
 export default function GeneralPlantPage() {
   const router = useRouter();
@@ -71,7 +72,9 @@ export default function GeneralPlantPage() {
           </NameWrapper>
           {/*Add button only appears if user is logged in and onboarded*/}
           {profileReady && profileData && (
-            <AddPlant onClick={handleAdd}>Add +</AddPlant>
+            <SmallButton $primaryColor={COLORS.shrub} onClick={handleAdd}>
+              Add +
+            </SmallButton>
           )}
         </Flex>
         <ComponentWrapper>

app/plant-page/all-plants/[plantId]/style.ts

@@ -8,13 +8,15 @@ import {
   getUserPlantById,
   upsertUserPlant,
 } from '@/api/supabase/queries/userPlants';
+import { SmallButton } from '@/components/Buttons';
 import DifficultyLevelBar from '@/components/DifficultyLevelBar';
 import GardeningTips from '@/components/GardeningTips';
 import PlantCalendarRow from '@/components/PlantCalendarRow';
 import PlantCareDescription from '@/components/PlantCareDescription';
 import YourPlantDetails from '@/components/YourPlantDetails';
+import COLORS from '@/styles/colors';
 import { Flex } from '@/styles/containers';
-import { H4 } from '@/styles/text';
+import { H4, P3 } from '@/styles/text';
 import { Plant, UserPlant } from '@/types/schema';
 import { getCurrentTimestamp } from '@/utils/helpers';
 import {
@@ -27,7 +29,6 @@ import {
   PlantImage,
   PlantName,
 } from '../../style';
-import { RemoveButton, Subtitle } from './style';
 
 export default function UserPlantPage() {
   const router = useRouter();
@@ -69,7 +70,9 @@ export default function UserPlantPage() {
           >
             ←
           </BackButton>
-          <RemoveButton onClick={removePlant}>X Remove</RemoveButton>
+          <SmallButton $primaryColor={COLORS.errorRed} onClick={removePlant}>
+            X Remove
+          </SmallButton>
         </ButtonWrapper>
         <PlantImage src={currentPlant.img} alt={currentPlant.plant_name} />
       </ImgHeader>
@@ -82,7 +85,13 @@ export default function UserPlantPage() {
               difficultyLevel={currentPlant.difficulty_level}
             />
           </NameWrapper>
-          <Subtitle>You have this plant in your garden!</Subtitle>
+          <P3
+            $fontWeight={400}
+            $color={COLORS.shrub}
+            style={{ fontStyle: 'italic' }}
+          >
+            You have this plant in your garden!
+          </P3>
         </Flex>
         <ComponentWrapper>
           <YourPlantDetails

app/plant-page/my-garden/[userPlantId]/page.tsx

@@ -80,5 +80,5 @@ export const SmallButton = styled(P3).attrs({ as: 'button' })<ButtonProps>`
   border-radius: 20px;
   min-width: 60px;
   height: 24px;
-  padding: 4px 4px;
+  padding: 4px 10px;
 `;