From 7170e7860b74158266871e88e96bd20dfeec9f4e Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Sun, 26 Jun 2022 15:42:07 +0530
Subject: [PATCH] use 1.5 spacing for 12px

---
 .../Collections/CollectionShare/publicShare/manage/index.tsx  | 2 +-
 src/components/Notification.tsx                               | 2 +-
 .../Search/SearchBar/searchInput/valueContainerWithIcon.tsx   | 2 +-
 src/components/Sidebar/ShortcutButton.tsx                     | 4 ++--
 .../contentOverlay/usageSection/familyUsageSection/index.tsx  | 4 ++--
 .../contentOverlay/usageSection/individualUsageSection.tsx    | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Collections/CollectionShare/publicShare/manage/index.tsx b/src/components/Collections/CollectionShare/publicShare/manage/index.tsx
index 61723d2c8..91f75f731 100644
--- a/src/components/Collections/CollectionShare/publicShare/manage/index.tsx
+++ b/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}
diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index f415466a6..4bb83142a 100644
--- a/src/components/Notification.tsx
+++ b/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'}
diff --git a/src/components/Search/SearchBar/searchInput/valueContainerWithIcon.tsx b/src/components/Search/SearchBar/searchInput/valueContainerWithIcon.tsx
index 58f02e41f..f05744896 100644
--- a/src/components/Search/SearchBar/searchInput/valueContainerWithIcon.tsx
+++ b/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}
diff --git a/src/components/Sidebar/ShortcutButton.tsx b/src/components/Sidebar/ShortcutButton.tsx
index 7acdf484a..a93bd13ff 100644
--- a/src/components/Sidebar/ShortcutButton.tsx
+++ b/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' }}>
diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/index.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/index.tsx
index 03a223e1b..b1ced89c2 100644
--- a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/familyUsageSection/index.tsx
+++ b/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>
diff --git a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/individualUsageSection.tsx b/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/individualUsageSection.tsx
index e91daea73..493305564 100644
--- a/src/components/Sidebar/SubscriptionCard/contentOverlay/usageSection/individualUsageSection.tsx
+++ b/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,