fix: [M3-8787] - Fix Alignment for Backup Label in Add-ons Panel (#11160

) * fix: [M3-8787] - Fix Alignment for Backup Label in Add-ons Panel * Add changeset * Implement changes after speaking with UX * Final touches to make UI look uniform
linode · Nov 21, 2024 · 18b2bf9 · 18b2bf9
1 parent 260c0b3
commit 18b2bf9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/packages/manager/.changeset/pr-11160-fixed-1729811033133.md b/packages/manager/.changeset/pr-11160-fixed-1729811033133.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Alignment for Backup Label in Add-ons Panel ([#11160](https://github.com/linode/manager/pull/11160))
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Addons/Backups.tsx
@@ -69,9 +69,11 @@ export const Backups = () => {
       label={
         <Stack spacing={1} sx={{ pl: 2 }}>
           <Stack alignItems="center" direction="row" spacing={2}>
-            <Typography variant="h3">Backups</Typography>
+            <Typography component="span" variant="h3">
+              Backups
+            </Typography>
             {backupsMonthlyPrice && (
-              <Typography>
+              <Typography component="span">
                 <Currency quantity={backupsMonthlyPrice} /> per month
               </Typography>
             )}
@@ -87,7 +89,7 @@ export const Backups = () => {
               variant="warning"
             />
           )}
-          <Typography>
+          <Typography component="span" display="block" variant="body1">
             {isAccountBackupsEnabled ? (
               <React.Fragment>
                 You have enabled automatic backups for your account. This Linode
@@ -108,6 +110,7 @@ export const Backups = () => {
       control={<Checkbox />}
       data-testid="backups"
       onChange={field.onChange}
+      sx={{ alignItems: 'start' }}
     />
   );
 };
diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Addons/PrivateIP.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Addons/PrivateIP.tsx
@@ -34,9 +34,11 @@ export const PrivateIP = () => {
   return (
     <FormControlLabel
       label={
-        <Stack sx={{ pl: 2 }}>
-          <Typography variant="h3">Private IP</Typography>
-          <Typography>
+        <Stack spacing={1} sx={{ pl: 2 }}>
+          <Typography component="span" variant="h3">
+            Private IP
+          </Typography>
+          <Typography component="span" display="block" variant="body1">
             Use Private IP for a backend node to a NodeBalancer. Use VPC instead
             for private communication between your Linodes.
           </Typography>
@@ -46,6 +48,7 @@ export const PrivateIP = () => {
       control={<Checkbox />}
       disabled={isDistributedRegionSelected || isLinodeCreateRestricted}
       onChange={field.onChange}
+      sx={{ alignItems: 'start' }}
     />
   );
 };