From 6cce6bf460af9f81335e1946b98dfbe7429d1111 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Mon, 23 Dec 2024 16:05:31 -0800 Subject: [PATCH] use button styles in PlantPages --- app/plant-page/all-plants/[plantId]/page.tsx | 7 +- app/plant-page/all-plants/[plantId]/style.ts | 81 ------------------- .../my-garden/[userPlantId]/page.tsx | 17 +++- .../my-garden/[userPlantId]/style.ts | 24 ------ components/Buttons.tsx | 2 +- 5 files changed, 19 insertions(+), 112 deletions(-) delete mode 100644 app/plant-page/all-plants/[plantId]/style.ts delete mode 100644 app/plant-page/my-garden/[userPlantId]/style.ts diff --git a/app/plant-page/all-plants/[plantId]/page.tsx b/app/plant-page/all-plants/[plantId]/page.tsx index 9bf7207..b5b5d5c 100644 --- a/app/plant-page/all-plants/[plantId]/page.tsx +++ b/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() { {/*Add button only appears if user is logged in and onboarded*/} {profileReady && profileData && ( - Add + + + Add + + )} diff --git a/app/plant-page/all-plants/[plantId]/style.ts b/app/plant-page/all-plants/[plantId]/style.ts deleted file mode 100644 index 4026041..0000000 --- a/app/plant-page/all-plants/[plantId]/style.ts +++ /dev/null @@ -1,81 +0,0 @@ -import styled from 'styled-components'; -import COLORS from '@/styles/colors'; - -export const Container = styled.div` - padding: 20px; -`; - -export const Header = styled.div` - background-color: ${COLORS.glimpse}; - margin: -28px -28px 24px -28px; - padding: 12px 20px; - padding-bottom: 27px; -`; - -export const HeaderContent = styled.div` - position: relative; - max-width: 100%; -`; - -export const ButtonWrapper = styled.div` - display: flex; - justify-content: space-between; - width: 100%; - padding-top: 24px; -`; - -export const BackButton = styled.button` - background: none; - border: none; - font-size: 1.125rem; - cursor: pointer; - padding: 0; -`; - -export const PlantImage = styled.img` - max-width: 150px; - height: auto; - margin: 9px auto 0; - display: block; -`; - -export const Content = styled.div` - display: flex; - flex-direction: column; - gap: 20px; -`; - -export const NameWrapper = styled.div` - display: flex; - justify-content: flex-start; - align-items: center; - gap: 8.5px; -`; - -export const PlantName = styled.h1` - text-align: center; - font-size: 1.5rem; - font-style: normal; - font-weight: 400; - line-height: normal; - margin: 0; -`; - -export const TitleWrapper = styled.div` - display: flex; - flex-direction: row; - gap: 2px; - justify-content: space-between; -`; -export const AddPlant = styled.button` - background-color: ${COLORS.shrub}; - color: white; - padding: 8px 16px; - border: none; - border-radius: 5px; - cursor: pointer; - font-size: 0.75rem; - font-style: inherit; - font-weight: 400; - line-height: normal; -`; diff --git a/app/plant-page/my-garden/[userPlantId]/page.tsx b/app/plant-page/my-garden/[userPlantId]/page.tsx index 67c5c78..e26c845 100644 --- a/app/plant-page/my-garden/[userPlantId]/page.tsx +++ b/app/plant-page/my-garden/[userPlantId]/page.tsx @@ -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() { > ← - X Remove + + X Remove + @@ -82,7 +85,13 @@ export default function UserPlantPage() { difficultyLevel={currentPlant.difficulty_level} /> - You have this plant in your garden! + + You have this plant in your garden! + ` border-radius: 20px; min-width: 60px; height: 24px; - padding: 4px 4px; + padding: 4px 10px; `;