From d5aa78dbe68aaf0c44f1f4b6e2ee85116a8218a3 Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Mon, 18 Jul 2022 12:41:17 +0200
Subject: [PATCH] Leaderboard board variant

---
 src/components/sections/Leaderboard.js | 52 ++++++++++++++++++++++----
 src/pages/Challenge.js                 |  2 +-
 src/utils/colors.js                    |  1 +
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/src/components/sections/Leaderboard.js b/src/components/sections/Leaderboard.js
index 209e95e..9fa18b0 100644
--- a/src/components/sections/Leaderboard.js
+++ b/src/components/sections/Leaderboard.js
@@ -5,9 +5,33 @@ import Media from "react-media";
 import theme from "../../utils/theme";
 import styled from "styled-components";
 
-const BoardVariant = styled(FlexColumn)`
+const BoardVariantMobile = styled(FlexRow)`
+  transition: color, background-color 0.3s ease-in-out;
+  background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
+  color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
+  font-size: 10px;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+  border-radius: 16px;
+  border: 1px solid ${({theme}) => theme.colors.dark};
+  padding: 6px 8px;
+  cursor: pointer;
+  box-shadow: ${({theme}) => theme.shadowRight};
+
+  * {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
+    color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
+  }
+`;
+
+const BoardVariantDesktop = styled(FlexRow)`
   transition: background-color 0.3s ease-in-out;
   border: 1px solid ${({theme}) => theme.colors.green05};
+  background-color: ${({theme, active}) => active ? theme.colors.green05 : theme.colors.white};
 
   &:hover {
     background-color: ${({theme}) => theme.colors.green05};
@@ -19,12 +43,22 @@ const BoardVariant = styled(FlexColumn)`
 `;
 
 const Leaderboard = () => {
+    const [variant, setVariant] = React.useState(0);
+
     const mobileRender = () => {
         return (
             <FlexColumn padding='24px' as='section'>
-                <H2 as='h2'>
+                <H2 as='h2' margin='0 0 12px 0'>
                     Leaderboard
                 </H2>
+                <FlexRow gap='12px' margin='0 0 20px 0'>
+                    <BoardVariantMobile as='button' active={0 === variant} onClick={() => setVariant(0)}>
+                        By user
+                    </BoardVariantMobile>
+                    <BoardVariantMobile as='button' active={1 === variant} onClick={() => setVariant(1)}>
+                        By metric
+                    </BoardVariantMobile>
+                </FlexRow>
             </FlexColumn>
         );
     }
@@ -36,16 +70,18 @@ const Leaderboard = () => {
                     Leaderboard
                 </H2>
                 <FlexRow border={`1px solid ${theme.colors.green05}`}>
-                    <BoardVariant as='button' width='150px' height='48px'>
-                        <H3>
+                    <BoardVariantDesktop as='button' width='150px' height='48px'
+                                         active={0 === variant} onClick={() => setVariant(0)}>
+                        <H3 as='span'>
                             By user
                         </H3>
-                    </BoardVariant>
-                    <BoardVariant as='button' width='150px' height='48px'>
-                        <H3>
+                    </BoardVariantDesktop>
+                    <BoardVariantDesktop as='button' width='150px' height='48px'
+                                         active={1 === variant} onClick={() => setVariant(1)}>
+                        <H3 as='span'>
                             By metric
                         </H3>
-                    </BoardVariant>
+                    </BoardVariantDesktop>
                 </FlexRow>
             </FlexColumn>
         );
diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js
index 576b455..22a0800 100644
--- a/src/pages/Challenge.js
+++ b/src/pages/Challenge.js
@@ -54,7 +54,7 @@ const Challenge = () => {
     const mobileRender = () => {
         return (
             <FlexColumn minHeight='100vh' gap='12px' alignmentY='flex-start' padding='66px 0 0 0'>
-                <H1 margin='0 0 8px 0' textAlign='center'>
+                <H1 as='h1' margin='0 0 8px 0' textAlign='center'>
                     {getChallenge().title}
                 </H1>
                 <MobileChallengeMenu setSection={setSection} section={section}/>
diff --git a/src/utils/colors.js b/src/utils/colors.js
index 991854a..4c1dcd6 100644
--- a/src/utils/colors.js
+++ b/src/utils/colors.js
@@ -1,6 +1,7 @@
 const colors = {
     white: '#FCFCFC',
     green: '#1B998B',
+    green03: 'rgba(27, 153, 139, 0.3)',
     green05: 'rgba(27, 153, 139, 0.5)',
     dark: '#343434',
     dark03: 'rgba(52, 52, 52, 0.3)',