feat(UnitsTab): add left padding to Box component

- Add 12px left padding prop to Box component in UnitsTab (mobile and desktop) - Maintain existing styling for other radio button variants
oaknational · Sep 9, 2024 · bc2099d · bc2099d
1 parent a41f9da
commit bc2099d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/CurriculumComponents/UnitsTab/UnitsTab.tsx b/src/components/CurriculumComponents/UnitsTab/UnitsTab.tsx
@@ -244,7 +244,7 @@ const UnitsTab: FC<UnitsTabProps> = ({ trackingData, formattedData }) => {
                 value={selectedThread ? selectedThread.slug : ""}
               >
                 <SkipLink href="#content">Skip to units</SkipLink>
-                <Box $mv={16}>
+                <Box $mv={16} $pl={12} $bl={1} $borderColor="transparent">
                   <RadioButton
                     aria-label={"None highlighted"}
                     value={""}

diff --git a/src/components/CurriculumComponents/UnitsTabMobile/UnitsTabMobile.tsx b/src/components/CurriculumComponents/UnitsTabMobile/UnitsTabMobile.tsx
@@ -105,7 +105,13 @@ const UnitsTabMobile: FC<UnitsTabMobileProps> = ({
           onChange={(e) => handleSelectThread(e.target.value)}
         >
           <Box>
-            <Box $mv={16} $position={"relative"}>
+            <Box
+              $mv={16}
+              $pl={12}
+              $position={"relative"}
+              $bl={1}
+              $borderColor="transparent"
+            >
               <RadioButton
                 aria-label={"None highlighted"}
                 value={""}