Leaderboard variant options
This commit is contained in:
parent
02c4a28785
commit
92f32bcb13
@ -24,7 +24,7 @@ const Option = styled(FlexColumn)`
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: ${({theme}) => theme.colors.green};
|
||||
background-color: ${({theme}) => theme.colors.green05};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -1,8 +1,25 @@
|
||||
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'>
|
||||
@ -10,6 +27,43 @@ const 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 (
|
||||
<>
|
||||
<Media query={theme.mobile}>
|
||||
{mobileRender()}
|
||||
</Media>
|
||||
<Media query={theme.desktop}>
|
||||
{desktopRender()}
|
||||
</Media>
|
||||
</>
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default Leaderboard;
|
@ -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)',
|
||||
|
Loading…
Reference in New Issue
Block a user