Leaderboard board variant

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'>
+                    <BoardVariantDesktop as='button' width='150px' height='48px'
-                        <H3>
+                                         active={0 === variant} onClick={() => setVariant(0)}>
+                        <H3 as='span'>
                             By user
                         </H3>
-                    </BoardVariant>
+                    </BoardVariantDesktop>
-                    <BoardVariant as='button' width='150px' height='48px'>
+                    <BoardVariantDesktop as='button' width='150px' height='48px'
-                        <H3>
+                                         active={1 === variant} onClick={() => setVariant(1)}>
+                        <H3 as='span'>
                             By metric
                         </H3>
-                    </BoardVariant>
+                    </BoardVariantDesktop>
                 </FlexRow>
             </FlexColumn>
         );

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}/>

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