fix button text font inheritance; center onboarding div

calblueprint · Dec 8, 2024 · 72be1cd · 72be1cd
1 parent 6a6964e
commit 72be1cd
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
@@ -8,6 +8,7 @@ import LabeledCustomSelect from '@/components/EditableInput';
 import ProgressBar from '@/components/ProgressBar';
 import RadioGroup from '@/components/RadioGroup';
 import COLORS from '@/styles/colors';
+import { Flex } from '@/styles/containers';
 import { H3, P1, P3 } from '@/styles/text';
 import { DropdownOption, Profile, UserTypeEnum } from '@/types/schema';
 import { useAuth } from '@/utils/AuthProvider';

diff --git a/app/onboarding/styles.ts b/app/onboarding/styles.ts
@@ -2,14 +2,14 @@ import styled from 'styled-components';
 
 export const OnboardingContainer = styled.div`
   min-height: 100vh;
+  width: min(392px, 100vw);
   background-color: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-self: center;
   padding: 1rem;
-  width: 24.563rem;
   position: relative;
+  margin: auto; // center horizontally and vertically
 `;
 export const ContentContainer = styled.div`
   width: 100%;

diff --git a/components/RadioGroup/styles.ts b/components/RadioGroup/styles.ts
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import COLORS from '@/styles/colors';
+import { P1 } from '@/styles/text';
 
 interface SelectedProps {
   $isSelected: boolean;
@@ -26,6 +27,7 @@ export const RadioButton = styled.button<SelectedProps>`
   padding-right: 16px;
   border-color: ${({ $isSelected }) =>
     $isSelected ? COLORS.shrub : COLORS.lightgray};
+  font-family: inherit;
 `;
 
 export const RadioInput = styled.input.attrs({ type: 'radio' })`
@@ -35,8 +37,7 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })`
     accent-color: ${COLORS.shrub}; // Changes the radio fill color
   }
 `;
-export const RadioLabel = styled.label<SelectedProps>`
+
+export const RadioLabel = styled(P1).attrs({ as: 'label' })<SelectedProps>`
   color: ${({ $isSelected }) => ($isSelected ? COLORS.shrub : COLORS.midgray)};
-  font-size: 1rem;
-  font-weight: 300;
 `;