feat: add login screen with black google login button

index.css

@@ -0,0 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
+
+html {
+    font-size: 62.5%;
+    font-family: 'Inter', sans-serif;
+  }

src/App.tsx

@@ -1,5 +1,15 @@
-const App = () => {
-  return <h1>Univent Planner</h1>
+import React from 'react';
+import { CssBaseline } from '@mui/material';
+import LoginScreen from './screens/LoginScreen/LoginScreen';
+
+
+const App: React.FC = () => {
+  return (
+    <>
+      <CssBaseline />
+      <LoginScreen />
+    </>
+  );
 };
 
-export default App;
+export default App;

src/screens/LoginScreen/LoginScreen.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Container, Logo, GoogleButton } from './LoginScreenStyles';
+
+const LoginScreen: React.FC = () => {
+  return (
+     <Container>
+       <Logo src="univent_logo.svg" alt="Unievent Planner" />
+       <GoogleButton
+         variant="contained"
+         startIcon={<img src="./google-logo.svg" alt="Google" />}
+         onClick={() => {
+           /* tutaj Google login */
+        }}
+       >
+        Zaloguj się z Google
+      </GoogleButton>
+    </Container>
+  );
+};
+
+export default LoginScreen;

src/screens/LoginScreen/LoginScreenStyles.ts

@@ -0,0 +1,42 @@
+import { Box, Button } from '@mui/material';
+import { styled } from '@mui/system';
+
+export const Container = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #ffffff;
+`;
+
+export const Logo = styled('img')`
+  width: 18rem; 
+  height: 18rem;
+  margin-bottom: 4rem;
+`;
+
+export const GoogleButton = styled(Button)`
+  background-color: #313334;
+  color: #ffffff;
+  font-family: 'Inter', sans-serif;
+  font-size: 1.25rem;
+  text-align: center;
+  text-transform: none;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22rem; 
+  height: 4rem;
+  border-radius: 0.6rem;
+
+  &:hover {
+    background-color: #1f2021;
+  }
+  img {
+    width: 2rem;
+    height: 2rem;
+    margin-right: 0.5rem;
+  }
+`;