fix: use theme spacing for container padding

ocadotechnology · Jul 5, 2023 · 45cc88f · 45cc88f
1 parent 1961936
commit 45cc88f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/src/theme/components/MuiContainer.ts b/src/theme/components/MuiContainer.ts
@@ -1,3 +1,4 @@
+import spacing from '../spacing';
 import Components, { getFlexStyleOverrides } from './_components';
 
 const MuiContainer: Components['MuiContainer'] = {
@@ -7,9 +8,9 @@ const MuiContainer: Components['MuiContainer'] = {
   styleOverrides: {
     root: ({ ownerState }) => ({
       ...getFlexStyleOverrides(ownerState),
-      paddingLeft: '15px !important',
-      paddingRight: '15px !important',
-      padding: '25px'
+      paddingLeft: spacing(2, true),
+      paddingRight: spacing(2, true),
+      padding: spacing(3)
     })
   }
 };

diff --git a/src/theme/spacing.ts b/src/theme/spacing.ts
@@ -1,3 +1,8 @@
-const spacing = (factor: number): string => `${8 * factor}px`;
-
-export default spacing;
+export default function spacing(
+  factor: number,
+  important: boolean = false
+): string {
+  let spacing = `${8 * factor}px`;
+  if (important) spacing += ' !important';
+  return spacing;
+}