From 19f44681fa4e58f8fd1d6b7d9a2a7361d5c3270c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= <j.mikolajczyk96@gmail.com>
Date: Thu, 31 Oct 2024 07:54:11 +0100
Subject: [PATCH] oct-2157: bigger nav arrows on mobile

---
 .../HomeGridVideoBar.module.scss              |  2 +-
 .../NavigationArrows.module.scss              | 65 ++++++++++---------
 2 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/client/src/components/Home/HomeGridVideoBar/HomeGridVideoBar.module.scss b/client/src/components/Home/HomeGridVideoBar/HomeGridVideoBar.module.scss
index c95c018a61..f4b72a50ff 100644
--- a/client/src/components/Home/HomeGridVideoBar/HomeGridVideoBar.module.scss
+++ b/client/src/components/Home/HomeGridVideoBar/HomeGridVideoBar.module.scss
@@ -29,7 +29,7 @@
 }
 
 .arrows {
-  padding-top: 3.2rem;
+  padding-top: 2.8rem;
   padding-left: 2.4rem;
 
   @media #{$tablet-up} {
diff --git a/client/src/components/shared/NavigationArrows/NavigationArrows.module.scss b/client/src/components/shared/NavigationArrows/NavigationArrows.module.scss
index c5fee0f1f5..afd7090140 100644
--- a/client/src/components/shared/NavigationArrows/NavigationArrows.module.scss
+++ b/client/src/components/shared/NavigationArrows/NavigationArrows.module.scss
@@ -1,50 +1,55 @@
 .root {
   display: flex;
   align-items: center;
+}
+
+.arrow {
+  cursor: pointer;
+  width: 4rem;
+  height: 4rem;
+  background: $color-octant-grey6;
+  border-radius: $border-radius-10;
+  transition: all $transition-time-5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  .arrow {
-    cursor: pointer;
+  @media #{$tablet-up} {
     width: 3.2rem;
     height: 3.2rem;
-    background: $color-octant-grey6;
-    border-radius: $border-radius-10;
-    transition: all $transition-time-5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  }
 
-    svg path {
-      fill: $color-octant-grey5;
-    }
+  svg path {
+    fill: $color-octant-grey5;
+  }
 
-    &.leftArrow {
-      svg {
-        transform: rotate(180deg);
-      }
+  &.leftArrow {
+    svg {
+      transform: rotate(180deg);
     }
+  }
 
-    &.isDisabled {
-      background: $color-octant-grey6;
+  &.isDisabled {
+    background: $color-octant-grey6;
 
-      svg path {
-        fill: $color-octant-grey1;
-      }
+    svg path {
+      fill: $color-octant-grey1;
     }
+  }
 
-    &:not(.isDisabled):hover {
-      background: $color-octant-grey8;
+  &:not(.isDisabled):hover {
+    background: $color-octant-grey8;
 
-      svg path {
-        fill: $color-octant-dark;
-      }
+    svg path {
+      fill: $color-octant-dark;
     }
+  }
 
-    &:not(.isDisabled):active {
-      background: $color-octant-grey1;
+  &:not(.isDisabled):active {
+    background: $color-octant-grey1;
 
-      svg path {
-        fill: $color-octant-dark;
-      }
+    svg path {
+      fill: $color-octant-dark;
     }
   }
 }