Leaderboard variant options

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};
   }
 `;
 

src/components/sections/Leaderboard.js

@@ -1,15 +1,69 @@
 import React from "react";
-import {FlexColumn} from "../../utils/containers";
+import {FlexColumn, FlexRow} from "../../utils/containers";
-import {H2} from "../../utils/fonts";
+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'>
+            <Media query={theme.mobile}>
-                Leaderboard
+                {mobileRender()}
-            </H2>
+            </Media>
-        </FlexColumn>
+            <Media query={theme.desktop}>
-    );
+                {desktopRender()}
+            </Media>
+        </>
+    )
+
+
 }
 
 export default Leaderboard;

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)',