fix: [M3-10351] - Align Encrypt Volume checkbox in Volume Create with other fields (#12592)

* Adjust checkbox alignment in Volume create

* Added changeset: Align Encrypt Volume checkbox in Volume Create with other fields

* Added changeset: Added new prop `sxCheckbox` to overried default styles for Checkbox

* PR feedback - @bnussman-akamai @coliu-akamai

* Delete pr-12592-changed-1753738347547.md

* Update packages/manager/.changeset/pr-12592-fixed-1753738232161.md

Co-authored-by: Connie Liu <[email protected]>

* PR feedback - @coliu-akamai - rename sx prop to sxCheckbox

---------

Co-authored-by: Connie Liu <[email protected]>

Author: cpathipa

packages/manager/.changeset/pr-12592-fixed-1753738232161.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Left alignment of Encryption checkbox in Linode Create, Linode Rebuild, and Volume Create forms ([#12592](https://github.com/linode/manager/pull/12592))

packages/manager/src/components/Encryption/Encryption.tsx

@@ -5,6 +5,8 @@ import type { JSX } from 'react';
 
 import { checkboxTestId, descriptionTestId, headerTestId } from './constants';
 
+import type { SxProps, Theme } from '@mui/material/styles';
+
 export interface EncryptionProps {
   descriptionCopy: JSX.Element | string;
   disabled?: boolean;
@@ -14,6 +16,7 @@ export interface EncryptionProps {
   isEncryptEntityChecked: boolean;
   notices?: string[];
   onChange: (checked: boolean) => void;
+  sxCheckbox?: SxProps<Theme>;
 }
 
 export const Encryption = (props: EncryptionProps) => {
@@ -26,6 +29,7 @@ export const Encryption = (props: EncryptionProps) => {
     isEncryptEntityChecked,
     notices,
     onChange,
+    sxCheckbox,
   } = props;
 
   return (
@@ -57,6 +61,8 @@ export const Encryption = (props: EncryptionProps) => {
           data-testid={checkboxTestId}
           disabled={disabled}
           onChange={(e, checked) => onChange(checked)}
+          sx={sxCheckbox}
+          sxFormLabel={{ marginLeft: '0px' }}
           text={`Encrypt ${entityType ?? 'Disk'}`}
           toolTipText={disabled ? disabledReason : ''}
         />

packages/manager/src/features/Linodes/LinodeCreate/Security.tsx

@@ -117,6 +117,7 @@ export const Security = () => {
                 onChange={(checked) =>
                   field.onChange(checked ? 'enabled' : 'disabled')
                 }
+                sxCheckbox={{ paddingLeft: '0px' }}
               />
             )}
           />

packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/DiskEncryption.tsx

@@ -63,6 +63,7 @@ export const DiskEncryption = (props: Props) => {
           onChange={(checked) =>
             field.onChange(checked ? 'enabled' : 'disabled')
           }
+          sxCheckbox={{ paddingLeft: '0px' }}
         />
       )}
     />

packages/manager/src/features/Volumes/Drawers/VolumeDrawer/LinodeVolumeCreateForm.tsx

@@ -286,6 +286,7 @@ export const LinodeVolumeCreateForm = (props: Props) => {
                 : []
             }
             onChange={() => toggleVolumeEncryptionEnabled(values.encryption)}
+            sxCheckbox={{ paddingLeft: '0px' }}
           />
         </Box>
       )}

packages/manager/src/features/Volumes/VolumeCreate.tsx

@@ -550,6 +550,7 @@ export const VolumeCreate = () => {
                   onChange={() =>
                     toggleVolumeEncryptionEnabled(values.encryption)
                   }
+                  sxCheckbox={{ paddingLeft: '0px' }}
                 />
               </Box>
             )}