1 | import styled from 'styled-components';
|
---|
2 | import { Typography } from '@mui/material';
|
---|
3 | import TextField from '@mui/material/TextField';
|
---|
4 | import SIcon from '@mui/icons-material/Search';
|
---|
5 |
|
---|
6 | import { mobile_max_width } from '../../../config/utilities';
|
---|
7 |
|
---|
8 | export const Wrapper = styled.div`
|
---|
9 | display: flex;
|
---|
10 | flex-direction: column;
|
---|
11 | align-items: center;
|
---|
12 | padding: 30px 12% 0 12%;
|
---|
13 | width: 100%;
|
---|
14 | max-width: 1440px;
|
---|
15 | margin: auto;
|
---|
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;
|
---|
27 | text-align: center;
|
---|
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;
|
---|
36 |
|
---|
37 | @media (max-width: ${mobile_max_width}px) {
|
---|
38 | flex-direction: column;
|
---|
39 | }
|
---|
40 | `;
|
---|
41 |
|
---|
42 | export const Stats = styled.div`
|
---|
43 | display: flex;
|
---|
44 | flex-direction: column;
|
---|
45 | align-items: center;
|
---|
46 | `;
|
---|
47 |
|
---|
48 | export const KeyValueWrapper = styled.div`
|
---|
49 | display: flex;
|
---|
50 | flex-direction: row;
|
---|
51 | width: 280px;
|
---|
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;
|
---|
60 | font-size: 1.2rem;
|
---|
61 | `;
|
---|
62 |
|
---|
63 | export const StatsValue = styled.p`
|
---|
64 | margin: 0;
|
---|
65 | font-weight: 600;
|
---|
66 | font-size: 1.4rem;
|
---|
67 | background: -webkit-linear-gradient(#333333, #4cc5a3);
|
---|
68 | -webkit-background-clip: text;
|
---|
69 | -webkit-text-fill-color: transparent;
|
---|
70 | `;
|
---|
71 |
|
---|
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 |
|
---|
99 | export const SessionsWrapper = styled.div`
|
---|
100 | height: auto;
|
---|
101 | min-height: 240px;
|
---|
102 | max-height: 380px;
|
---|
103 | width: 100%;
|
---|
104 | overflow: auto;
|
---|
105 | > div:not(div:first-of-type) {
|
---|
106 | margin-top: 24px;
|
---|
107 | }
|
---|
108 |
|
---|
109 | @media (max-width: ${mobile_max_width}px) {
|
---|
110 | max-height: 75vh;
|
---|
111 | padding-bottom: 10px;
|
---|
112 | }
|
---|
113 | `;
|
---|