Join Group Screen

package.json

@@ -16,7 +16,8 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/material": "^5.4.0",
+    "@mui/icons-material": "^5.16.2",
+    "@mui/material": "^5.16.2",
     "@mui/styled-engine": "^5.4.0",
     "commitlint": "^19.5.0",
     "react": "^18.3.1",

src/App.tsx

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

src/screens/JoinGroupScreen/JoinGroupScreen.tsx

@@ -0,0 +1,39 @@
+import { Typography } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { Wrapper, Content, GroupCodeInput, GroupCodeField, JoinButton, CreateGroupButton, BackButton, SvgContainer, Logo, StyledTypography } from './JoinGroupScreenStyles';
+
+const JoinGroup = () => {
+  return (
+    <Wrapper>
+      <BackButton>
+        <ArrowBackIcon />
+      </BackButton>
+      <SvgContainer>
+        <Logo src="src/assets/svg/UnieventFont.svg" />
+        <Logo src="src/assets/svg/UnieventLogoSmall.svg" />
+      </SvgContainer>
+      <Content>
+        <Typography variant="h4" sx={{ fontWeight: 'bold', marginTop: '20px' }}>Witaj, Jan Kowalski!</Typography>
+        <Typography variant="h5" gutterBottom>
+          Podaj kod grupy, do której chcesz dołączyć
+        </Typography>
+        <GroupCodeInput>
+          <GroupCodeField inputProps={{ maxLength: 1 }} />
+          <GroupCodeField inputProps={{ maxLength: 1 }} />
+          <GroupCodeField inputProps={{ maxLength: 1 }} />
+          <GroupCodeField inputProps={{ maxLength: 1 }} />
+          <GroupCodeField inputProps={{ maxLength: 1 }} />
+          <GroupCodeField inputProps={{ maxLength: 1 }} />
+        </GroupCodeInput>
+        <StyledTypography variant="body1"  gutterBottom>
+          Czym jest kod grupy?
+        </StyledTypography>
+        <JoinButton variant="contained">Dołącz do grupy</JoinButton>
+        <StyledTypography variant="body1" >lub</StyledTypography>
+        <CreateGroupButton variant="outlined">Utwórz grupę</CreateGroupButton>
+      </Content>
+    </Wrapper>
+  );
+};
+
+export default JoinGroup;