diff --git a/package-lock.json b/package-lock.json index 589973d..e46f4fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,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", @@ -884,7 +885,6 @@ "version": "11.11.4", "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", - "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", @@ -927,7 +927,6 @@ "version": "11.11.5", "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz", "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==", - "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", @@ -1640,32 +1639,54 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.0.tgz", - "integrity": "sha512-8SLffXYPRVpcZx5QzxNE8fytTqzp+IuU3deZbQWg/vSaTlDpR5YVrQ4qQtXTi5cRdhOufV5INylmwlKK+//nPw==", - "license": "MIT", + "version": "5.16.2", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.2.tgz", + "integrity": "sha512-BUaUnl3pbd00YR2Da241CYtPw6ldNahyCKZMXXs5F1JZTFKWotNq3qQJC6Yq2YQlK3EflfBqzHj6XwwecocHMg==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, + "node_modules/@mui/icons-material": { + "version": "5.16.2", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.2.tgz", + "integrity": "sha512-5Pbxpm+o0Is1MwB4Ds/kHDOuo596NSq3vFEaWzmC+0kGCjoHt9ECiiBWMGr48yJUSbW8iTAgt/ugeJH3ZPRtDg==", + "dependencies": { + "@babel/runtime": "^7.23.9" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^5.0.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/material": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.0.tgz", - "integrity": "sha512-DbR1NckTLpjt9Zut9EGQ70th86HfN0BYQgyYro6aXQrNfjzSwe3BJS1AyBQ5mJ7TdL6YVRqohfukxj9JlqZZUg==", - "license": "MIT", + "version": "5.16.2", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.2.tgz", + "integrity": "sha512-VhPiXg60uITmXnaSr6qlxIOgOviYYBe0Hh7rNaSpaTBAtI6mIcYhdl0jihoL0PN9qa9cEm0GZFdBL0K2/Ub56w==", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/base": "5.0.0-beta.40", - "@mui/core-downloads-tracker": "^5.16.0", - "@mui/system": "^5.16.0", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.16.0", + "@mui/core-downloads-tracker": "^5.16.2", + "@mui/system": "^5.16.2", + "@mui/types": "^7.2.15", + "@mui/utils": "^5.16.2", "@types/react-transition-group": "^4.4.10", "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1", - "react-is": "^18.2.0", + "react-is": "^18.3.1", "react-transition-group": "^4.4.5" }, "engines": { @@ -1695,13 +1716,12 @@ } }, "node_modules/@mui/private-theming": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.0.tgz", - "integrity": "sha512-sYpubkO1MZOnxNyVOClrPNOTs0MfuRVVnAvCeMaOaXt6GimgQbnUcshYv2pSr6PFj+Mqzdff/FYOBceK8u5QgA==", - "license": "MIT", + "version": "5.16.2", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.2.tgz", + "integrity": "sha512-cxztG36hXxhKvD3dmtwrjSqbMtKeYyf2XCZNk0OKRKi81aytSaPImBiCngHIllrkmClwiWRMKxjOHyhSTlqfUg==", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.16.0", + "@mui/utils": "^5.16.2", "prop-types": "^15.8.1" }, "engines": { @@ -1722,10 +1742,9 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.15.14", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", - "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", - "license": "MIT", + "version": "5.16.2", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.2.tgz", + "integrity": "sha512-+a2DE5McPvfuiQXhdfWjcHc82WwBrwCsLryXEhhgsUOVyMgOD8GrEkqr04evivXkIrU2A0fHeWxZu8N+5vogLg==", "dependencies": { "@babel/runtime": "^7.23.9", "@emotion/cache": "^11.11.0", @@ -1754,16 +1773,15 @@ } }, "node_modules/@mui/system": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.0.tgz", - "integrity": "sha512-9YbkC2m3+pNumAvubYv+ijLtog6puJ0fJ6rYfzfLCM47pWrw3m+30nXNM8zMgDaKL6vpfWJcCXm+LPaWBpy7sw==", - "license": "MIT", + "version": "5.16.2", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.2.tgz", + "integrity": "sha512-gwlqUn2Gs5tF/68wvqlVjsVBahLYwX6WvNTPy/2TXSb7xqJyqso2vGBlImB7/vSaqoZ+jifOEuamSj/nlZIX6A==", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/private-theming": "^5.16.0", - "@mui/styled-engine": "^5.15.14", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.16.0", + "@mui/private-theming": "^5.16.2", + "@mui/styled-engine": "^5.16.2", + "@mui/types": "^7.2.15", + "@mui/utils": "^5.16.2", "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -1794,10 +1812,9 @@ } }, "node_modules/@mui/types": { - "version": "7.2.14", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", - "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", - "license": "MIT", + "version": "7.2.15", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.15.tgz", + "integrity": "sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0" }, @@ -1808,15 +1825,15 @@ } }, "node_modules/@mui/utils": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.0.tgz", - "integrity": "sha512-kLLi5J1xY+mwtUlMb8Ubdxf4qFAA1+U7WPBvjM/qQ4CIwLCohNb0sHo1oYPufjSIH/Z9+dhVxD7dJlfGjd1AVA==", - "license": "MIT", + "version": "5.16.2", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.2.tgz", + "integrity": "sha512-AuM5B7DBt8tRgoqgwdx85T6Lkq7QC09PgJs9hb84Z2NfhgSKd5bFUDVW0FXzpX+lFoYG6z9FoInNYT3EMv6VHA==", "dependencies": { "@babel/runtime": "^7.23.9", - "@types/prop-types": "^15.7.11", + "@types/prop-types": "^15.7.12", + "clsx": "^2.1.1", "prop-types": "^15.8.1", - "react-is": "^18.2.0" + "react-is": "^18.3.1" }, "engines": { "node": ">=12.0.0" diff --git a/package.json b/package.json index 29f3644..7f14c00 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index a25ac0a..e8eab62 100644 --- a/src/App.tsx +++ b/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

