make add details button styles consistent with onboarding

calblueprint · Dec 23, 2024 · 76e9059 · 76e9059
1 parent 69486f5
commit 76e9059
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 32 deletions.
diff --git a/app/add-details/page.tsx b/app/add-details/page.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { insertUserPlants } from '@/api/supabase/queries/userPlants';
+import { Button } from '@/components/Buttons';
 import PlantDetails from '@/components/PlantDetails';
 import CONFIG from '@/lib/configs';
 import COLORS from '@/styles/colors';
@@ -15,7 +16,6 @@ import { useProfile } from '@/utils/ProfileProvider';
 import {
   ButtonDiv,
   FooterButton,
-  MoveButton,
   ReviewDetailsContainer,
   ReviewGrid,
 } from './styles';
@@ -150,24 +150,22 @@ export default function Home() {
           <FooterButton>
             <ButtonDiv>
               {currentIndex > 1 && (
-                <MoveButton
-                  type="button"
+                <Button
                   onClick={() => move(-1)}
+                  $primaryColor="white"
                   $secondaryColor={COLORS.shrub}
+                  $textColor={COLORS.shrub}
                 >
                   Back
-                </MoveButton>
+                </Button>
               )}
-
-              <MoveButton
-                type="button"
-                disabled={disableNext}
+              <Button
                 onClick={() => move(1)}
-                $primaryColor={disableNext ? COLORS.midgray : COLORS.shrub}
-                $secondaryColor="white"
+                disabled={disableNext}
+                $primaryColor={COLORS.shrub}
               >
                 Next
-              </MoveButton>
+              </Button>
             </ButtonDiv>
           </FooterButton>
         </Flex>
@@ -200,22 +198,21 @@ export default function Home() {
               ))}
             </ReviewDetailsContainer>
             <Flex $direction="row" $justify="between" $maxW="500px" $mt="24px">
-              <MoveButton
-                type="button"
+              <Button
                 onClick={() => move(-1)}
+                $primaryColor="white"
                 $secondaryColor={COLORS.shrub}
+                $textColor={COLORS.shrub}
               >
                 Back
-              </MoveButton>
-              <MoveButton
-                type="button"
-                disabled={!userId}
+              </Button>
+              <Button
                 onClick={handleSubmit}
-                $primaryColor={disableNext ? COLORS.midgray : COLORS.shrub}
-                $secondaryColor="white"
+                disabled={disableNext}
+                $primaryColor={COLORS.shrub}
               >
                 Submit
-              </MoveButton>
+              </Button>
             </Flex>
           </Flex>
         </Flex>

diff --git a/app/add-details/styles.ts b/app/add-details/styles.ts
@@ -1,18 +1,6 @@
 import styled from 'styled-components';
-import { SmallRoundedButton } from '@/components/Button';
 import COLORS from '@/styles/colors';
 
-export const MoveButton = styled(SmallRoundedButton)`
-  border: 1px solid;
-  font-family: inherit;
-  margin-bottom: 10px;
-  width: 170px;
-  height: 50px;
-  font-size: 15px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-`;
 export const FooterButton = styled.div`
   display: flex;
   flex-direction: row;