From 92f32bcb13c88f41cb6dd28726293f6c0fbc930b Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Fri, 15 Jul 2022 14:52:48 +0200
Subject: [PATCH] Leaderboard variant options

---
 .../elements/DesktopChallengeMenu.js          |  2 +-
 src/components/sections/Leaderboard.js        | 70 ++++++++++++++++---
 src/utils/colors.js                           |  1 +
 3 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/src/components/elements/DesktopChallengeMenu.js b/src/components/elements/DesktopChallengeMenu.js
index 0573ccf..0c37428 100644
--- a/src/components/elements/DesktopChallengeMenu.js
+++ b/src/components/elements/DesktopChallengeMenu.js
@@ -24,7 +24,7 @@ const Option = styled(FlexColumn)`
   cursor: pointer;
 
   &:hover {
-    background-color: ${({theme}) => theme.colors.green};
+    background-color: ${({theme}) => theme.colors.green05};
   }
 `;
 
diff --git a/src/components/sections/Leaderboard.js b/src/components/sections/Leaderboard.js
index 4548310..209e95e 100644
--- a/src/components/sections/Leaderboard.js
+++ b/src/components/sections/Leaderboard.js
@@ -1,15 +1,69 @@
 import React from "react";
-import {FlexColumn} from "../../utils/containers";
-import {H2} from "../../utils/fonts";
+import {FlexColumn, FlexRow} from "../../utils/containers";
+import {H2, H3} from "../../utils/fonts";
+import Media from "react-media";
+import theme from "../../utils/theme";
+import styled from "styled-components";
+
+const BoardVariant = styled(FlexColumn)`
+  transition: background-color 0.3s ease-in-out;
+  border: 1px solid ${({theme}) => theme.colors.green05};
+
+  &:hover {
+    background-color: ${({theme}) => theme.colors.green05};
+  }
+
+  div {
+    text-transform: uppercase;
+  }
+`;
 
 const Leaderboard = () => {
+    const mobileRender = () => {
+        return (
+            <FlexColumn padding='24px' as='section'>
+                <H2 as='h2'>
+                    Leaderboard
+                </H2>
+            </FlexColumn>
+        );
+    }
+
+    const desktopRender = () => {
+        return (
+            <FlexColumn padding='24px' as='section'>
+                <H2 as='h2' margin='0 0 32px 0'>
+                    Leaderboard
+                </H2>
+                <FlexRow border={`1px solid ${theme.colors.green05}`}>
+                    <BoardVariant as='button' width='150px' height='48px'>
+                        <H3>
+                            By user
+                        </H3>
+                    </BoardVariant>
+                    <BoardVariant as='button' width='150px' height='48px'>
+                        <H3>
+                            By metric
+                        </H3>
+                    </BoardVariant>
+                </FlexRow>
+            </FlexColumn>
+        );
+    }
+
+
     return (
-        <FlexColumn padding='24px' as='section'>
-            <H2 as='h2'>
-                Leaderboard
-            </H2>
-        </FlexColumn>
-    );
+        <>
+            <Media query={theme.mobile}>
+                {mobileRender()}
+            </Media>
+            <Media query={theme.desktop}>
+                {desktopRender()}
+            </Media>
+        </>
+    )
+
+
 }
 
 export default Leaderboard;
\ No newline at end of file
diff --git a/src/utils/colors.js b/src/utils/colors.js
index 3315328..991854a 100644
--- a/src/utils/colors.js
+++ b/src/utils/colors.js
@@ -1,6 +1,7 @@
 const colors = {
     white: '#FCFCFC',
     green: '#1B998B',
+    green05: 'rgba(27, 153, 139, 0.5)',
     dark: '#343434',
     dark03: 'rgba(52, 52, 52, 0.3)',
     dark05: 'rgba(52, 52, 52, 0.5)',