Changeset bc20307 for sources/client/src/components/admin/ParkingZoneSessions/styles.js

Timestamp:

02/14/22 01:41:41 (2 years ago)

Author:

Tasevski2 <39170279+Tasevski2@…>

Branches:

master

Children:

747e0ab

Parents:

e8b1076

Message:

Push before video

File:

• sources/client/src/components/admin/ParkingZoneSessions/styles.js (modified) (9 diffs)

sources/client/src/components/admin/ParkingZoneSessions/styles.js

@@ -1 +1 @@
 import styled from 'styled-components';
 import { Typography } from '@mui/material';
+import TextField from '@mui/material/TextField';
+import SIcon from '@mui/icons-material/Search';
+
+import { mobile_max_width } from '../../../config/utilities';
 
 export const Wrapper = styled.div`
@@ -6 +10 @@
   flex-direction: column;
   align-items: center;
-  margin: 0;
-  padding: 30px 175px 0 175px;
+  padding: 30px 12% 0 12%;
   width: 100%;
+  max-width: 1440px;
+  margin: auto;
   height: 100%;
 `;
@@ -20 +25 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  text-align: center;
 `;
 
@@ -28 +34 @@
   justify-content: space-between;
   margin: 30px 0 10px 0;
+
+  @media (max-width: ${mobile_max_width}px) {
+    flex-direction: column;
+  }
 `;
 
@@ -33 +43 @@
   display: flex;
   flex-direction: column;
+  align-items: center;
 `;
 
@@ -38 +49 @@
   display: flex;
   flex-direction: row;
-  width: 220px;
+  width: 280px;
   justify-content: space-between;
 `;
@@ -47 +58 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
+  font-size: 1.2rem;
 `;
 
@@ -52 +64 @@
   margin: 0;
   font-weight: 600;
-  font-size: 1.2rem;
+  font-size: 1.4rem;
   background: -webkit-linear-gradient(#333333, #4cc5a3);
   -webkit-background-clip: text;
@@ -58 +70 @@
 `;
 
+export const SearchField = styled(TextField).attrs({
+  width: '150px',
+  sx: {
+    marginTop: '10px',
+    marginBottom: '20px',
+  },
+})`
+  border: 1px solid ${(props) => props.theme.palette.primary.main};
+  border-radius: 5px;
+  fieldset {
+    border: 0;
+  }
+  input {
+    font-size: 1.1rem;
+    font-weight: 500;
+    padding: 15px 10px;
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+`;
+
+export const SearchIcon = styled(SIcon).attrs((props) => ({
+  sx: {
+    fontSize: '2rem',
+    color: `rgba(0,173,124, 0.4)`, // primary.main in rgb with opacity 0.4
+  },
+}))``;
+
 export const SessionsWrapper = styled.div`
-  height: 45vh;
+  height: auto;
+  min-height: 240px;
+  max-height: 380px;
   width: 100%;
   overflow: auto;
-  padding-top: 20px;
-
   > div:not(div:first-of-type) {
     margin-top: 24px;
   }
+
+  @media (max-width: ${mobile_max_width}px) {
+    max-height: 75vh;
+    padding-bottom: 10px;
+  }
 `;