[3a58bd6] | 1 | import styled from 'styled-components';
|
---|
| 2 | import { Typography } from '@mui/material';
|
---|
[bc20307] | 3 | import TextField from '@mui/material/TextField';
|
---|
| 4 | import SIcon from '@mui/icons-material/Search';
|
---|
| 5 |
|
---|
| 6 | import { mobile_max_width } from '../../../config/utilities';
|
---|
[3a58bd6] | 7 |
|
---|
| 8 | export const Wrapper = styled.div`
|
---|
| 9 | display: flex;
|
---|
| 10 | flex-direction: column;
|
---|
| 11 | align-items: center;
|
---|
[bc20307] | 12 | padding: 30px 12% 0 12%;
|
---|
[3a58bd6] | 13 | width: 100%;
|
---|
[bc20307] | 14 | max-width: 1440px;
|
---|
| 15 | margin: auto;
|
---|
[3a58bd6] | 16 | height: 100%;
|
---|
| 17 | `;
|
---|
| 18 |
|
---|
| 19 | export const Title = styled(Typography).attrs({
|
---|
| 20 | variant: 'h3',
|
---|
| 21 | fontSize: '2rem',
|
---|
| 22 | fontWeight: 600,
|
---|
| 23 | })`
|
---|
| 24 | background: -webkit-linear-gradient(#333333, #4cc5a3);
|
---|
| 25 | -webkit-background-clip: text;
|
---|
| 26 | -webkit-text-fill-color: transparent;
|
---|
[bc20307] | 27 | text-align: center;
|
---|
[3a58bd6] | 28 | `;
|
---|
| 29 |
|
---|
| 30 | export const StatsWrapper = styled.div`
|
---|
| 31 | display: flex;
|
---|
| 32 | flex-direction: row;
|
---|
| 33 | width: 100%;
|
---|
| 34 | justify-content: space-between;
|
---|
| 35 | margin: 30px 0 10px 0;
|
---|
[bc20307] | 36 |
|
---|
| 37 | @media (max-width: ${mobile_max_width}px) {
|
---|
| 38 | flex-direction: column;
|
---|
| 39 | }
|
---|
[3a58bd6] | 40 | `;
|
---|
| 41 |
|
---|
| 42 | export const Stats = styled.div`
|
---|
| 43 | display: flex;
|
---|
| 44 | flex-direction: column;
|
---|
[bc20307] | 45 | align-items: center;
|
---|
[3a58bd6] | 46 | `;
|
---|
| 47 |
|
---|
| 48 | export const KeyValueWrapper = styled.div`
|
---|
| 49 | display: flex;
|
---|
| 50 | flex-direction: row;
|
---|
[bc20307] | 51 | width: 280px;
|
---|
[3a58bd6] | 52 | justify-content: space-between;
|
---|
| 53 | `;
|
---|
| 54 |
|
---|
| 55 | export const StatsKey = styled.p`
|
---|
| 56 | margin: 0;
|
---|
| 57 | background: -webkit-linear-gradient(#333333, #4cc5a3);
|
---|
| 58 | -webkit-background-clip: text;
|
---|
| 59 | -webkit-text-fill-color: transparent;
|
---|
[bc20307] | 60 | font-size: 1.2rem;
|
---|
[3a58bd6] | 61 | `;
|
---|
| 62 |
|
---|
| 63 | export const StatsValue = styled.p`
|
---|
| 64 | margin: 0;
|
---|
| 65 | font-weight: 600;
|
---|
[bc20307] | 66 | font-size: 1.4rem;
|
---|
[3a58bd6] | 67 | background: -webkit-linear-gradient(#333333, #4cc5a3);
|
---|
| 68 | -webkit-background-clip: text;
|
---|
| 69 | -webkit-text-fill-color: transparent;
|
---|
| 70 | `;
|
---|
| 71 |
|
---|
[bc20307] | 72 | export const SearchField = styled(TextField).attrs({
|
---|
| 73 | width: '150px',
|
---|
| 74 | sx: {
|
---|
| 75 | marginTop: '10px',
|
---|
| 76 | marginBottom: '20px',
|
---|
| 77 | },
|
---|
| 78 | })`
|
---|
| 79 | border: 1px solid ${(props) => props.theme.palette.primary.main};
|
---|
| 80 | border-radius: 5px;
|
---|
| 81 | fieldset {
|
---|
| 82 | border: 0;
|
---|
| 83 | }
|
---|
| 84 | input {
|
---|
| 85 | font-size: 1.1rem;
|
---|
| 86 | font-weight: 500;
|
---|
| 87 | padding: 15px 10px;
|
---|
| 88 | color: ${(props) => props.theme.palette.primary.main};
|
---|
| 89 | }
|
---|
| 90 | `;
|
---|
| 91 |
|
---|
| 92 | export const SearchIcon = styled(SIcon).attrs((props) => ({
|
---|
| 93 | sx: {
|
---|
| 94 | fontSize: '2rem',
|
---|
| 95 | color: `rgba(0,173,124, 0.4)`, // primary.main in rgb with opacity 0.4
|
---|
| 96 | },
|
---|
| 97 | }))``;
|
---|
| 98 |
|
---|
[3a58bd6] | 99 | export const SessionsWrapper = styled.div`
|
---|
[bc20307] | 100 | height: auto;
|
---|
| 101 | min-height: 240px;
|
---|
| 102 | max-height: 380px;
|
---|
[3a58bd6] | 103 | width: 100%;
|
---|
| 104 | overflow: auto;
|
---|
| 105 | > div:not(div:first-of-type) {
|
---|
| 106 | margin-top: 24px;
|
---|
| 107 | }
|
---|
[bc20307] | 108 |
|
---|
| 109 | @media (max-width: ${mobile_max_width}px) {
|
---|
| 110 | max-height: 75vh;
|
---|
| 111 | padding-bottom: 10px;
|
---|
| 112 | }
|
---|
[3a58bd6] | 113 | `;
|
---|