use 1.5 spacing for 12px

src/components/Collections/CollectionShare/publicShare/manage/index.tsx

@@ -58,7 +58,7 @@ export default function PublicShareManage({
                     {constants.MANAGE_LINK}
                 </ManageSectionLabel>
                 <ManageSectionOptions>
-                    <Stack spacing={'12px'}>
+                    <Stack spacing={1.5}>
                         <ManageLinkExpiry
                             collection={collection}
                             publicShareProp={publicShareProp}

src/components/Notification.tsx

@@ -48,7 +48,7 @@ export default function Notification({ open, onClose, attributes }: Iprops) {
                 sx={{
                     textAlign: 'left',
                     width: '320px',
-                    padding: '12px 16px',
+                    padding: (theme) => theme.spacing(1.5, 2),
                 }}>
                 <Stack
                     flex={'1'}

src/components/Search/SearchBar/searchInput/valueContainerWithIcon.tsx

@@ -36,7 +36,7 @@ export const ValueContainerWithIcon: SelectComponents<
 >['ValueContainer'] = (props) => (
     <ValueContainer {...props}>
         <FlexWrapper>
-            <Box className="icon" mr={'12px'} color="stroke.secondary">
+            <Box className="icon" mr={1.5} color="stroke.secondary">
                 {getIconByType(props.getValue()[0]?.type)}
             </Box>
             {props.children}

src/components/Sidebar/ShortcutButton.tsx

@@ -19,10 +19,10 @@ const ShortcutButton: FC<ButtonProps<'button', IProps>> = ({
         <SidebarButton
             variant="contained"
             color="secondary"
-            sx={{ px: '12px' }}
+            sx={{ px: 1.5 }}
             {...props}>
             <Typography variant="body2" display={'flex'} alignItems="center">
-                <Box mr={'12px'}>{icon}</Box>
+                <Box mr={1.5}>{icon}</Box>
                 {label}
                 {count > 0 && (
                     <Box sx={{ color: 'text.secondary' }}>

src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/index.tsx

@@ -28,9 +28,9 @@ export function FamilyUsageSection({
             />
             <SpaceBetweenFlex
                 style={{
-                    marginTop: '12px',
+                    marginTop: 1.5,
                 }}>
-                <Stack direction={'row'} spacing={'12px'}>
+                <Stack direction={'row'} spacing={1.5}>
                     <Legend label={constants.YOU} color="text.primary" />
                     <Legend label={constants.FAMILY} color="text.secondary" />
                 </Stack>

src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/individualUsageSection.tsx

@@ -15,7 +15,7 @@ export function IndividualUsageSection({ userDetails }) {
             />
             <SpaceBetweenFlex
                 style={{
-                    marginTop: '12px',
+                    marginTop: 1.5,
                 }}>
                 <Typography variant="caption">{`${makeHumanReadableStorage(
                     userDetails.usage,