diff --git a/backend/src/config/db.ts b/backend/src/config/db.ts index 1d3f7d9..0d79124 100644 --- a/backend/src/config/db.ts +++ b/backend/src/config/db.ts @@ -25,4 +25,4 @@ export const dataSource = new DataSource({ User, Report, ], -}); +}); \ No newline at end of file diff --git a/files/helpers/jwtHelper.ts b/files/helpers/jwtHelper.ts index 877aced..ecca62d 100644 --- a/files/helpers/jwtHelper.ts +++ b/files/helpers/jwtHelper.ts @@ -13,8 +13,8 @@ export const createUploadToken = (payload: object, expiresIn: string | number) = export const verifyToken = (token: string) => { try { - return jwt.verify(token, SECRET_KEY) + return jwt.verify(token, SECRET_KEY); } catch (err) { - return null + return null; } -} \ No newline at end of file +}; diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ce33a43..09e9fd6 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -21,6 +21,7 @@ "graphql": "^16.9.0", "jsonwebtoken": "^9.0.2", "react": "^18.3.1", + "react-burger-menu": "^3.1.0", "react-dom": "^18.3.1", "react-router-dom": "^6.24.0", "styled-components": "^6.1.11", @@ -2390,6 +2391,15 @@ "url": "https://github.com/sponsors/epoberezkin" } }, + "node_modules/amdefine": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", + "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==", + "optional": true, + "engines": { + "node": ">=0.4.2" + } + }, "node_modules/ansi-escapes": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", @@ -2534,6 +2544,24 @@ "node": ">=12" } }, + "node_modules/ast-transform": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/ast-transform/-/ast-transform-0.0.0.tgz", + "integrity": "sha512-e/JfLiSoakfmL4wmTGPjv0HpTICVmxwXgYOB8x+mzozHL8v+dSfCbrJ8J8hJ0YBP0XcYu1aLZ6b/3TnxNK3P2A==", + "dependencies": { + "escodegen": "~1.2.0", + "esprima": "~1.0.4", + "through": "~2.3.4" + } + }, + "node_modules/ast-types": { + "version": "0.7.8", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.7.8.tgz", + "integrity": "sha512-RIOpVnVlltB6PcBJ5BMLx+H+6JJ/zjDGU0t7f0L6c2M1dqcK92VQopLBlPQ9R80AVXelfqYgjcPLtHtDbNFg0Q==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -2590,6 +2618,29 @@ "node": ">=8" } }, + "node_modules/browser-resolve": { + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.3.tgz", + "integrity": "sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==", + "dependencies": { + "resolve": "1.1.7" + } + }, + "node_modules/browser-resolve/node_modules/resolve": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", + "integrity": "sha512-9znBF0vBcaSN3W2j7wKvdERPwqTxSpCq+if5C0WoTCyV9n24rua28jeuQ2pL/HOf+yUe/Mef+H/5p60K0Id3bg==" + }, + "node_modules/browserify-optional": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/browserify-optional/-/browserify-optional-1.0.1.tgz", + "integrity": "sha512-VrhjbZ+Ba5mDiSYEuPelekQMfTbhcA2DhLk2VQWqdcCROWeFqlTcXZ7yfRkXCIl8E+g4gINJYJiRB7WEtfomAQ==", + "dependencies": { + "ast-transform": "0.0.0", + "ast-types": "^0.7.0", + "browser-resolve": "^1.8.1" + } + }, "node_modules/browserslist": { "version": "4.23.3", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz", @@ -3133,6 +3184,54 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/escodegen": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.2.0.tgz", + "integrity": "sha512-yLy3Cc+zAC0WSmoT2fig3J87TpQ8UaZGx8ahCAs9FL8qNbyV7CVyPKS74DG4bsHiL5ew9sxdYx131OkBQMFnvA==", + "dependencies": { + "esprima": "~1.0.4", + "estraverse": "~1.5.0", + "esutils": "~1.0.0" + }, + "bin": { + "escodegen": "bin/escodegen.js", + "esgenerate": "bin/esgenerate.js" + }, + "engines": { + "node": ">=0.4.0" + }, + "optionalDependencies": { + "source-map": "~0.1.30" + } + }, + "node_modules/escodegen/node_modules/estraverse": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.5.1.tgz", + "integrity": "sha512-FpCjJDfmo3vsc/1zKSeqR5k42tcIhxFIlvq+h9j0fO2q/h2uLKyweq7rYJ+0CoVvrGQOxIS5wyBrW/+vF58BUQ==", + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/escodegen/node_modules/esutils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.0.0.tgz", + "integrity": "sha512-x/iYH53X3quDwfHRz4y8rn4XcEwwCJeWsul9pF1zldMbGtgOtMNBEOuYWwB1EQlK2LRa1fev3YAgym/RElp5Cg==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/escodegen/node_modules/source-map": { + "version": "0.1.43", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz", + "integrity": "sha512-VtCvB9SIQhk3aF6h+N85EaqIaBFIAfZ9Cu+NJHHVvc8BbEcnvDcFw6sqQ2dQrT6SlOrZq3tIvyD9+EGq/lJryQ==", + "optional": true, + "dependencies": { + "amdefine": ">=0.0.4" + }, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/eslint": { "version": "8.57.0", "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz", @@ -3373,6 +3472,18 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/esprima": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz", + "integrity": "sha512-rp5dMKN8zEs9dfi9g0X1ClLmV//WRyk/R15mppFNICIFRG5P92VP7Z04p8pk++gABo9W2tY+kHyu6P1mEHgmTA==", + "bin": { + "esparse": "bin/esparse.js", + "esvalidate": "bin/esvalidate.js" + }, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/esquery": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz", @@ -3423,6 +3534,11 @@ "node": ">=0.10.0" } }, + "node_modules/eve": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/eve/-/eve-0.5.4.tgz", + "integrity": "sha512-aqprQ9MAOh1t66PrHxDFmMXPlgNO6Uv1uqvxmwjprQV50jaQ2RqO7O1neY4PJwC+hMnkyMDphu2AQPOPZdjQog==" + }, "node_modules/execa": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz", @@ -5471,6 +5587,25 @@ "node": ">=0.10.0" } }, + "node_modules/react-burger-menu": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/react-burger-menu/-/react-burger-menu-3.1.0.tgz", + "integrity": "sha512-jLkYUdVu4K8hXD1YUWMDDc+fFUohKoerUnjfyE2PXR0wxEIEM2gZuQGBgLrdRzNsoMbP1G8uHXda0hbjaW3Enw==", + "dependencies": { + "browserify-optional": "^1.0.0", + "classnames": "^2.2.6", + "eve": "~0.5.1", + "prop-types": "^15.7.2", + "snapsvg-cjs": "0.0.6" + }, + "engines": { + "node": ">=4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0", + "react-dom": ">=0.14.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -5814,6 +5949,25 @@ "node": ">=8" } }, + "node_modules/snapsvg": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/snapsvg/-/snapsvg-0.5.1.tgz", + "integrity": "sha512-CjwWYsL7+CCk1vCk9BBKGYS4WJVDfJAOMWU+Zhzf8wf6pAm/xT34wnpaMPAgcgCNkxuU6OkQPPd8wGuRCY9aNw==", + "dependencies": { + "eve": "~0.5.1" + } + }, + "node_modules/snapsvg-cjs": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/snapsvg-cjs/-/snapsvg-cjs-0.0.6.tgz", + "integrity": "sha512-7NNvoGrc3BQvWz5rWK1DsD5/Vni4STswz5B3JrBADboQWcN8OBVGjYVJFPT5JkUXb2iVnEflZANhufEpEcTHXw==", + "dependencies": { + "snapsvg": "0.5.1" + }, + "peerDependencies": { + "eve": "~0.5.1" + } + }, "node_modules/source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -6015,6 +6169,11 @@ "node": ">=12.22" } }, + "node_modules/through": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==" + }, "node_modules/tinybench": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index ac33156..ff874d6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -24,6 +24,7 @@ "graphql": "^16.9.0", "jsonwebtoken": "^9.0.2", "react": "^18.3.1", + "react-burger-menu": "^3.1.0", "react-dom": "^18.3.1", "react-router-dom": "^6.24.0", "styled-components": "^6.1.11", diff --git a/frontend/src/components/Signin/SignInForm.tsx b/frontend/src/components/Signin/SignInForm.tsx index 7240e3f..af65087 100644 --- a/frontend/src/components/Signin/SignInForm.tsx +++ b/frontend/src/components/Signin/SignInForm.tsx @@ -1,41 +1,38 @@ import React from "react"; -import {colors} from "../../_colors.ts"; -import {Button, Form, Input, notification} from 'antd' -import {LOGIN_MUTATION} from "../../graphql/mutations.ts"; -import {useNavigate} from 'react-router-dom' -import {ApolloError, useMutation} from "@apollo/client"; +import { colors } from "../../_colors.ts"; +import { Button, Form, Input, notification } from "antd"; +import { LOGIN_MUTATION } from "../../graphql/mutations.ts"; +import { useNavigate } from "react-router-dom"; +import { ApolloError, useMutation } from "@apollo/client"; import styled from "@emotion/styled"; +import { Link } from "react-router-dom"; -const {Item} = Form +const { Item } = Form; const SignInForm: React.FC = () => { - const [notifApi, contextHolder] = notification.useNotification() - const navigate = useNavigate() + const [notifApi, contextHolder] = notification.useNotification(); + const navigate = useNavigate(); - - const [login, {loading, error}] = useMutation(LOGIN_MUTATION, { - onCompleted: (data) => { + const [login, { loading, error }] = useMutation(LOGIN_MUTATION, { + onCompleted: () => { navigate("/dashboard"); }, onError: (error: ApolloError) => { - notifApi.error(error) + notifApi.error(error); console.error("Login error", error); - } + }, }); + const handleRecoverPassword = () => {}; - const handleRecoverPassword = () => { - - } - - const handleLogin = (values: { email: any; password: any; }): void => { + const handleLogin = (values: { email: any; password: any }): void => { login({ variables: { email: values.email, - password: values.password - } - }) - } + password: values.password, + }, + }); + }; return ( @@ -44,97 +41,125 @@ const SignInForm: React.FC = () => { Hello again ! Welcome back, you've been missed ! -
- - + + + - - + + - - + Not a member ? - navigate('access/register')}>Register now ! + + + Register now + +
- ) -} - + ); +}; const RegisterTitleContainer = styled.div` - display: flex; - justify-content: center; - align-items: center; - gap: 5px; -` + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + @media screen and (max-width: 768px) { + flex-direction: column; + } +`; + +const SignInLink = styled.a` + color: #4a90e2; +`; const Title = styled.h2` - font-size: 30px; - font-weight: 500; -` + font-size: 30px; + font-weight: 500; +`; const SubTitle = styled.p` - font-size: 15px; - font-weight: 400; -` + font-size: 15px; + font-weight: 400; +`; const RegisterTitle = styled(SubTitle)` - color: ${colors.lightPurple}; - font-weight: 500; - text-decoration: underline; - cursor: pointer; - transition: .2s; - - &:hover { - color: ${colors.mainOrange}; - } - - &:active { - color: rgba(255, 149, 24, 0.49); - } -` + color: ${colors.lightPurple}; + font-weight: 500; + text-decoration: underline; + cursor: pointer; + transition: 0.2s; + + &:hover { + color: ${colors.mainOrange}; + } + &:active { + color: rgba(255, 149, 24, 0.49); + } +`; const PasswordRecover = styled.p` - font-weight: 300; - text-decoration: underline; - font-size: 10px; - color: rgba(87, 87, 87, 0.66); - cursor: pointer; - - &:active { - color: rgba(114, 114, 114, 0.6); - } -` + font-weight: 300; + text-decoration: underline; + font-size: 10px; + color: rgba(87, 87, 87, 0.66); + cursor: pointer; + + &:active { + color: rgba(114, 114, 114, 0.6); + } +`; const TitleContainer = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 20px; - gap: 5px -` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 20px; + gap: 5px; +`; const FormContainer = styled.div` - display: flex; - width: 50%; - height: 100%; - flex-direction: column; - align-items: center; - justify-content: center; + display: flex; + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; `; -export default SignInForm \ No newline at end of file +export default SignInForm; diff --git a/frontend/src/components/Signin/SigninLayout.tsx b/frontend/src/components/Signin/SigninLayout.tsx index 1dfc347..3906f7f 100644 --- a/frontend/src/components/Signin/SigninLayout.tsx +++ b/frontend/src/components/Signin/SigninLayout.tsx @@ -1,37 +1,45 @@ -import {FC} from "react"; +import { FC } from "react"; import styled from "@emotion/styled"; import Signin from "../../assets/Signin.png"; import SignInForm from "./SignInForm.tsx"; const SigninLayout: FC = () => { - - return ( - - + + ); }; - const StyledImage = styled.img` - flex: 1; - width: 50%; - height: auto; - object-fit: cover; + flex: 1; + width: 50%; + height: auto; + object-fit: cover; + max-width: 100%; + @media (max-width: 768px) { + display: none; + } `; const SignInLayout = styled.div` - width: 750px; - height: 470px; - border-radius: 20px; - padding-top: 6px; - margin: 0 auto; - display: flex; - background: white; - justify-content: center; - align-items: center; + width: 100%; + max-width: 750px; + height: auto; + border-radius: 20px; + padding-top: 6px; + margin: 0 auto; + display: flex; + flex-direction: row; + background: white; + justify-content: center; + align-items: center; + @media (max-width: 768px) { + width: 75%; + padding-top: 25px; + padding-bottom: 50px; + } `; export default SigninLayout; diff --git a/frontend/src/components/Signup/SignupLayout.tsx b/frontend/src/components/Signup/SignupLayout.tsx index c7586a0..18a7856 100644 --- a/frontend/src/components/Signup/SignupLayout.tsx +++ b/frontend/src/components/Signup/SignupLayout.tsx @@ -6,7 +6,9 @@ import SignUp from "../visitor/signUp/SignUp"; const SignupLayout: FC = () => { return ( - + + + ); @@ -25,6 +27,9 @@ const StyledImage = styled.img` width: 100%; margin-left: 0.2rem; height: auto; + @media (max-width: 768px) { + display: none; + } `; const SignUpLayout = styled.div` @@ -36,6 +41,9 @@ const SignUpLayout = styled.div` display: flex; flex-direction: row-reverse; background: white; + @media (max-width: 768px) { + width: 80%; + } `; export default SignupLayout; diff --git a/frontend/src/components/user/UserLayout.tsx b/frontend/src/components/user/UserLayout.tsx index 8a2dd86..86c430e 100644 --- a/frontend/src/components/user/UserLayout.tsx +++ b/frontend/src/components/user/UserLayout.tsx @@ -1,73 +1,81 @@ -import {FC} from "react"; -import {HeaderContainer, WildTransferLogo} from "../visitor/VisitorLayout.tsx"; +import { FC } from "react"; +import { Avatar, Dropdown, MenuProps } from "antd"; +import { DashboardOutlined, DollarOutlined, LogoutOutlined, SettingOutlined } from "@ant-design/icons"; +import { Link, Outlet, useNavigate } from "react-router-dom"; +import { ApolloError, useMutation } from '@apollo/client'; +import { LOGOUT } from "../../graphql/mutations.ts"; +import { WildTransferLogo } from "../visitor/VisitorLayout.tsx"; import styled from "@emotion/styled"; -import {Avatar, Dropdown, MenuProps} from "antd"; -import {DashboardOutlined, DollarOutlined, LogoutOutlined, SettingOutlined} from "@ant-design/icons"; -import {Link, Outlet, useNavigate} from "react-router-dom"; -import {ApolloError, useMutation} from '@apollo/client'; -import {LOGOUT} from "../../graphql/mutations.ts"; const UserLayout: FC = () => { - const navigate = useNavigate(); + const navigate = useNavigate(); - const [logout] = useMutation(LOGOUT, { - onCompleted: () => { - navigate('/'); - }, - onError: (err: ApolloError) => { - console.error(err); - } - }); + const [logout] = useMutation(LOGOUT, { + onCompleted: () => { + navigate('/'); + }, + onError: (err: ApolloError) => { + console.error(err); + } + }); - const handleLogout = (): void => { - logout(); - }; + const handleLogout = (): void => { + logout(); + }; + const items: MenuProps['items'] = [ + { + label: Dashboard, + key: '0', + icon: + }, + { + label: Billing, + key: '1', + icon: + }, + { + label: Settings, + key: '3', + icon: + }, + { + label: 'Log Out', + key: '4', + icon: , + onClick: handleLogout + }, + ]; - const items: MenuProps['items'] = [ - { - label: Dashboard, - key: '0', - icon: - }, - { - label: Billing, - key: '1', - icon: - }, - { - label: Settings, - key: '3', - icon: - }, - { - label: 'Log Out', - key: '4', - icon: , - onClick: handleLogout - }, - ]; - - return ( - - - navigate('/dashboard')}>WildTransfer - - U - - - - - ); + return ( + + + navigate('/dashboard')}>WildTransfer + + U + + + + + ); }; +const UserHeaderContainer = styled.div` + height: auto; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 40px; + margin: 30px 0; +`; + const UserLayoutContainer = styled.div` - height: auto; - width: 100%; + height: auto; + width: 100%; `; export default UserLayout; diff --git a/frontend/src/components/visitor/VisitorLayout.tsx b/frontend/src/components/visitor/VisitorLayout.tsx index 4373119..a80e216 100644 --- a/frontend/src/components/visitor/VisitorLayout.tsx +++ b/frontend/src/components/visitor/VisitorLayout.tsx @@ -32,6 +32,10 @@ export const HeaderContainer = styled.div` align-items: center; padding: 0 40px 0 40px; margin-top: 30px; + @media screen and (max-width: 450px) { + flex-direction: column; + height: auto; + } `; const LayoutContainer = styled.div` diff --git a/frontend/src/components/visitor/layout/TransferPricing.tsx b/frontend/src/components/visitor/layout/TransferPricing.tsx index 0b1cca1..bd3a21f 100644 --- a/frontend/src/components/visitor/layout/TransferPricing.tsx +++ b/frontend/src/components/visitor/layout/TransferPricing.tsx @@ -9,7 +9,7 @@ const TransferPricing: FC = () => { return ( - + navigate('/')}> { const [api, contextHolder] = notification.useNotification(); const navigate = useNavigate(); - const openNotificationWithIcon = (type: NotificationType, message: string, title: string) => { - api[type]({ - message: title, - description: message, - }); - }; - - const [signUpUser, { loading }] = useMutation(SIGN_UP_USER, { - onCompleted(data) { - openNotificationWithIcon('success', 'You have successfully signed up!', 'Success'); - console.log("sign up success") - navigate("/access/login"); - }, - onError(error) { - openNotificationWithIcon('error', error.message, 'Error'); - }, - }); - - const handleSignUp = async (values: any) => { - try { - await signUpUser({ - variables: { - firstname: values.firstname, - lastname: values.lastname, - email: values.email, - password: values.password, - confirmPassword: values.confirmPassword - }, - }); - } catch (e) { - openNotificationWithIcon('error', e.message, 'Error'); - } - }; - - return ( - - {contextHolder} - Oh, hello there! - - - - - - - - - - - - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ornare, velit ullamcorper rhoncus scelerisque - - - - - Sign up - - - - Already a member? Sign in now - - ); + const openNotificationWithIcon = ( + type: NotificationType, + message: string, + title: string + ) => { + api[type]({ + message: title, + description: message, + }); + }; + + const [signUpUser, { loading }] = useMutation(SIGN_UP_USER, { + onCompleted(data) { + openNotificationWithIcon( + "success", + "You have successfully signed up!", + "Success" + ); + navigate("/access/login"); + }, + onError(error) { + openNotificationWithIcon("error", error.message, "Error"); + }, + }); + + const handleSignUp = async (values: any) => { + try { + await signUpUser({ + variables: { + firstname: values.firstname, + lastname: values.lastname, + email: values.email, + password: values.password, + confirmPassword: values.confirmPassword, + }, + }); + } catch (e) { + openNotificationWithIcon("error", e.message, "Error"); + } + }; + + return ( + + {contextHolder} + Oh, hello there! + + + + + + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Pellentesque ornare, velit ullamcorper rhoncus + scelerisque + + + + + + Sign up + + + + + Already a member?{" "} + + Sign in now + + + + ); }; const formItemLayout = { - labelCol: { - xs: { span: 24 }, - }, - wrapperCol: { - sm: { span: 24 }, - } + labelCol: { + xs: { span: 24 }, + }, + wrapperCol: { + sm: { span: 24 }, + }, }; const InputWrapper = styled.div` - width: 20rem; - padding: 2rem; - text-align: center; + width: 20rem; + padding: 2rem; + text-align: center; + @media (max-width: 768px) { + width: 75%; + } + @media (max-width: 550px) { + width: 90%; + } `; const Title = styled.h2` - font-size: 1.8rem; - margin-bottom: 1.5rem; + font-size: 1.8rem; + margin-bottom: 1.5rem; `; const StyledForm = styled(Form)` - .ant-form-item { - margin-bottom: 0.5rem; /* Ajustez la valeur selon vos besoins */ - } + .ant-form-item { + margin-bottom: 0.5rem; /* Ajustez la valeur selon vos besoins */ + } `; const StyledInput = styled(Input)` - &.ant-input-affix-wrapper { - border-radius: 8px; - margin: 0.5rem 0; - } + &.ant-input-affix-wrapper { + border-radius: 8px; + margin: 0.5rem 0; + } `; const StyledPasswordInput = styled(Input.Password)` - &.ant-input-password { - border-radius: 8px; - margin: 0.5rem 0; - } + &.ant-input-password { + border-radius: 8px; + margin: 0.5rem 0; + } `; const StyledButton = styled(Button)` - width: 100%; - border-radius: 8px; - background-color: orange; - border: none; + width: 100%; + border-radius: 8px; + background-color: orange; + border: none; `; const SignInText = styled.p` - margin-top: 1rem; + margin-top: 1rem; `; const SignInLink = styled.a` - color: #4A90E2; + color: #4a90e2; `; const StyledCheckbox = styled.div` - display: flex; - align-items: flex-start; - margin-top: 1rem; - margin-bottom: 1rem; - text-align: justify; + display: flex; + align-items: flex-start; + margin-top: 1rem; + margin-bottom: 1rem; + text-align: justify; `; export default SignUp; diff --git a/frontend/src/pages/AccessPage.tsx b/frontend/src/pages/AccessPage.tsx index c716fed..f278bbc 100644 --- a/frontend/src/pages/AccessPage.tsx +++ b/frontend/src/pages/AccessPage.tsx @@ -18,7 +18,7 @@ const AccessPage: FC = () => { const AccessPageWrapper = styled.div` background: #0a0025; width: 100%; - height: 100vh; + height: 80vh; display: flex; justify-content: center; align-items: center; diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx index 740204d..8f81317 100644 --- a/frontend/src/pages/LandingPage.tsx +++ b/frontend/src/pages/LandingPage.tsx @@ -255,6 +255,9 @@ const SuggestionText = styled.p` color: whitesmoke; font-size: 20px; font-weight: 200; + @media (max-width: 768px) { + font-size: calc(10px + 2px + 0vmin); + } `; const SuggestionsWrapper = styled.div` @@ -262,12 +265,20 @@ const SuggestionsWrapper = styled.div` justify-content: center; align-items: center; gap: 10px; + + @media screen and (max-width: 768px) { + flex-direction: column; + } `; const Title = styled.h1` font-size: 70px; color: whitesmoke; font-weight: 500; + @media (max-width: 768px) { + max-width: 80%; + font-size: 3.5rem; + } `; const CardsWrapper = styled.div` @@ -275,31 +286,41 @@ const CardsWrapper = styled.div` justify-content: center; align-items: center; gap: 50px; + max-width: 100%; + @media (max-width: 768px) { + flex-direction: column; + margin: 0 30px; + } `; const LandingPageWrapper = styled.div` background: #0a0025; width: 100%; - height: 100vh; + height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 20px; - padding: 20px; `; const FormContainer = styled.div<{ background?: string }>` background: ${({ background }) => (background ? background : "#7b5c8a")}; - padding: 18px; + padding: 18px 40px; border-radius: 20px; text-align: center; width: 500px; + flex: 1 1 45%; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 580px; + box-sizing: border-box; + @media (max-width: 768px) { + width: 100%; + height: 100%; + } `; const UploadTitle = styled.h2` diff --git a/frontend/src/pages/PricingPage.tsx b/frontend/src/pages/PricingPage.tsx index 8d48abf..ccd83f4 100644 --- a/frontend/src/pages/PricingPage.tsx +++ b/frontend/src/pages/PricingPage.tsx @@ -1,22 +1,36 @@ import styled from "@emotion/styled"; -import {Button, Card} from 'antd' +import { Button, Card } from "antd"; -const {Meta} = Card +const { Meta } = Card; interface CardContent { - title: string, - description: string - price: number, - suggested: boolean + title: string; + description: string; + price: number; + suggested: boolean; } const PricingPage = () => { - const cardsContent: CardContent[] = [ - {title: 'Free', description: 'Il faut décrire le plan', price: 0, suggested: false}, - {title: 'Premium', description: 'Encore une description', price: 10, suggested: true}, - {title: 'Ultimate', description: 'Description du plan Ultimate', price: 1424, suggested: false} - ] + { + title: "Free", + description: "Il faut décrire le plan", + price: 0, + suggested: false, + }, + { + title: "Premium", + description: "Encore une description", + price: 10, + suggested: true, + }, + { + title: "Ultimate", + description: "Description du plan Ultimate", + price: 1424, + suggested: false, + }, + ]; return ( @@ -27,55 +41,56 @@ const PricingPage = () => { key={index} style={{ width: 300, - border: plan.suggested ? '5px solid rgba(231,166,26,1)' : 'none' + border: plan.suggested + ? "5px solid rgba(231,166,26,1)" + : "none", }} - actions={[ - - ]} - title={ - {plan.title} - } + actions={[]} + title={{plan.title}} extra={`$${plan.price}/month`} > ))} - ) -} + ); +}; const CardTitle = styled.h3` - font-size: 27px; -` + font-size: 27px; +`; const CardsContainer = styled.div` - width: 80%; - height: 500px; - display: flex; - justify-content: space-around; - gap: 20px; - align-items: center; -` + width: 100%; + height: 500px; + display: flex; + gap: 20px; + align-items: center; + justify-content: center; + flex-wrap: wrap; + @media (max-width: 947px) { + margin-top: 20px + } +`; export const PricingTitle = styled.h3` - font-size: 30px; - color: white; -` + font-size: 30px; + color: white; +`; const PricingPageWrapper = styled.div` - position: relative; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 40px; -` + position: relative; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 40px; +`; -export default PricingPage \ No newline at end of file +export default PricingPage; diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx index 1cd59fe..56635d6 100644 --- a/frontend/src/pages/SettingsPage.tsx +++ b/frontend/src/pages/SettingsPage.tsx @@ -8,7 +8,7 @@ const SettingsPage: FC = () => { } const SettingsPageWrapper = styled.div` - height: 100vh; + height: 80vh; width: 100%; background: red; `