Update Guarantors slider

podkrepi-bg · Oct 25, 2023 · 1fe2fc1 · 1fe2fc1
1 parent 56293ea
commit 1fe2fc1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/components/admin/partners/Partners.styled.tsx b/src/components/admin/partners/Partners.styled.tsx
@@ -1,7 +1,9 @@
+import Image from 'next/image'
+
 import { Grid, Tabs, Typography } from '@mui/material'
-import theme from '../../../common/theme'
 import { styled } from '@mui/material/styles'
-import Image from 'next/image'
+
+import theme from '../../../common/theme'
 
 export const SectionTitle = styled(Typography)(() => ({
   fontSize: theme.typography.pxToRem(24),
@@ -32,17 +34,25 @@ export const Description = styled(Typography)(() => ({
 export const StyledTabs = styled(Tabs)(() => ({
   '& .MuiTabs-flexContainer': {
     justifyContent: 'space-around',
-    '@media only screen and (max-width: 900px)': {
-      justifyContent: 'space-between',
-    },
+
+    [theme.breakpoints.down('md')]: { justifyContent: 'space-between' },
   },
 }))
 
 export const StyledArrow = styled(Image)(() => ({
   filter:
     'invert(0%) sepia(83%) saturate(7500%) hue-rotate(347deg) brightness(85%) contrast(114%) opacity(50%)',
+
   '&:hover': {
     filter:
       'invert(91%) sepia(23%) saturate(3681%) hue-rotate(178deg) brightness(110%) contrast(102%)',
   },
+
+  '&.slick-prev': {
+    left: theme.spacing(-0.7),
+  },
+
+  '&.slick-next': {
+    right: theme.spacing(-0.7),
+  },
 }))
diff --git a/src/components/admin/partners/PartnersSlider.tsx b/src/components/admin/partners/PartnersSlider.tsx
@@ -18,8 +18,8 @@ const PartnersSlider: FC<Props> = ({ children }: Props) => {
       }
       alt="next-arrow"
       src={'/img/partners/organizations/previousArrow.svg'}
-      width={26}
-      height={40}
+      width={20}
+      height={20}
     />
   )
 
@@ -32,8 +32,8 @@ const PartnersSlider: FC<Props> = ({ children }: Props) => {
       }
       alt="next-arrow"
       src={'/img/partners/organizations/nextArrow.svg'}
-      width={26}
-      height={40}
+      width={20}
+      height={20}
     />
   )