Univent Planner

; + return ( + <> + + + + ); }; export default App; diff --git a/src/assets/svg/UnieventFont.svg b/src/assets/svg/UnieventFont.svg new file mode 100644 index 0000000..c0b53d5 --- /dev/null +++ b/src/assets/svg/UnieventFont.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svg/UnieventLogoSmall.svg b/src/assets/svg/UnieventLogoSmall.svg new file mode 100644 index 0000000..231b193 --- /dev/null +++ b/src/assets/svg/UnieventLogoSmall.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/screens/JoinGroupScreen/JoinGroupScreen.tsx b/src/screens/JoinGroupScreen/JoinGroupScreen.tsx new file mode 100644 index 0000000..830c69f --- /dev/null +++ b/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 ( + + + + + + + + + + Witaj, Jan Kowalski! + + Podaj kod grupy, do której chcesz dołączyć + + + + + + + + + + + Czym jest kod grupy? + + Dołącz do grupy + lub + Utwórz grupę + + + ); +}; + +export default JoinGroup; diff --git a/src/screens/JoinGroupScreen/JoinGroupScreenStyles.ts b/src/screens/JoinGroupScreen/JoinGroupScreenStyles.ts new file mode 100644 index 0000000..2380d27 --- /dev/null +++ b/src/screens/JoinGroupScreen/JoinGroupScreenStyles.ts @@ -0,0 +1,134 @@ +import { Box, Button, IconButton, Input, Typography } from '@mui/material'; +import {styled }from 'styled-components'; + + + +export const Wrapper = styled(Box)` + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + text-align: center; + padding: 32px; + box-sizing: border-box; + position: relative; + @media (max-width: 600px) { + padding: 16px; + } +`; + +export const Content = styled(Box)` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 1; + width: 100%; + padding: 16px; + @media (max-width: 600px) { + padding: 8px; + } +`; + +export const GroupCodeInput = styled(Box)` + display: flex; + gap: 16px; + margin: 24px 0; + @media (max-width: 600px) { + gap: 8px; + margin: 16px 0; + } +`; + +export const GroupCodeField = styled(Input)` + display: flex; + align-items: center; + justify-content: center; + width: 60px; + height: 60px; + font-size: 32px; + text-align: center; + &::before, + &::after { + border-bottom: none !important; + } + border-bottom: 2px solid ${({ theme }) => theme.colors.underline_grey}; + @media (max-width: 600px) { + width: 40px; + height: 40px; + font-size: 24px; + } + input { + text-align: center; + } +`; + +export const JoinButton = styled(Button)` + background-color: ${({ theme }) => theme.colors.button_red} !important; + color: white; + &:hover { + background-color: ${({ theme }) => theme.colors.button_red} !important; + } + margin: 55px 0 15px; + padding: 16px 0; + font-size: 18px; + border-radius: 8px; + width: 100%; + @media (max-width: 600px) { + margin: 40px 0 10px; + padding: 12px 0; + font-size: 16px; + } +`; + +export const CreateGroupButton = styled(Button)` + border: 1px solid ${({ theme }) => theme.colors.border_grey} !important; + padding: 16px 0; + font-size: 18px; + color: ${({ theme }) => theme.colors.black_100} !important; + border-radius: 8px; + width: 100%; + color: black; + margin-top: 15px; + @media (max-width: 600px) { + padding: 12px 0; + font-size: 16px; + margin-top: 10px; + } +`; + +export const BackButton = styled(IconButton)` + position: absolute; + top: 32px; + left: 32px; + @media (max-width: 600px) { + top: 16px; + left: 16px; + } +`; + +export const SvgContainer = styled(Box)` + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + margin-bottom: 16px; + width: 100%; + @media (max-width: 600px) { + gap: 4px; + margin-bottom: 8px; + } +`; + +export const Logo = styled('img')` + margin-bottom: 16px; + @media (max-width: 600px) { + margin-bottom: 8px; + } +`; + +export const StyledTypography = styled(Typography)` + color: ${({ theme }) => theme.colors.light_grey}; + margin-left: auto; + margin-right: 0; +`; \ No newline at end of file