From 9302594002dafb90b5e8630243587bd1313652b8 Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Fri, 18 Nov 2022 14:24:43 +0100
Subject: [PATCH] some corrections in Pager

---
 .env                            |  2 +-
 src/components/generic/Pager.js | 61 ++++++++++++++++++++++-----------
 src/pages/Challenge.js          |  2 +-
 3 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/.env b/.env
index 1009950..2488d38 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,3 @@
 REACT_APP_KC_URL=https://auth-dev.csi.wmi.amu.edu.pl/
 REACT_APP_KC_REALM=gonito-dev
-REACT_APP_KC_CLIENT_ID=gonito-dev-localhost
+REACT_APP_KC_CLIENT_ID=gonito-dev-heroku
diff --git a/src/components/generic/Pager.js b/src/components/generic/Pager.js
index 536aca2..8c1390c 100644
--- a/src/components/generic/Pager.js
+++ b/src/components/generic/Pager.js
@@ -19,9 +19,13 @@ const LeftArrow = styled(Svg)`
   cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'};
   width: 10px;
   height: 10px;
-  transition: transform 0.3s ease-in-out;
+  transition: background-color, transform 0.3s ease-in-out;
 
-  &:hover {
+  &:hover, &:focus {
+    background-color: ${({
+                           theme,
+                           backgroundColor
+                         }) => (backgroundColor === 'transparent') ? 'transparent' : theme.colors.green};
     transform: scale(1.1);
   }
 
@@ -31,33 +35,50 @@ const LeftArrow = styled(Svg)`
   }
 `;
 
-const RightArrow = styled(Svg)`
-  background-color: ${({backgroundColor}) => backgroundColor};
+const RightArrow = styled(LeftArrow)`
   transform: rotate(180deg);
-  cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'};
-  width: 10px;
-  height: 10px;
-  transition: transform 0.3s ease-in-out;
 
-  &:hover {
-    transform: rotate(180deg) scale(1.1);
-  }
-
-  @media (min-width: ${({theme}) => theme.overMobile}) {
-    width: 12px;
-    height: 12px;
+  &:hover, &:focus {
+    background-color: ${({
+                           theme,
+                           backgroundColor
+                         }) => (backgroundColor === 'transparent') ? 'transparent' : theme.colors.green};
+    transform: scale(1.1) rotate(180deg);
   }
 `;
 
 const Pager = (props) => {
+    const leftArrowVisible = () => {
+        if (props.pageNr === 1)
+            return 'transparent';
+        return theme.colors.dark;
+    };
+
+    const leftArrowClickable = () => {
+        if (props.pageNr === 1)
+            return null;
+        return props.previousPage;
+    };
+
+    const rightArrowVisible = () => {
+        if (props.pageNr === props.pages)
+            return 'transparent';
+        return theme.colors.dark;
+    };
+
+    const rightArrowClickable = () => {
+        if (props.pageNr === props.pages)
+            return null;
+        return props.nextPage;
+    };
+
     return (
         <PagerStyle>
-            <LeftArrow as='a' href='#start' src={polygon} onClick={props.previousPage} size='cover'
-                       backgroundColor={(props.pageNr === 1) ? 'transparent' : theme.colors.dark}/>
+            <LeftArrow as='a' href='#start' src={polygon} onClick={leftArrowClickable()} size='cover'
+                       backgroundColor={leftArrowVisible()}/>
             <CircleNumber number={props.number} width={props.width} borderRadius={props.borderRadius}/>
-            <RightArrow as='a' href='#start' src={polygon} onClick={props.nextPage} size='cover'
-                        backgroundColor={(props.pageNr === props.pages)
-                            ? 'transparent' : theme.colors.dark}/>
+            <RightArrow as='a' href='#start' src={polygon} onClick={rightArrowClickable()} size='cover'
+                        backgroundColor={rightArrowVisible()}/>
         </PagerStyle>
     );
 };
diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js
index 114f182..a3b7faa 100644
--- a/src/pages/Challenge.js
+++ b/src/pages/Challenge.js
@@ -62,7 +62,7 @@ const Challenge = (props) => {
         return (
             <>
                 <DesktopChallengeMenu setSection={setSection} section={section}/>
-                <FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 24px 64px 310px'>
+                <FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 24px 64px 310px' id='start'>
                     <FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
                         <Loading visible={loading}/>
                         <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>