feat: spacing

ZopaPublic · Jul 30, 2024 · ac68462 · ac68462
1 parent f567d2f
commit ac68462
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/components/atoms/InputRange/styles/Button.tsx b/src/components/atoms/InputRange/styles/Button.tsx
@@ -19,16 +19,16 @@ const StyledButton = styled.button<InputRangeThemeProps>`
   justify-content: center;
   align-items: center;
   border-radius: ${({ theme }: InputRangeThemeProps) => theme.inputRange?.button.borderRadius};
-  width: 32px;
-  height: 32px;
+  width: ${({ theme }: InputRangeThemeProps) => theme.inputRange?.button.mobileWidth};
+  height: ${({ theme }: InputRangeThemeProps) => theme.inputRange?.button.mobileHeight};
   padding: 0;
 
   ${({ theme }) => theme.inputRange?.button.buttonStyle}
 
 
   @media (min-width: ${grid.breakpoints.m}px) {
-    width: 50px;
-    height: 50px;
+    width: ${({ theme }: InputRangeThemeProps) => theme.inputRange?.button.width};
+    height: ${({ theme }: InputRangeThemeProps) => theme.inputRange?.button.height};
   }
 `;
 

diff --git a/src/components/styles/Theme/ThemeProvider.tsx b/src/components/styles/Theme/ThemeProvider.tsx
@@ -178,6 +178,10 @@ export interface InputRangeTheme {
     borderRadius: string;
     paddingMobile: string;
     padding: string;
+    width: string;
+    height: string;
+    mobileWidth: string;
+    mobileHeight: string;
   };
   slider: {
     lowerColor: string;
@@ -587,6 +591,10 @@ export const zopaTheme: AppTheme = {
       borderRadius: '50%',
       paddingMobile: '12px',
       padding: '16px',
+      width: '50px',
+      height: '50px',
+      mobileWidth: '32px',
+      mobileHeight: '32px',
     },
     slider: {
       lowerColor: colors.actionPlain,