Merge pull request #190 from Vincit/feature/login_page

Feature/login page
Vincit · Aug 26, 2024 · c8c6873 · c8c6873
2 parents 05d1dac + 20dd089
commit c8c6873
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 21 deletions.
diff --git a/frontend/public/login_background.jpeg b/frontend/public/login_background.jpeg
diff --git a/frontend/public/new_logo.png b/frontend/public/new_logo.png
diff --git a/frontend/src/components/login/LoginView.tsx b/frontend/src/components/login/LoginView.tsx
@@ -1,32 +1,85 @@
 /// <reference types="vite-plugin-svgr/client" />
 import { Box, Stack, Typography } from '@mui/material';
 import GoogleLogin from './GoogleLogin';
-import { DuckLogo } from '../images/svgImages';
+import { styled } from '@mui/material/styles';
+import { COLORS } from '../../theme_2024';
+
+const LoginWrapper = styled('div')(({ theme }) => ({
+    display: 'flex',
+    width: '100%',
+    minWidth: '375px',
+    height: 'calc(431px+616px)',
+    minHeight: 'calc(431px+616px)',
+    flexShrink: 0,
+    background: COLORS.BACKGROUND_PRIMARY,
+    justifyContent: 'center'
+}));
+
+const LoginHeader = styled(Stack)(({ theme }) => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    backgroundImage: 'url(login_background.jpeg)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    minWidth: '375px',
+    height: 'calc(431px / (431px+616px) * 100%)',
+    minHeight: '431px',
+    flexShrink: 0,
+    marginTop: 0,
+    background:
+        'linear-gradient(179deg, rgba(251, 251, 246, 0.00) 69.25%, rgba(251, 251, 246, 0.20) 99.55%), linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%), url(login_background.jpeg) lightgray 50% / cover no-repeat'
+}));
+
+const LoginTitle = styled(Typography)(({ theme }) => ({
+    lineHeight: 'normal',
+    textTransform: 'uppercase',
+    color: COLORS.BACKGROUND_WHITE,
+    justifyContent: 'center',
+    fontSize: '2em',
+    marginTop: '4%',
+    marginBottom: '20%'
+}));
+
+const LoginContent = styled(Box)(({ theme }) => ({
+    marginTop: '275px',
+    width: '105%',
+    display: 'inline-flex',
+    height: '616px',
+    padding: '70px 24px',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '54px',
+    flexShrink: 0,
+    zIndex: 100,
+
+    borderRadius: '160px',
+    background: 'var(--Colors-General-Layout-Colors-Background-Color, #FBFBF6)'
+}));
+
+const Logo = () => (
+    <img width={'174px'} height={'168px'} src={'/new_logo.png'}></img>
+);
 
 const LoginView = () => {
     return (
-        <Box height="100vh">
-            <Stack id="login-view" height="100%" justifyContent="space-evenly">
+        <LoginWrapper>
+            <LoginHeader textAlign="center">
+                <LoginTitle variant={'h1'}>
+                    <LoginTitle variant="h2">Get a Room!</LoginTitle>
+                </LoginTitle>
+            </LoginHeader>
+            <LoginContent id="login-view">
                 <Box textAlign="center">
-                    <Typography textAlign="center" variant="h2">
-                        Get a Room!
-                    </Typography>
-                    <Typography variant="subtitle1">
+                    <Logo />
+                    <Typography variant={'h3'}>
                         Meeting rooms on the fly
                     </Typography>
                 </Box>
-                <Box textAlign="center">
-                    <DuckLogo
-                        width="12rem"
-                        height="12rem"
-                        title="Vincit logo"
-                    />
-                </Box>
-                <Box textAlign="center">
-                    <GoogleLogin />
-                </Box>
-            </Stack>
-        </Box>
+                <GoogleLogin />
+            </LoginContent>
+        </LoginWrapper>
     );
 };
 

diff --git a/frontend/src/theme_2024.ts b/frontend/src/theme_2024.ts
@@ -27,8 +27,8 @@ export const COLORS = {
     ACCENT_RED: '#E83520',
     TEXT_PRIMARY: '#1D1D1D',
     TEXT_DIMGREY: '#A4A4A4',
-    BACKGROUND_PRIMARY: '#FFF',
-    BACKGROUND_DIM: '#FBFBF6',
+    BACKGROUND_WHITE: '#FFF',
+    BACKGROUND_PRIMARY: '#FBFBF6',
     ALTERNATE: '#FBFBF6'
 };