From e15948b34d3aa6801c92113a99af5876010a2e30 Mon Sep 17 00:00:00 2001 From: Nikita Date: Fri, 15 Sep 2023 14:15:59 +0300 Subject: [PATCH 01/16] sth done --- package-lock.json | 68 ++- package.json | 3 + src/components/ParamsForm/ParamsForm.jsx | 479 ++++++++++++++++++ .../ParamsForm/ParamsForm.styled.jsx | 169 ++++++ .../SharedLayout/SheradLayout.styled.jsx | 2 +- src/index.css | 10 + src/pages/Home/Home.jsx | 15 +- 7 files changed, 718 insertions(+), 28 deletions(-) create mode 100644 src/components/ParamsForm/ParamsForm.jsx create mode 100644 src/components/ParamsForm/ParamsForm.styled.jsx diff --git a/package-lock.json b/package-lock.json index d439b6dd..c17d4c04 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,12 +10,14 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@mui/material": "^5.14.9", "@mui/x-date-pickers": "^6.13.0", "@reduxjs/toolkit": "^1.9.5", "@table-library/react-table-library": "^4.1.7", "@vitejs/plugin-react-swc": "^3.3.2", "axios": "^1.5.0", "formik": "^2.4.4", + "modern-normalize": "^2.0.0", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -23,6 +25,7 @@ "react-router-dom": "^6.15.0", "redux-persist": "^6.0.0", "styled-components": "^6.0.7", + "swiper": "^10.2.0", "yup": "^1.2.0" }, "devDependencies": { @@ -2535,7 +2538,6 @@ "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.9.tgz", "integrity": "sha512-JAU/R5hM3l2zP1Q4KnioDRhq5V3vZ4mmjEZ+TwARDb2xFhg3p59McacQuzkSu0sUHJnH9aJos36+hU5sPQBcFQ==", - "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/mui" @@ -2545,7 +2547,6 @@ "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.9.tgz", "integrity": "sha512-pbBy5kc5iUGXPxgbb+t+yEPvLK5nE3bPUb8WbAafJ8iZ40ZGui0xC4xiiIyzbVexzsLmyN7MaSo4LkxLmPKqUQ==", - "peer": true, "dependencies": { "@babel/runtime": "^7.22.15", "@mui/base": "5.0.0-beta.15", @@ -2590,7 +2591,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", - "peer": true, "engines": { "node": ">=6" } @@ -2598,14 +2598,12 @@ "node_modules/@mui/material/node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", - "peer": true + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, "node_modules/@mui/private-theming": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.9.tgz", "integrity": "sha512-0PzoUFqFXTXiNchhR7K4b7kZunasPOjx6Qf7AagCmfZDNASHedA0x6evHVhnST918x/AHY9xykYNKfB0Z4xMBg==", - "peer": true, "dependencies": { "@babel/runtime": "^7.22.15", "@mui/utils": "^5.14.9", @@ -2632,7 +2630,6 @@ "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.9.tgz", "integrity": "sha512-LEQxLrW9oWvea33pge08+oyNeTz704jb6Nhe26xEJKojXWd34Rr327Zzx3dmo70AcS4h0b99vQjEpUzm6ASqUw==", - "peer": true, "dependencies": { "@babel/runtime": "^7.22.15", "@emotion/cache": "^11.11.0", @@ -2665,7 +2662,6 @@ "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.9.tgz", "integrity": "sha512-Z00Wj590QXk5+SIxmxayBo7SWrao+y433LKGChneJxO4QcT/caSCeEWtyeoLs1Q8ys0zOzl2kkKee6n8TaKzhQ==", - "peer": true, "dependencies": { "@babel/runtime": "^7.22.15", "@mui/private-theming": "^5.14.9", @@ -2705,7 +2701,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", - "peer": true, "engines": { "node": ">=6" } @@ -5713,6 +5708,17 @@ "node": "*" } }, + "node_modules/modern-normalize": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-2.0.0.tgz", + "integrity": "sha512-CxBoEVKh5U4DH3XuNbc5ONLF6dQBc8dSc7pdZ1957FGbIO5JBqGqqchhET9dTexri8/pk9xBL6+5ceOtCIp1QA==", + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -6987,6 +6993,24 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/swiper": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.2.0.tgz", + "integrity": "sha512-nktQsOtBInJjr3f5DicxC8eHYGcLXDVIGPSon0QoXRaO6NjKnATCbQ8SZsD3dN1Ph1RH4EhVPwSYCcuDRFWHGQ==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -9066,14 +9090,12 @@ "@mui/core-downloads-tracker": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.9.tgz", - "integrity": "sha512-JAU/R5hM3l2zP1Q4KnioDRhq5V3vZ4mmjEZ+TwARDb2xFhg3p59McacQuzkSu0sUHJnH9aJos36+hU5sPQBcFQ==", - "peer": true + "integrity": "sha512-JAU/R5hM3l2zP1Q4KnioDRhq5V3vZ4mmjEZ+TwARDb2xFhg3p59McacQuzkSu0sUHJnH9aJos36+hU5sPQBcFQ==" }, "@mui/material": { "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.9.tgz", "integrity": "sha512-pbBy5kc5iUGXPxgbb+t+yEPvLK5nE3bPUb8WbAafJ8iZ40ZGui0xC4xiiIyzbVexzsLmyN7MaSo4LkxLmPKqUQ==", - "peer": true, "requires": { "@babel/runtime": "^7.22.15", "@mui/base": "5.0.0-beta.15", @@ -9092,14 +9114,12 @@ "clsx": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", - "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", - "peer": true + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==" }, "react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", - "peer": true + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" } } }, @@ -9107,7 +9127,6 @@ "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.9.tgz", "integrity": "sha512-0PzoUFqFXTXiNchhR7K4b7kZunasPOjx6Qf7AagCmfZDNASHedA0x6evHVhnST918x/AHY9xykYNKfB0Z4xMBg==", - "peer": true, "requires": { "@babel/runtime": "^7.22.15", "@mui/utils": "^5.14.9", @@ -9118,7 +9137,6 @@ "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.9.tgz", "integrity": "sha512-LEQxLrW9oWvea33pge08+oyNeTz704jb6Nhe26xEJKojXWd34Rr327Zzx3dmo70AcS4h0b99vQjEpUzm6ASqUw==", - "peer": true, "requires": { "@babel/runtime": "^7.22.15", "@emotion/cache": "^11.11.0", @@ -9131,7 +9149,6 @@ "version": "5.14.9", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.9.tgz", "integrity": "sha512-Z00Wj590QXk5+SIxmxayBo7SWrao+y433LKGChneJxO4QcT/caSCeEWtyeoLs1Q8ys0zOzl2kkKee6n8TaKzhQ==", - "peer": true, "requires": { "@babel/runtime": "^7.22.15", "@mui/private-theming": "^5.14.9", @@ -9146,8 +9163,7 @@ "clsx": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", - "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", - "peer": true + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==" } } }, @@ -11221,6 +11237,11 @@ "brace-expansion": "^1.1.7" } }, + "modern-normalize": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-2.0.0.tgz", + "integrity": "sha512-CxBoEVKh5U4DH3XuNbc5ONLF6dQBc8dSc7pdZ1957FGbIO5JBqGqqchhET9dTexri8/pk9xBL6+5ceOtCIp1QA==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -12086,6 +12107,11 @@ "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" }, + "swiper": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-10.2.0.tgz", + "integrity": "sha512-nktQsOtBInJjr3f5DicxC8eHYGcLXDVIGPSon0QoXRaO6NjKnATCbQ8SZsD3dN1Ph1RH4EhVPwSYCcuDRFWHGQ==" + }, "text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", diff --git a/package.json b/package.json index cccdaddb..67218cfb 100644 --- a/package.json +++ b/package.json @@ -13,12 +13,14 @@ "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@mui/material": "^5.14.9", "@mui/x-date-pickers": "^6.13.0", "@reduxjs/toolkit": "^1.9.5", "@table-library/react-table-library": "^4.1.7", "@vitejs/plugin-react-swc": "^3.3.2", "axios": "^1.5.0", "formik": "^2.4.4", + "modern-normalize": "^2.0.0", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -26,6 +28,7 @@ "react-router-dom": "^6.15.0", "redux-persist": "^6.0.0", "styled-components": "^6.0.7", + "swiper": "^10.2.0", "yup": "^1.2.0" }, "devDependencies": { diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx new file mode 100644 index 00000000..5dde9d45 --- /dev/null +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -0,0 +1,479 @@ +import { Formik, Form } from 'formik'; +import { useState } from 'react'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; + +import { + Page, + Logo, + FormikField, + Title, + Text, + InputGroup, + FormRadioBtnGroupWrapper, + BtnNav, + BlockVideo, + BlockOrange, + BtnsAndBlock, + BtnSubmit, + ProgressBar, + BarItem, +} from './ParamsForm.styled'; + +import { colors as palette } from '../../utils'; + +import img from '../../assets/images/params-step1_mobile_1x.jpg'; +import img2 from '../../assets/images/params-step1_mobile_1x.jpg'; +import img3 from '../../assets/images/params-step1_mobile_1x.jpg'; + +import { + FormControl, + FormLabel, + FormControlLabel, + RadioGroup, + Radio, + colors, +} from '@mui/material'; + +export const ParamsForm = () => { + const [swiperRef, setSwiperRef] = useState(null); + const [steps, setSteps] = useState(1); + + const slideTo = index => { + swiperRef.slideTo(index - 1, 0); + }; + + return ( + + PowerPulse + + { + console.log(values); + }} + > + {({ handleChange }) => ( +
+ + + Get closer to your goals + + To ensure a personalized user experience and the proper + functioning of our platform, we ask you to provide the + following information about your weight, height and other + relevant data: + + + + + + + + + { + slideTo(2); + setSteps(2); + }} + > + Next + + + + + + + + + Get closer to your goals! + + + + + + + Blood: + + + + } + label="1" + /> + + } + label="2" + /> + + } + label="3" + /> + + } + label="4" + /> + + + + Sex: + + + + } + label="male" + /> + + } + label="female" + /> + + + + + + Level: + + + + } + label="Sedentary lifestyle (little or no physical activity)" + /> + + + } + label="Light activity (light exercises/sports 1-3 days per + week)" + /> + + + } + label=" Moderately active (moderate exercises/sports 3-5 days + per week)" + /> + + + } + label="Very active (intense exercises/sports 6-7 days per week)" + /> + + + } + label="Extremely active (very strenuous exercises/sports and + physical work)" + /> + + + + + { + slideTo(1); + setSteps(1); + }} + > + Back + + + { + slideTo(3); + setSteps(3); + }} + > + Next + + + + + + + + + Dear user + + Thank you for filling in all the required data. We greatly + appreciate your cooperation and commitment to a healthy + lifestyle. The collected information will allow us to provide + you with a more individual and personalized approach. + + + Go + { + slideTo(2); + setSteps(2); + }} + > + Back + + + + + + +
+ )} + + + + = 1 && '#ef8964', + boxShadow: steps >= 1 && `0px 1px 10px 0px rgba(230, 83, 60, 0.8)`, + }} + > + = 2 && steps > 1 && '#ef8964', + boxShadow: + steps >= 2 && + steps > 1 && + `0px 1px 10px 0px rgba(230, 83, 60, 0.8)`, + }} + > + + + + ); +}; diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx new file mode 100644 index 00000000..6a13f805 --- /dev/null +++ b/src/components/ParamsForm/ParamsForm.styled.jsx @@ -0,0 +1,169 @@ +import styled from 'styled-components'; +import { Field } from 'formik'; + +import { colors, mq } from '../../utils'; + +export const Page = styled.div` + ${mq.smallMobile} { + padding: 20px; + + background-color: ${colors.black}; + + ${ + '' /* background: linear-gradient(168deg, #040404 14.75%, rgba(4, 4, 4, 0) 52.97%), + linear-gradient(73deg, #040404 6.11%, rgba(4, 4, 4, 0) 66.68%), url(${img}); */ + } + + background-repeat: no-repeat; + background-position: 100% 100%; + } +`; + +export const Logo = styled.div` + ${mq.smallMobile} { + width: 100px; + + margin-bottom: 90px; + height: 15px; + color: ${colors.white}; + } +`; + +export const Title = styled.h1` + ${mq.smallMobile} { + font-size: 24px; + font-weight: 700; + line-height: 116.667%; /* 116.667% */ + + margin-bottom: 14px; + color: ${colors.white}; + } +`; + +export const Text = styled.p` + ${mq.smallMobile} { + font-size: 14px; + font-weight: 400; + line-height: 128%; /* 128.571% */ + + color: ${colors.textWhite03}; + } +`; + +export const InputGroup = styled.div` + ${mq.smallMobile} { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + + margin: -7px; + margin-bottom: 30px; + } +`; + +export const FormikField = styled(Field)` + ${mq.smallMobile} { + width: 155px; + padding: 14px 0 14px 14px; + margin: 7px; + + font-size: 14px; + + border: 1px solid rgba(239, 237, 232, 0.3); + border-radius: 12px; + outline: none; + + background-color: transparent; + color: ${colors.textWhite06}; + + &::placeholder { + color: ${colors.textWhite06}; + } + + &:focus-within { + border-color: ${colors.orange}; + } + } +`; + +export const BtnNav = styled.button` + ${mq.smallMobile} { + color: ${colors.white}; + + font-size: 14px; + font-weight: 400; + line-height: 128%; /* 128.571% */ + + background: transparent; + border: none; + outline: none; + } +`; + +export const FormRadioBtnGroupWrapper = styled.div` + ${mq.smallMobile} { + display: flex; + margin-bottom: 28px; + } +`; + +export const BlockVideo = styled.div` + ${mq.smallMobile} { + width: 146px; + height: 66px; + + background: #303030; + + border-radius: 12px; + } +`; + +export const BlockOrange = styled.div` + ${mq.smallMobile} { + width: 119px; + height: 76px; + + border-radius: 12px; + background: #ef8964; + } +`; + +export const BtnsAndBlock = styled.div` + display: flex; + align-items: flex-start; + margin-bottom: 25px; +`; + +export const ProgressBar = styled.div` + ${mq.smallMobile} { + display: flex; + justify-content: space-around; + width: 178px; + height: 4px; + margin-top: auto; + } +`; + +export const BarItem = styled.div` + ${mq.smallMobile} { + width: 50px; + height: 4px; + border-radius: 2px; + + background: #303030; + } +`; + +export const BtnSubmit = styled.button` + padding: 12px 40px; + + font-size: 16px; + font-weight: 500; + line-height: 112.5%; /* 112.5% */ + + color: ${colors.white}; + background: ${colors.orange}; + + border: none; + border-radius: 12px; +`; diff --git a/src/components/SharedLayout/SheradLayout.styled.jsx b/src/components/SharedLayout/SheradLayout.styled.jsx index caeb47ad..c0900477 100644 --- a/src/components/SharedLayout/SheradLayout.styled.jsx +++ b/src/components/SharedLayout/SheradLayout.styled.jsx @@ -4,7 +4,7 @@ import { mq } from '../../utils'; export const Container = styled.div` margin: 0px auto; - padding: 0px 20px; + ${'' /* padding: 0px 20px; */} ${mq.mobile} { width: 375px; diff --git a/src/index.css b/src/index.css index e3147441..d6bde664 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,4 @@ +@import 'node_modules/modern-normalize/modern-normalize.css'; @font-face { font-family: 'Roboto'; font-weight: 400; @@ -20,6 +21,7 @@ url('assets/fonts/roboto-bold-webfont.woff2') format('woff2'), url('assets/fonts/roboto-bold-webfont.woff') format('woff'); } + body { background-color: white; background-size: auto 100%; @@ -55,3 +57,11 @@ img { button { cursor: pointer; } + +.css-j204z7-MuiFormControlLabel-root .MuiFormControlLabel-label { + color: #efede8; + font-family: Roboto; + font-size: 14px; + font-weight: 400; + line-height: 128%; /* 128.571% */ +} diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx index 72ccdfd2..b79965dc 100644 --- a/src/pages/Home/Home.jsx +++ b/src/pages/Home/Home.jsx @@ -1,15 +1,18 @@ +import { ParamsForm } from '../../components/ParamsForm/ParamsForm'; const Home = () => { return ( - <> -

Welcome!

-

+ //

Welcome!

+ /*

This is my very first React application with the usage of Redux and some - other libraries. It's a simple app when you can save your contacts in + other libraries.It's a simple app when you can save your contacts in one place, delete them, or edit them. It has the functionality of registration, login and logout of users. -

- +

*/ + + // + + ); }; From 2f7d8a8f989475a0a3adf54fa7e49875ddd6f9c8 Mon Sep 17 00:00:00 2001 From: Nikita Date: Fri, 15 Sep 2023 14:20:50 +0300 Subject: [PATCH 02/16] fix --- src/pages/Home/Home.jsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx index b79965dc..23c0ea53 100644 --- a/src/pages/Home/Home.jsx +++ b/src/pages/Home/Home.jsx @@ -1,18 +1,14 @@ -import { ParamsForm } from '../../components/ParamsForm/ParamsForm'; - const Home = () => { return ( - //

Welcome!

- /*

+ <> +

Welcome!

+

This is my very first React application with the usage of Redux and some - other libraries.It's a simple app when you can save your contacts in + other libraries. Its a simple app when you can save your contacts in one place, delete them, or edit them. It has the functionality of registration, login and logout of users. -

*/ - - // - - +

+ ); }; From f3234a3b748cb6c85bddbc37a1271a6117d31ea6 Mon Sep 17 00:00:00 2001 From: Nikita Date: Sat, 16 Sep 2023 00:19:09 +0300 Subject: [PATCH 03/16] some changes --- src/components/ParamsBlocks/ParamsBlocks.jsx | 73 +++++++++++++++++++ .../ParamsBlocks/ParamsBlocks.styled.jsx | 64 ++++++++++++++++ src/components/ParamsForm/ParamsForm.jsx | 44 +++++++++-- .../ParamsForm/ParamsForm.styled.jsx | 30 -------- .../SharedLayout/SheradLayout.styled.jsx | 4 - src/index.css | 2 +- src/pages/Home/Home.jsx | 16 ++-- 7 files changed, 185 insertions(+), 48 deletions(-) diff --git a/src/components/ParamsBlocks/ParamsBlocks.jsx b/src/components/ParamsBlocks/ParamsBlocks.jsx index 8b137891..35a74fe9 100644 --- a/src/components/ParamsBlocks/ParamsBlocks.jsx +++ b/src/components/ParamsBlocks/ParamsBlocks.jsx @@ -1 +1,74 @@ +import { BlockVideoCard, BlockOrangeCard } from './ParamsBlocks.styled'; +import PropTypes from 'prop-types'; +const ParamsBlockCard = ({ + type, + mt_m, + mr_m, + mb_m, + ml_m, + mt_t, + mr_t, + mb_t, + ml_t, + mt_d, + mr_d, + mb_d, + ml_d, +}) => { + if (type === 'video') { + return ( + + ); + } + + if (type === 'users') { + return ( + + ); + } +}; + +ParamsBlockCard.propTypes = { + type: PropTypes.string, + mt_m: PropTypes.string, + mr_m: PropTypes.string, + mb_m: PropTypes.string, + ml_m: PropTypes.string, + mt_t: PropTypes.string, + mr_t: PropTypes.string, + mb_t: PropTypes.string, + ml_t: PropTypes.string, + mt_d: PropTypes.string, + mr_d: PropTypes.string, + mb_d: PropTypes.string, + ml_d: PropTypes.string, +}; + +export default ParamsBlockCard; diff --git a/src/components/ParamsBlocks/ParamsBlocks.styled.jsx b/src/components/ParamsBlocks/ParamsBlocks.styled.jsx index 8b137891..7d05966d 100644 --- a/src/components/ParamsBlocks/ParamsBlocks.styled.jsx +++ b/src/components/ParamsBlocks/ParamsBlocks.styled.jsx @@ -1 +1,65 @@ +import styled from '@emotion/styled'; +import { mq, colors } from '../../utils'; +export const BlockVideoCard = styled.div` + ${mq.smallMobile} { + width: 146px; + height: 66px; + + margin-top: ${props => props.mt_m}; + margin-right: ${props => props.mr_m}; + margin-bottom: ${props => props.mb_m}; + margin-left: ${props => props.ml_m}; + background: #303030; + + border-radius: 12px; + } + + ${mq.tablet} { + margin-top: ${props => props.mt_t}; + margin-right: ${props => props.mr_t}; + margin-bottom: ${props => props.mb_t}; + margin-left: ${props => props.ml_t}; + + width: 206px; + height: 96px; + } + + ${mq.desktop} { + margin-top: ${props => props.mt_d}; + margin-right: ${props => props.mr_d}; + margin-bottom: ${props => props.mb_d}; + margin-left: ${props => props.ml_d}; + } +`; + +export const BlockOrangeCard = styled.div` + ${mq.smallMobile} { + width: 119px; + height: 76px; + + margin-top: ${props => props.mt_m}; + margin-right: ${props => props.mr_m}; + margin-bottom: ${props => props.mb_m}; + margin-left: ${props => props.ml_m}; + + border-radius: 12px; + background: ${colors.orangeSecondary}; + } + ${mq.tablet} { + width: 180px; + height: 110px; + + margin-top: ${props => props.mt_t}; + margin-right: ${props => props.mr_t}; + margin-bottom: ${props => props.mb_t}; + margin-left: ${props => props.ml_t}; + } + + ${mq.desktop} { + margin-top: ${props => props.mt_d}; + margin-right: ${props => props.mr_d}; + margin-bottom: ${props => props.mb_d}; + margin-left: ${props => props.ml_d}; + } +`; diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index 93aa5612..d5f45962 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -42,12 +42,12 @@ const ParamsForm = () => { return ( PowerPulse @@ -112,7 +112,22 @@ const ParamsForm = () => { Next - + {/* */} + + {/* */} @@ -415,7 +430,22 @@ const ParamsForm = () => { > Next + + {/* */} + + {/* */} Dear user diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx index 0fa8ef0f..0b8ed8f6 100644 --- a/src/components/ParamsForm/ParamsForm.styled.jsx +++ b/src/components/ParamsForm/ParamsForm.styled.jsx @@ -144,36 +144,6 @@ export const FormRadioBtnGroupWrapper = styled.div` } `; -export const BlockVideo = styled.div` - ${mq.smallMobile} { - width: 146px; - height: 66px; - - background: #303030; - - border-radius: 12px; - } - - ${mq.tablet} { - width: 206px; - height: 96px; - } -`; - -export const BlockOrange = styled.div` - ${mq.smallMobile} { - width: 119px; - height: 76px; - - border-radius: 12px; - background: #ef8964; - } - ${mq.tablet} { - width: 180px; - height: 110px; - } -`; - export const BtnsAndBlock = styled.div` display: flex; align-items: flex-start; diff --git a/src/components/SharedLayout/SheradLayout.styled.jsx b/src/components/SharedLayout/SheradLayout.styled.jsx index 2d65bb95..191229b1 100644 --- a/src/components/SharedLayout/SheradLayout.styled.jsx +++ b/src/components/SharedLayout/SheradLayout.styled.jsx @@ -4,11 +4,7 @@ import { mq } from '../../utils'; export const Container = styled.div` margin: 0px auto; -<<<<<<< HEAD - ${'' /* padding: 0px 20px; */} -======= /* padding: 0px 20px; */ ->>>>>>> b94d9e5c88781d81600eab0619228ebb91807f8d ${mq.mobile} { width: 375px; diff --git a/src/index.css b/src/index.css index 2eb11ca0..08026a6d 100644 --- a/src/index.css +++ b/src/index.css @@ -60,7 +60,7 @@ button { cursor: pointer; } -.css-j204z7-MuiFormControlLabel-root .MuiFormControlLabel-label { +.MuiFormControlLabel-label { color: #efede8; font-size: 14px; font-weight: 400; diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx index c3bb846a..42ac8ddb 100644 --- a/src/pages/Home/Home.jsx +++ b/src/pages/Home/Home.jsx @@ -1,12 +1,14 @@ -import CustomNavLink from "../../components/CustomNavLink/CustomNavLink"; -import MainTitle from "../../components/MainTitle/MainTitle"; -import Header from "../../components/headersComp/Header/Header"; -import { LinkList, Wrapper } from "./Home.styled"; +import ParamsForm from '../../components/ParamsForm/ParamsForm'; + +// import CustomNavLink from '../../components/CustomNavLink/CustomNavLink'; +// import MainTitle from '../../components/MainTitle/MainTitle'; +// import Header from '../../components/headersComp/Header/Header'; +// import { LinkList, Wrapper } from './Home.styled'; const Home = () => { return ( <> - + {/*
@@ -17,7 +19,9 @@ const Home = () => { - + */} + + ); }; From dbf61f62f2e1bb2b91c54c258453aa3b67348162 Mon Sep 17 00:00:00 2001 From: Nikita Date: Sat, 16 Sep 2023 20:01:11 +0300 Subject: [PATCH 04/16] desktop some updates --- src/components/ParamsBlocks/ParamsBlocks.jsx | 47 +++++- .../ParamsBlocks/ParamsBlocks.styled.jsx | 137 +++++++++++++++++- src/components/ParamsForm/ParamsForm.jsx | 72 +++++---- .../ParamsForm/ParamsForm.styled.jsx | 43 ++++-- 4 files changed, 255 insertions(+), 44 deletions(-) diff --git a/src/components/ParamsBlocks/ParamsBlocks.jsx b/src/components/ParamsBlocks/ParamsBlocks.jsx index 35a74fe9..17f71c0a 100644 --- a/src/components/ParamsBlocks/ParamsBlocks.jsx +++ b/src/components/ParamsBlocks/ParamsBlocks.jsx @@ -1,7 +1,19 @@ -import { BlockVideoCard, BlockOrangeCard } from './ParamsBlocks.styled'; +import { + GreyCard, + GreySvgWrapper, + GreyTextWrapper, + GreyDynamicText, + GreyStaticText, + OrangeCard, + OrangeSvgWrapper, + OrangeTextWrapper, + OrangeDynamicText, + OrangeStaticText, +} from './ParamsBlocks.styled'; import PropTypes from 'prop-types'; const ParamsBlockCard = ({ + data, type, mt_m, mr_m, @@ -16,9 +28,9 @@ const ParamsBlockCard = ({ mb_d, ml_d, }) => { - if (type === 'video') { + if (type === 'grey') { return ( - + > + + + + + + + {data}+ + Video tutorial + + ); } - if (type === 'users') { + if (type === 'orange') { return ( - + > + + + + + + + {data} + ex + + ); } }; ParamsBlockCard.propTypes = { + data: PropTypes.number, type: PropTypes.string, mt_m: PropTypes.string, mr_m: PropTypes.string, diff --git a/src/components/ParamsBlocks/ParamsBlocks.styled.jsx b/src/components/ParamsBlocks/ParamsBlocks.styled.jsx index 7d05966d..92e74649 100644 --- a/src/components/ParamsBlocks/ParamsBlocks.styled.jsx +++ b/src/components/ParamsBlocks/ParamsBlocks.styled.jsx @@ -1,7 +1,11 @@ import styled from '@emotion/styled'; import { mq, colors } from '../../utils'; -export const BlockVideoCard = styled.div` +export const GreyCard = styled.div` + display: flex; + justify-content: center; + align-items: center; + ${mq.smallMobile} { width: 146px; height: 66px; @@ -33,8 +37,72 @@ export const BlockVideoCard = styled.div` } `; -export const BlockOrangeCard = styled.div` +export const GreySvgWrapper = styled.div` + ${mq.smallMobile} { + display: flex; + justify-content: center; + align-items: center; + width: 30px; + height: 30px; + margin-right: 8px; + + background: ${colors.orangeSecondary}; + + border-radius: 50%; + } + + ${mq.tablet} { + width: 40px; + height: 40px; + margin-right: 12px; + } +`; + +export const GreySvg = styled.div` + width: 10px; + height: 10px; + fill: ${colors.white}; +`; + +export const GreyTextWrapper = styled.div``; + +export const GreyDynamicText = styled.p` + ${mq.smallMobile} { + margin-bottom: 4px; + + font-size: 16px; + font-weight: 700; + line-height: 112.5%; + + color: ${colors.white}; + } + + ${mq.tablet} { + margin-bottom: 8px; + font-size: 24px; + line-height: 100%; + } +`; + +export const GreyStaticText = styled.p` + ${mq.smallMobile} { + font-size: 12px; + font-weight: 400; + line-height: 133.3%; + + color: rgba(239, 237, 232, 0.65); + } + + ${mq.tablet} { + font-size: 16px; + + line-height: 150%; + } +`; + +export const OrangeCard = styled.div` ${mq.smallMobile} { + padding: 14px 18px; width: 119px; height: 76px; @@ -63,3 +131,68 @@ export const BlockOrangeCard = styled.div` margin-left: ${props => props.ml_d}; } `; + +export const OrangeSvgWrapper = styled.div` + ${mq.smallMobile} { + display: flex; + justify-content: center; + align-items: center; + + width: 20px; + height: 20px; + margin-bottom: 4px; + + background-color: #efa082; + + border-radius: 50%; + } + + ${mq.tablet} { + margin-bottom: 8px; + + width: 24px; + height: 24px; + } +`; + +export const OrangeTextWrapper = styled.div` + display: flex; + align-items: baseline; +`; + +export const OrangeDynamicText = styled.p` + ${mq.smallMobile} { + margin-right: 8px; + + font-size: 24px; + + font-weight: 700; + line-height: 100%; + letter-spacing: -1px; + text-transform: uppercase; + + color: ${colors.white}; + } + + ${mq.tablet} { + margin-right: 11px; + + font-size: 48px; + line-height: 104.167%; + } +`; + +export const OrangeStaticText = styled.p` + ${mq.mobile} { + font-size: 12px; + font-weight: 700; + line-height: 133.33%; + + color: rgba(239, 237, 232, 0.65); + } + + ${mq.tablet} { + font-size: 16px; + line-height: 150%; + } +`; diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index c0e7e0a1..9c8a3864 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -12,9 +12,9 @@ import { } from '@mui/material'; import { colors as palette } from '../../utils'; -import planka from '../../assets/images/params-step1_mobile_1x.jpg'; -import stretch from '../../assets/images/params-step2_mobile_1x.jpg'; -import leg from '../../assets/images/params-step3_mobile_1x.jpg'; +import planka from '../../assets/images/params-step1_desktop_1x.jpg'; +import stretch from '../../assets/images/params-step2_desktop_1x.jpg'; +import leg from '../../assets/images/params-step3_desktop_1x.jpg'; import { Page, Logo, @@ -29,9 +29,11 @@ import { BarItem, } from './ParamsForm.styled'; -import ParamsBlockCard from '../ParamsBlocks/ParamsBlocks'; +// import ParamsBlockCard from '../ParamsBlocks/ParamsBlocks'; import ParamsText from '../ParamsText/ParamsText'; +export const steps = 1; + const ParamsForm = () => { const [swiperRef, setSwiperRef] = useState(null); const [steps, setSteps] = useState(1); @@ -57,12 +59,18 @@ const ParamsForm = () => { currentWeight: '', desiredWeight: '', birthday: '', + blood: '', + sex: '', + levelActivity: '', }} - onSubmit={values => { + onSubmit={(values, Formik) => { console.log(values); + Formik.resetForm(); + setSteps(1); + slideTo(1); }} > - {({ handleChange }) => ( + {({ handleChange, values }) => (
{ name="height" placeholder="Height" autoComplete="off" + value={values.height} /> { Next - + /> */} @@ -139,8 +152,7 @@ const ParamsForm = () => { { { { Next - + ml_d="580px" + mt_d="-300px" + /> */} - + mt_d={'-260px'} + mb_d={'142px'} + /> */} Dear user @@ -467,16 +483,20 @@ const ParamsForm = () => { Back - - + */}
diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx index 8c4b3290..5ea07174 100644 --- a/src/components/ParamsForm/ParamsForm.styled.jsx +++ b/src/components/ParamsForm/ParamsForm.styled.jsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; import { Field } from 'formik'; +// import { steps } from './ParamsForm'; import { colors, mq } from '../../utils'; @@ -18,6 +19,10 @@ export const Page = styled.div` ${mq.tablet} { padding: 32px; } + + ${mq.desktop} { + padding: 32px 32px 32px 96px; + } `; export const Logo = styled.div` @@ -32,6 +37,10 @@ export const Logo = styled.div` ${mq.tablet} { margin-bottom: 140px; } + + ${mq.desktop} { + margin-bottom: 151px; + } `; export const Title = styled.h1` @@ -65,8 +74,8 @@ export const InputGroup = styled.div` ${mq.tablet} { justify-content: flex-start; - margin-bottom: 32px; width: 527px; + margin-bottom: 32px; } `; @@ -77,6 +86,7 @@ export const FormikField = styled(Field)` margin: 7px; font-size: 14px; + line-height: 128.571%; /* 128.571% */ border: 1px solid rgba(239, 237, 232, 0.3); border-radius: 12px; @@ -98,6 +108,7 @@ export const FormikField = styled(Field)` ${mq.tablet} { font-size: 16px; + line-height: 150%; } `; @@ -128,6 +139,10 @@ export const FormRadioBtnGroupWrapper = styled.div` display: flex; margin-bottom: 28px; } + + ${mq.tablet} { + margin-bottom: 32px; + } `; export const BtnsAndBlock = styled.div` @@ -142,17 +157,27 @@ export const BtnsAndBlock = styled.div` `; export const BtnSubmit = styled.button` - padding: 12px 40px; + ${mq.smallMobile} { + margin-right: 16px; + padding: 12px 40px; + + font-size: 16px; + font-weight: 500; + line-height: 112.5%; /* 112.5% */ + + color: ${colors.white}; + background: ${colors.orange}; - font-size: 16px; - font-weight: 500; - line-height: 112.5%; /* 112.5% */ + border: none; + border-radius: 12px; + } - color: ${colors.white}; - background: ${colors.orange}; + ${mq.tablet} { + padding: 16px 75px; - border: none; - border-radius: 12px; + font-size: 20px; + line-height: 120%; /* 120% */ + } `; export const ProgressBar = styled.div` From 687dec40c34335f1b7037dc46df258997f42a190 Mon Sep 17 00:00:00 2001 From: Nikita Date: Sat, 16 Sep 2023 22:10:13 +0300 Subject: [PATCH 05/16] done bg img --- src/assets/images/imgParamsForm.js | 110 ++++++------ src/components/ParamsForm/ParamsForm.jsx | 55 +++--- .../ParamsForm/ParamsForm.styled.jsx | 159 +++++++++++++++++- .../SharedLayout/SheradLayout.styled.jsx | 2 +- 4 files changed, 233 insertions(+), 93 deletions(-) diff --git a/src/assets/images/imgParamsForm.js b/src/assets/images/imgParamsForm.js index 6261ce93..0059fc90 100644 --- a/src/assets/images/imgParamsForm.js +++ b/src/assets/images/imgParamsForm.js @@ -6,10 +6,9 @@ import imgS2Dx1 from '../images/params-step2_desktop_1x.jpg'; import imgS2Dx2 from '../images/params-step2_desktop_2x.jpg'; import imgS2Dx3 from '../images/params-step2_desktop_3x.jpg'; -import imgS3Dx1 from '../images/params-step1_desktop_1x.jpg'; -import imgS3Dx2 from '../images/params-step1_desktop_2x.jpg'; -import imgS3Dx3 from '../images/params-step1_desktop_3x.jpg'; - +import imgS3Dx1 from '../images/params-step3_desktop_1x.jpg'; +import imgS3Dx2 from '../images/params-step3_desktop_2x.jpg'; +import imgS3Dx3 from '../images/params-step3_desktop_3x.jpg'; import imgS1Tx1 from '../images/params-step1_tablet_1x.jpg'; import imgS1Tx2 from '../images/params-step1_tablet_2x.jpg'; @@ -19,11 +18,9 @@ import imgS2Tx1 from '../images/params-step2_tablet_1x.jpg'; import imgS2Tx2 from '../images/params-step2_tablet_2x.jpg'; import imgS2Tx3 from '../images/params-step2_tablet_3x.jpg'; -import imgS3Tx1 from '../images/params-step1_tablet_1x.jpg'; -import imgS3Tx2 from '../images/params-step1_tablet_2x.jpg'; -import imgS3Tx3 from '../images/params-step1_tablet_3x.jpg'; - - +import imgS3Tx1 from '../images/params-step3_tablet_1x.jpg'; +import imgS3Tx2 from '../images/params-step3_tablet_2x.jpg'; +import imgS3Tx3 from '../images/params-step3_tablet_3x.jpg'; import imgS1Mx1 from '../images/params-step1_mobile_1x.jpg'; import imgS1Mx2 from '../images/params-step1_mobile_2x.jpg'; @@ -33,53 +30,52 @@ import imgS2Mx1 from '../images/params-step2_mobile_1x.jpg'; import imgS2Mx2 from '../images/params-step2_mobile_2x.jpg'; import imgS2Mx3 from '../images/params-step2_mobile_3x.jpg'; -import imgS3Mx1 from '../images/params-step1_mobile_1x.jpg'; -import imgS3Mx2 from '../images/params-step1_mobile_2x.jpg'; -import imgS3Mx3 from '../images/params-step1_mobile_3x.jpg'; - +import imgS3Mx1 from '../images/params-step3_mobile_1x.jpg'; +import imgS3Mx2 from '../images/params-step3_mobile_2x.jpg'; +import imgS3Mx3 from '../images/params-step3_mobile_3x.jpg'; const imgPrmsForm = { - desktop: { - imgS1Dx1, - imgS1Dx2, - imgS1Dx3, - - imgS2Dx1, - imgS2Dx2, - imgS2Dx3, - - imgS3Dx1, - imgS3Dx2, - imgS3Dx3, - }, - - tablet: { - imgS1Tx1, - imgS1Tx2, - imgS1Tx3, - - imgS2Tx1, - imgS2Tx2, - imgS2Tx3, - - imgS3Tx1, - imgS3Tx2, - imgS3Tx3, - }, - - mobile: { - imgS1Mx1, - imgS1Mx2, - imgS1Mx3, - - imgS2Mx1, - imgS2Mx2, - imgS2Mx3, - - imgS3Mx1, - imgS3Mx2, - imgS3Mx3, - } -} - -export default imgPrmsForm \ No newline at end of file + desktop: { + imgS1Dx1, + imgS1Dx2, + imgS1Dx3, + + imgS2Dx1, + imgS2Dx2, + imgS2Dx3, + + imgS3Dx1, + imgS3Dx2, + imgS3Dx3, + }, + + tablet: { + imgS1Tx1, + imgS1Tx2, + imgS1Tx3, + + imgS2Tx1, + imgS2Tx2, + imgS2Tx3, + + imgS3Tx1, + imgS3Tx2, + imgS3Tx3, + }, + + mobile: { + imgS1Mx1, + imgS1Mx2, + imgS1Mx3, + + imgS2Mx1, + imgS2Mx2, + imgS2Mx3, + + imgS3Mx1, + imgS3Mx2, + imgS3Mx3, + }, +}; + +export default imgPrmsForm; diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index 9c8a3864..c944d82a 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -12,9 +12,7 @@ import { } from '@mui/material'; import { colors as palette } from '../../utils'; -import planka from '../../assets/images/params-step1_desktop_1x.jpg'; -import stretch from '../../assets/images/params-step2_desktop_1x.jpg'; -import leg from '../../assets/images/params-step3_desktop_1x.jpg'; + import { Page, Logo, @@ -29,7 +27,7 @@ import { BarItem, } from './ParamsForm.styled'; -// import ParamsBlockCard from '../ParamsBlocks/ParamsBlocks'; +import ParamsBlockCard from '../ParamsBlocks/ParamsBlocks'; import ParamsText from '../ParamsText/ParamsText'; export const steps = 1; @@ -43,14 +41,7 @@ const ParamsForm = () => { }; return ( - + PowerPulse { Next - {/* { ml_m={'auto'} mb_m={'16px'} mb_t={'12px'} - /> */} + /> @@ -440,18 +431,18 @@ const ParamsForm = () => { Next - {/* */} + ml_m={'20px'} + mt_t={'40px'} + ml_t={'165px'} + ml_d={'580px'} + mt_d={'-300px'} + /> - {/* { mb_t={'12px'} mt_d={'-260px'} mb_d={'142px'} - /> */} + /> Dear user @@ -483,7 +474,7 @@ const ParamsForm = () => { Back - {/* { mb_d={'40px'} ml_d={'674px'} /> - */} + diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx index 5ea07174..fd56a571 100644 --- a/src/components/ParamsForm/ParamsForm.styled.jsx +++ b/src/components/ParamsForm/ParamsForm.styled.jsx @@ -1,27 +1,180 @@ import styled from '@emotion/styled'; import { Field } from 'formik'; -// import { steps } from './ParamsForm'; - +import imgPrmsForm from '../../assets/images/imgParamsForm'; import { colors, mq } from '../../utils'; export const Page = styled.div` ${mq.smallMobile} { padding: 20px; - background-color: ${colors.black}; + background-color: black; background: linear-gradient(168deg, #040404 14.75%, rgba(4, 4, 4, 0) 52.97%), linear-gradient(73deg, #040404 6.11%, rgba(4, 4, 4, 0) 66.68%) black; background-repeat: no-repeat; background-position: 100% 100%; + background-size: 289px 571px; + + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.mobile.imgS1Mx1; + } + if (props.steps === 2) { + return imgPrmsForm.mobile.imgS2Mx1; + } + if (props.steps === 3) { + return imgPrmsForm.mobile.imgS3Mx1; + } + }}); + + @media (min-device-pixel-ratio: 2), + (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi), + (min-resolution: 2dppx) { + & { + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.mobile.imgS1Mx2; + } + if (props.steps === 2) { + return imgPrmsForm.mobile.imgS2Mx2; + } + if (props.steps === 3) { + return imgPrmsForm.mobile.imgS3Mx2; + } + }}); + } + } + + @media (min-device-pixel-ratio: 3), + (-webkit-min-device-pixel-ratio: 3), + (min-resolution: 288dpi), + (min-resolution: 3dppx) { + & { + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.mobile.imgS1Mx3; + } + if (props.steps === 2) { + return imgPrmsForm.mobile.imgS2Mx3; + } + if (props.steps === 3) { + return imgPrmsForm.mobile.imgS3Mx3; + } + }}); + } + } } ${mq.tablet} { padding: 32px; + background-size: 488px 835px; + + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.tablet.imgS1Tx1; + } + if (props.steps === 2) { + return imgPrmsForm.tablet.imgS2Tx1; + } + if (props.steps === 3) { + return imgPrmsForm.tablet.imgS3Tx1; + } + }}); + + @media (min-device-pixel-ratio: 2), + (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi), + (min-resolution: 2dppx) { + & { + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.tablet.imgS1Tx2; + } + if (props.steps === 2) { + return imgPrmsForm.tablet.imgS2Tx2; + } + if (props.steps === 3) { + return imgPrmsForm.tablet.imgS3Tx2; + } + }}); + } + } + + @media (min-device-pixel-ratio: 3), + (-webkit-min-device-pixel-ratio: 3), + (min-resolution: 288dpi), + (min-resolution: 3dppx) { + & { + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.tablet.imgS1Tx3; + } + if (props.steps === 2) { + return imgPrmsForm.tablet.imgS2Tx3; + } + if (props.steps === 3) { + return imgPrmsForm.tablet.imgS3Tx3; + } + }}); + } + } } ${mq.desktop} { padding: 32px 32px 32px 96px; + + background-size: 670px 800px; + + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.desktop.imgS1Dx1; + } + if (props.steps === 2) { + return imgPrmsForm.desktop.imgS2Dx1; + } + if (props.steps === 3) { + return imgPrmsForm.desktop.imgS3Dx1; + } + }}); + + @media (min-device-pixel-ratio: 2), + (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi), + (min-resolution: 2dppx) { + & { + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.desktop.imgS1Dx2; + } + if (props.steps === 2) { + return imgPrmsForm.desktop.imgS2Dx2; + } + if (props.steps === 3) { + return imgPrmsForm.desktop.imgS3Dx2; + } + }}); + } + } + + @media (min-device-pixel-ratio: 3), + (-webkit-min-device-pixel-ratio: 3), + (min-resolution: 288dpi), + (min-resolution: 3dppx) { + & { + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.desktop.imgS1Dx3; + } + if (props.steps === 2) { + return imgPrmsForm.desktop.imgS2Dx3; + } + if (props.steps === 3) { + return imgPrmsForm.desktop.imgS3Dx3; + } + }}); + } + } } `; diff --git a/src/components/SharedLayout/SheradLayout.styled.jsx b/src/components/SharedLayout/SheradLayout.styled.jsx index 82f48db5..567a3a23 100644 --- a/src/components/SharedLayout/SheradLayout.styled.jsx +++ b/src/components/SharedLayout/SheradLayout.styled.jsx @@ -4,7 +4,7 @@ import { mq } from '../../utils'; export const Container = styled.div` margin: 0px auto; - padding: 0px 20px; + ${'' /* padding: 0px 20px; */} ${mq.mobile} { width: 375px; From f80c5e94849fbf1db4fe15df26c01371c409953e Mon Sep 17 00:00:00 2001 From: Nikita Date: Sat, 16 Sep 2023 22:53:43 +0300 Subject: [PATCH 06/16] small fix with nav btns --- src/components/ParamsForm/ParamsForm.jsx | 33 ++++++++----------- .../ParamsForm/ParamsForm.styled.jsx | 9 ++++- 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index c944d82a..2d13f194 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -1,5 +1,5 @@ import { Formik, Form } from 'formik'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import { @@ -11,8 +11,9 @@ import { colors, } from '@mui/material'; +import ParamsBlockCard from '../ParamsBlocks/ParamsBlocks'; +import ParamsText from '../ParamsText/ParamsText'; import { colors as palette } from '../../utils'; - import { Page, Logo, @@ -27,18 +28,17 @@ import { BarItem, } from './ParamsForm.styled'; -import ParamsBlockCard from '../ParamsBlocks/ParamsBlocks'; -import ParamsText from '../ParamsText/ParamsText'; - -export const steps = 1; - const ParamsForm = () => { const [swiperRef, setSwiperRef] = useState(null); const [steps, setSteps] = useState(1); - const slideTo = index => { - swiperRef.slideTo(index - 1, 0); - }; + useEffect(() => { + if (!swiperRef) { + return; + } + + swiperRef.slideTo(steps - 1, 0); + }, [steps, swiperRef]); return ( @@ -58,7 +58,6 @@ const ParamsForm = () => { console.log(values); Formik.resetForm(); setSteps(1); - slideTo(1); }} > {({ handleChange, values }) => ( @@ -105,7 +104,6 @@ const ParamsForm = () => { { - slideTo(2); setSteps(2); }} > @@ -414,7 +412,6 @@ const ParamsForm = () => { { - slideTo(1); setSteps(1); }} > @@ -424,7 +421,6 @@ const ParamsForm = () => { { - slideTo(3); setSteps(3); }} > @@ -438,7 +434,7 @@ const ParamsForm = () => { mt_t={'40px'} ml_t={'165px'} ml_d={'580px'} - mt_d={'-300px'} + mt_d={'-310px'} /> @@ -467,7 +463,6 @@ const ParamsForm = () => { { - slideTo(2); setSteps(2); }} > @@ -498,7 +493,7 @@ const ParamsForm = () => { = 1 && '#ef8964', - boxShadow: steps >= 1 && `0px 1px 10px 0px rgba(230, 83, 60, 0.8)`, + boxShadow: steps >= 1 && '0px 1px 10px 0px rgba(230, 83, 60, 0.8)', }} > { boxShadow: steps >= 2 && steps > 1 && - `0px 1px 10px 0px rgba(230, 83, 60, 0.8)`, + '0px 1px 10px 0px rgba(230, 83, 60, 0.8)', }} > diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx index fd56a571..11775065 100644 --- a/src/components/ParamsForm/ParamsForm.styled.jsx +++ b/src/components/ParamsForm/ParamsForm.styled.jsx @@ -267,7 +267,6 @@ export const FormikField = styled(Field)` export const BtnNav = styled.button` ${mq.smallMobile} { - ${'' /* padding: 0; */} padding-top: 0; padding-bottom: 0; font-size: 14px; @@ -279,6 +278,14 @@ export const BtnNav = styled.button` border: none; outline: none; + + &:hover { + color: ${colors.orange}; + } + + &:focus { + color: ${colors.orange}; + } } ${mq.tablet} { From 86e805c7e3bc7e17c58033cbb8915773ce13a96d Mon Sep 17 00:00:00 2001 From: Nikita Date: Sun, 17 Sep 2023 00:28:54 +0300 Subject: [PATCH 07/16] fix --- src/assets/sprite.svg | 4 +++ src/components/ParamsBlocks/ParamsBlocks.jsx | 17 ++++++----- .../ParamsBlocks/ParamsBlocks.styled.jsx | 28 ++++++++++++++++--- src/components/ParamsForm/ParamsForm.jsx | 8 ++++-- src/components/SharedLayout/SharedLayout.jsx | 4 +-- 5 files changed, 45 insertions(+), 16 deletions(-) diff --git a/src/assets/sprite.svg b/src/assets/sprite.svg index f37a251b..f253591d 100644 --- a/src/assets/sprite.svg +++ b/src/assets/sprite.svg @@ -65,6 +65,10 @@ + + + + diff --git a/src/components/ParamsBlocks/ParamsBlocks.jsx b/src/components/ParamsBlocks/ParamsBlocks.jsx index 17f71c0a..23fd8a4d 100644 --- a/src/components/ParamsBlocks/ParamsBlocks.jsx +++ b/src/components/ParamsBlocks/ParamsBlocks.jsx @@ -1,16 +1,19 @@ +import PropTypes from 'prop-types'; +import sprite from '../../assets/sprite.svg'; import { GreyCard, GreySvgWrapper, + GreySvg, GreyTextWrapper, GreyDynamicText, GreyStaticText, OrangeCard, OrangeSvgWrapper, + OrangeSvg, OrangeTextWrapper, OrangeDynamicText, OrangeStaticText, } from './ParamsBlocks.styled'; -import PropTypes from 'prop-types'; const ParamsBlockCard = ({ data, @@ -45,9 +48,9 @@ const ParamsBlockCard = ({ ml_d={ml_d} > - - - + + + {data}+ @@ -74,9 +77,9 @@ const ParamsBlockCard = ({ ml_d={ml_d} > - - - + + + {data} diff --git a/src/components/ParamsBlocks/ParamsBlocks.styled.jsx b/src/components/ParamsBlocks/ParamsBlocks.styled.jsx index 92e74649..b8506fd8 100644 --- a/src/components/ParamsBlocks/ParamsBlocks.styled.jsx +++ b/src/components/ParamsBlocks/ParamsBlocks.styled.jsx @@ -58,10 +58,17 @@ export const GreySvgWrapper = styled.div` } `; -export const GreySvg = styled.div` - width: 10px; - height: 10px; - fill: ${colors.white}; +export const GreySvg = styled.svg` + ${mq.smallMobile} { + width: 12px; + height: 12px; + fill: ${colors.white}; + } + + ${mq.tablet} { + width: 20px; + height: 20px; + } `; export const GreyTextWrapper = styled.div``; @@ -155,6 +162,19 @@ export const OrangeSvgWrapper = styled.div` } `; +export const OrangeSvg = styled.svg` + ${mq.smallMobile} { + width: 12px; + height: 12px; + fill: ${colors.white}; + } + + ${mq.tablet} { + width: 16px; + height: 16px; + } +`; + export const OrangeTextWrapper = styled.div` display: flex; align-items: baseline; diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index 2d13f194..31c9e4bd 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -411,6 +411,7 @@ const ParamsForm = () => { { setSteps(1); }} @@ -462,6 +463,7 @@ const ParamsForm = () => { { setSteps(2); }} @@ -492,13 +494,13 @@ const ParamsForm = () => { = 1 && '#ef8964', + background: steps >= 1 && `${palette.orangeSecondary}`, boxShadow: steps >= 1 && '0px 1px 10px 0px rgba(230, 83, 60, 0.8)', }} > = 2 && steps > 1 && '#ef8964', + background: steps >= 2 && steps > 1 && `${palette.orangeSecondary}`, boxShadow: steps >= 2 && steps > 1 && @@ -507,7 +509,7 @@ const ParamsForm = () => { > diff --git a/src/components/SharedLayout/SharedLayout.jsx b/src/components/SharedLayout/SharedLayout.jsx index 86039ef5..85df61d5 100644 --- a/src/components/SharedLayout/SharedLayout.jsx +++ b/src/components/SharedLayout/SharedLayout.jsx @@ -5,8 +5,8 @@ import { Container } from './SheradLayout.styled'; const SharedLayout = () => { return ( - - {/*
*/} + + {/*
*/} From 2897960120a8801c2aa0386a7ff87548e3873a9b Mon Sep 17 00:00:00 2001 From: Nikita Date: Sun, 17 Sep 2023 04:36:55 +0300 Subject: [PATCH 08/16] small fix --- src/components/ParamsBlocks/ParamsBlocks.jsx | 6 +++++- src/components/ParamsForm/ParamsForm.jsx | 13 ++++++++++--- src/components/ParamsForm/ParamsForm.styled.jsx | 8 ++++++++ src/index.css | 2 +- 4 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/components/ParamsBlocks/ParamsBlocks.jsx b/src/components/ParamsBlocks/ParamsBlocks.jsx index 23fd8a4d..6d39d718 100644 --- a/src/components/ParamsBlocks/ParamsBlocks.jsx +++ b/src/components/ParamsBlocks/ParamsBlocks.jsx @@ -17,6 +17,7 @@ import { const ParamsBlockCard = ({ data, + measure, type, mt_m, mr_m, @@ -31,6 +32,8 @@ const ParamsBlockCard = ({ mb_d, ml_d, }) => { + console.log(sprite); + if (type === 'grey') { return ( {data} - ex + {measure} ); @@ -93,6 +96,7 @@ const ParamsBlockCard = ({ ParamsBlockCard.propTypes = { data: PropTypes.number, type: PropTypes.string, + measure: PropTypes.string, mt_m: PropTypes.string, mr_m: PropTypes.string, mb_m: PropTypes.string, diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index 31c9e4bd..c88ec8c8 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -124,7 +124,8 @@ const ParamsForm = () => { /> { { mb_d={'40px'} ml_d={'674px'} /> - + diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx index 11775065..bd891ce1 100644 --- a/src/components/ParamsForm/ParamsForm.styled.jsx +++ b/src/components/ParamsForm/ParamsForm.styled.jsx @@ -279,6 +279,8 @@ export const BtnNav = styled.button` border: none; outline: none; + transition: color 250ms linear; + &:hover { color: ${colors.orange}; } @@ -330,6 +332,12 @@ export const BtnSubmit = styled.button` border: none; border-radius: 12px; + + transition: box-shadow 250ms linear; + + &:hover { + box-shadow: 0px 1px 10px 0px rgba(230, 83, 60, 0.8); + } } ${mq.tablet} { diff --git a/src/index.css b/src/index.css index 80c9f9a9..461e57ea 100644 --- a/src/index.css +++ b/src/index.css @@ -24,7 +24,7 @@ } body { - /* background-color: rgb(0, 0, 0); */ + background-color: rgb(0, 0, 0); background-size: auto 100%; background-position: center center; background-repeat: no-repeat; From c8c55ae7b4b161747f5f575ef78356798f2994fa Mon Sep 17 00:00:00 2001 From: Nikita Date: Sun, 17 Sep 2023 04:46:47 +0300 Subject: [PATCH 09/16] fix btns hover focus scale --- src/components/ParamsForm/ParamsForm.styled.jsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx index bd891ce1..0871276a 100644 --- a/src/components/ParamsForm/ParamsForm.styled.jsx +++ b/src/components/ParamsForm/ParamsForm.styled.jsx @@ -248,7 +248,7 @@ export const FormikField = styled(Field)` background-color: transparent; color: ${colors.textWhite06}; - transition: border-color 250ms linear; + transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1); &::placeholder { color: ${colors.textWhite06}; @@ -279,7 +279,7 @@ export const BtnNav = styled.button` border: none; outline: none; - transition: color 250ms linear; + transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); &:hover { color: ${colors.orange}; @@ -333,10 +333,14 @@ export const BtnSubmit = styled.button` border: none; border-radius: 12px; - transition: box-shadow 250ms linear; + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); &:hover { - box-shadow: 0px 1px 10px 0px rgba(230, 83, 60, 0.8); + transform: scale(0.99); + } + + &:focus { + transform: scale(0.99); } } From b342f6f18878671c765c8e0a95c841fcba1cc392 Mon Sep 17 00:00:00 2001 From: Nikita Date: Sun, 17 Sep 2023 06:49:36 +0300 Subject: [PATCH 10/16] fix svg load --- src/App.jsx | 2 +- src/assets/sprite.svg | 9 --------- src/components/ParamsBlocks/ParamsBlocks.jsx | 13 ++++++------- src/components/ParamsForm/ParamsForm.jsx | 11 +++++++---- src/components/ParamsForm/ParamsForm.styled.jsx | 2 +- 5 files changed, 15 insertions(+), 22 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index b3aa7c45..adaf2198 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,7 +12,7 @@ const Products = lazy(() => import('../src/pages/Products/Products')); const test = import.meta.env.VITE_API_TEST; function App() { - // console.log(test); + // console.log(test); return ( }> diff --git a/src/assets/sprite.svg b/src/assets/sprite.svg index f253591d..f9e7a9f4 100644 --- a/src/assets/sprite.svg +++ b/src/assets/sprite.svg @@ -60,15 +60,6 @@ - - - - - - - - - diff --git a/src/components/ParamsBlocks/ParamsBlocks.jsx b/src/components/ParamsBlocks/ParamsBlocks.jsx index 6d39d718..db69fa42 100644 --- a/src/components/ParamsBlocks/ParamsBlocks.jsx +++ b/src/components/ParamsBlocks/ParamsBlocks.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import sprite from '../../assets/sprite.svg'; + import { GreyCard, GreySvgWrapper, @@ -32,8 +32,6 @@ const ParamsBlockCard = ({ mb_d, ml_d, }) => { - console.log(sprite); - if (type === 'grey') { return ( - - + + @@ -80,8 +78,9 @@ const ParamsBlockCard = ({ ml_d={ml_d} > - - + + + diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index c88ec8c8..305da641 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -11,12 +11,12 @@ import { colors, } from '@mui/material'; +import Logo from '../headersComp/Logo/Logo'; import ParamsBlockCard from '../ParamsBlocks/ParamsBlocks'; import ParamsText from '../ParamsText/ParamsText'; import { colors as palette } from '../../utils'; import { Page, - Logo, FormikField, Title, InputGroup, @@ -25,6 +25,7 @@ import { BtnsAndBlock, BtnSubmit, ProgressBar, + LogoWrapper, BarItem, } from './ParamsForm.styled'; @@ -42,7 +43,9 @@ const ParamsForm = () => { return ( - PowerPulse + + + { { Date: Sun, 17 Sep 2023 07:30:57 +0300 Subject: [PATCH 11/16] created a params screen --- src/App.jsx | 7 +- src/components/ParamsBar/ParamsBar.jsx | 31 +++ src/components/ParamsBar/ParamsBar.styled.jsx | 27 ++ src/components/ParamsForm/ParamsForm.jsx | 54 +--- .../ParamsForm/ParamsForm.styled.jsx | 231 +----------------- src/pages/Params/Params.jsx | 38 +++ src/pages/Params/Params.styled.jsx | 197 +++++++++++++++ 7 files changed, 308 insertions(+), 277 deletions(-) create mode 100644 src/components/ParamsBar/ParamsBar.jsx create mode 100644 src/components/ParamsBar/ParamsBar.styled.jsx create mode 100644 src/pages/Params/Params.jsx create mode 100644 src/pages/Params/Params.styled.jsx diff --git a/src/App.jsx b/src/App.jsx index adaf2198..770ccf8c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,19 +4,20 @@ import { lazy } from 'react'; import SharedLayout from './components/SharedLayout/SharedLayout'; // import SharedLayout from './components/SharedLayout/SharedLayout'; -const Home = lazy(() => import('../src/pages/Home/Home')); +// const Home = lazy(() => import('../src/pages/Home/Home')); const SignIn = lazy(() => import('../src/pages/SignIn/SignIn')); const SignUp = lazy(() => import('../src/pages/SignUp/SignUp')); const Products = lazy(() => import('../src/pages/Products/Products')); +const Params = lazy(() => import('../src/pages/Params/Params')); -const test = import.meta.env.VITE_API_TEST; +// const test = import.meta.env.VITE_API_TEST; function App() { // console.log(test); return ( }> - } /> + } /> } /> } /> } /> diff --git a/src/components/ParamsBar/ParamsBar.jsx b/src/components/ParamsBar/ParamsBar.jsx new file mode 100644 index 00000000..1773c89f --- /dev/null +++ b/src/components/ParamsBar/ParamsBar.jsx @@ -0,0 +1,31 @@ +import { ProgressBar, BarItem } from './ParamsBar.styled'; + +const ParamsBar = ({ steps, palette }) => { + return ( + + = 1 && `${palette.orangeSecondary}`, + boxShadow: steps >= 1 && '0px 1px 10px 0px rgba(230, 83, 60, 0.8)', + }} + > + = 2 && steps > 1 && `${palette.orangeSecondary}`, + boxShadow: + steps >= 2 && + steps > 1 && + '0px 1px 10px 0px rgba(230, 83, 60, 0.8)', + }} + > + + + ); +}; + +export default ParamsBar; diff --git a/src/components/ParamsBar/ParamsBar.styled.jsx b/src/components/ParamsBar/ParamsBar.styled.jsx new file mode 100644 index 00000000..ea330032 --- /dev/null +++ b/src/components/ParamsBar/ParamsBar.styled.jsx @@ -0,0 +1,27 @@ +import styled from '@emotion/styled'; +import { mq } from '../../utils'; + +export const ProgressBar = styled.div` + ${mq.smallMobile} { + display: flex; + justify-content: space-around; + width: 178px; + height: 4px; + } + ${mq.tablet} { + width: 268px; + } +`; + +export const BarItem = styled.div` + ${mq.smallMobile} { + width: 50px; + height: 4px; + border-radius: 2px; + + background: #303030; + } + ${mq.tablet} { + width: 80px; + } +`; diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index 305da641..ec9789fe 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -1,5 +1,5 @@ import { Formik, Form } from 'formik'; -import { useEffect, useState } from 'react'; + import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import { @@ -11,12 +11,10 @@ import { colors, } from '@mui/material'; -import Logo from '../headersComp/Logo/Logo'; import ParamsBlockCard from '../ParamsBlocks/ParamsBlocks'; import ParamsText from '../ParamsText/ParamsText'; -import { colors as palette } from '../../utils'; + import { - Page, FormikField, Title, InputGroup, @@ -24,29 +22,11 @@ import { BtnNav, BtnsAndBlock, BtnSubmit, - ProgressBar, - LogoWrapper, - BarItem, } from './ParamsForm.styled'; -const ParamsForm = () => { - const [swiperRef, setSwiperRef] = useState(null); - const [steps, setSteps] = useState(1); - - useEffect(() => { - if (!swiperRef) { - return; - } - - swiperRef.slideTo(steps - 1, 0); - }, [steps, swiperRef]); - +const ParamsForm = ({ setSteps, setSwiperRef, palette }) => { return ( - - - - - + <> { )} - - - = 1 && `${palette.orangeSecondary}`, - boxShadow: steps >= 1 && '0px 1px 10px 0px rgba(230, 83, 60, 0.8)', - }} - > - = 2 && steps > 1 && `${palette.orangeSecondary}`, - boxShadow: - steps >= 2 && - steps > 1 && - '0px 1px 10px 0px rgba(230, 83, 60, 0.8)', - }} - > - - - + ); }; diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx index 2e9ffc7f..c51a1da0 100644 --- a/src/components/ParamsForm/ParamsForm.styled.jsx +++ b/src/components/ParamsForm/ParamsForm.styled.jsx @@ -1,208 +1,14 @@ import styled from '@emotion/styled'; import { Field } from 'formik'; -import imgPrmsForm from '../../assets/images/imgParamsForm'; import { colors, mq } from '../../utils'; -export const Page = styled.div` - ${mq.smallMobile} { - padding: 20px; - - background-color: black; - background: - linear-gradient(168deg, #040404 14.75%, rgba(4, 4, 4, 0) 52.97%), - linear-gradient(73deg, #040404 6.11%, rgba(4, 4, 4, 0) 66.68%) black; - background-repeat: no-repeat; - background-position: 100% 100%; - background-size: 289px 571px; - - background-image: url(${props => { - if (props.steps === 1) { - return imgPrmsForm.mobile.imgS1Mx1; - } - if (props.steps === 2) { - return imgPrmsForm.mobile.imgS2Mx1; - } - if (props.steps === 3) { - return imgPrmsForm.mobile.imgS3Mx1; - } - }}); - - @media (min-device-pixel-ratio: 2), - (-webkit-min-device-pixel-ratio: 2), - (min-resolution: 192dpi), - (min-resolution: 2dppx) { - & { - background-image: url(${props => { - if (props.steps === 1) { - return imgPrmsForm.mobile.imgS1Mx2; - } - if (props.steps === 2) { - return imgPrmsForm.mobile.imgS2Mx2; - } - if (props.steps === 3) { - return imgPrmsForm.mobile.imgS3Mx2; - } - }}); - } - } - - @media (min-device-pixel-ratio: 3), - (-webkit-min-device-pixel-ratio: 3), - (min-resolution: 288dpi), - (min-resolution: 3dppx) { - & { - background-image: url(${props => { - if (props.steps === 1) { - return imgPrmsForm.mobile.imgS1Mx3; - } - if (props.steps === 2) { - return imgPrmsForm.mobile.imgS2Mx3; - } - if (props.steps === 3) { - return imgPrmsForm.mobile.imgS3Mx3; - } - }}); - } - } - } - - ${mq.tablet} { - padding: 32px; - background-size: 488px 835px; - - background-image: url(${props => { - if (props.steps === 1) { - return imgPrmsForm.tablet.imgS1Tx1; - } - if (props.steps === 2) { - return imgPrmsForm.tablet.imgS2Tx1; - } - if (props.steps === 3) { - return imgPrmsForm.tablet.imgS3Tx1; - } - }}); - - @media (min-device-pixel-ratio: 2), - (-webkit-min-device-pixel-ratio: 2), - (min-resolution: 192dpi), - (min-resolution: 2dppx) { - & { - background-image: url(${props => { - if (props.steps === 1) { - return imgPrmsForm.tablet.imgS1Tx2; - } - if (props.steps === 2) { - return imgPrmsForm.tablet.imgS2Tx2; - } - if (props.steps === 3) { - return imgPrmsForm.tablet.imgS3Tx2; - } - }}); - } - } - - @media (min-device-pixel-ratio: 3), - (-webkit-min-device-pixel-ratio: 3), - (min-resolution: 288dpi), - (min-resolution: 3dppx) { - & { - background-image: url(${props => { - if (props.steps === 1) { - return imgPrmsForm.tablet.imgS1Tx3; - } - if (props.steps === 2) { - return imgPrmsForm.tablet.imgS2Tx3; - } - if (props.steps === 3) { - return imgPrmsForm.tablet.imgS3Tx3; - } - }}); - } - } - } - - ${mq.desktop} { - padding: 32px 32px 32px 96px; - - background-size: 670px 800px; - - background-image: url(${props => { - if (props.steps === 1) { - return imgPrmsForm.desktop.imgS1Dx1; - } - if (props.steps === 2) { - return imgPrmsForm.desktop.imgS2Dx1; - } - if (props.steps === 3) { - return imgPrmsForm.desktop.imgS3Dx1; - } - }}); - - @media (min-device-pixel-ratio: 2), - (-webkit-min-device-pixel-ratio: 2), - (min-resolution: 192dpi), - (min-resolution: 2dppx) { - & { - background-image: url(${props => { - if (props.steps === 1) { - return imgPrmsForm.desktop.imgS1Dx2; - } - if (props.steps === 2) { - return imgPrmsForm.desktop.imgS2Dx2; - } - if (props.steps === 3) { - return imgPrmsForm.desktop.imgS3Dx2; - } - }}); - } - } - - @media (min-device-pixel-ratio: 3), - (-webkit-min-device-pixel-ratio: 3), - (min-resolution: 288dpi), - (min-resolution: 3dppx) { - & { - background-image: url(${props => { - if (props.steps === 1) { - return imgPrmsForm.desktop.imgS1Dx3; - } - if (props.steps === 2) { - return imgPrmsForm.desktop.imgS2Dx3; - } - if (props.steps === 3) { - return imgPrmsForm.desktop.imgS3Dx3; - } - }}); - } - } - } -`; - -export const LogoWrapper = styled.div` - ${mq.smallMobile} { - width: 100px; - height: 17px; - margin-bottom: 90px; - - color: ${colors.white}; - } - - ${mq.tablet} { - margin-bottom: 140px; - } - - ${mq.desktop} { - margin-bottom: 151px; - } -`; - export const Title = styled.h1` ${mq.smallMobile} { margin-bottom: 14px; font-size: 24px; font-weight: 700; - line-height: 116.667%; /* 116.667% */ + line-height: 116.667%; color: ${colors.white}; } @@ -211,7 +17,7 @@ export const Title = styled.h1` margin-bottom: 16px; font-size: 32px; - line-height: 137.5%; /* 137.5% */ + line-height: 137.5%; } `; @@ -239,7 +45,7 @@ export const FormikField = styled(Field)` margin: 7px; font-size: 14px; - line-height: 128.571%; /* 128.571% */ + line-height: 128.571%; border: 1px solid rgba(239, 237, 232, 0.3); border-radius: 12px; @@ -271,7 +77,7 @@ export const BtnNav = styled.button` padding-bottom: 0; font-size: 14px; font-weight: 400; - line-height: 128%; /* 128.571% */ + line-height: 128%; color: ${colors.white}; background: transparent; @@ -325,7 +131,7 @@ export const BtnSubmit = styled.button` font-size: 16px; font-weight: 500; - line-height: 112.5%; /* 112.5% */ + line-height: 112.5%; color: ${colors.white}; background: ${colors.orange}; @@ -348,31 +154,6 @@ export const BtnSubmit = styled.button` padding: 16px 75px; font-size: 20px; - line-height: 120%; /* 120% */ - } -`; - -export const ProgressBar = styled.div` - ${mq.smallMobile} { - display: flex; - justify-content: space-around; - width: 178px; - height: 4px; - } - ${mq.tablet} { - width: 268px; - } -`; - -export const BarItem = styled.div` - ${mq.smallMobile} { - width: 50px; - height: 4px; - border-radius: 2px; - - background: #303030; - } - ${mq.tablet} { - width: 80px; + line-height: 120%; } `; diff --git a/src/pages/Params/Params.jsx b/src/pages/Params/Params.jsx new file mode 100644 index 00000000..2d2cbd65 --- /dev/null +++ b/src/pages/Params/Params.jsx @@ -0,0 +1,38 @@ +import { useEffect, useState } from 'react'; + +import Logo from '../../components/headersComp/Logo/Logo'; +import ParamsForm from '../../components/ParamsForm/ParamsForm'; +import ParamsBar from '../../components/ParamsBar/ParamsBar'; +import { colors } from '../../utils'; +import { ParamsPageWrapper, LogoWrapper } from './Params.styled'; + +const Params = () => { + const [swiperRef, setSwiperRef] = useState(null); + const [steps, setSteps] = useState(1); + + useEffect(() => { + if (!swiperRef) { + return; + } + + swiperRef.slideTo(steps - 1, 0); + }, [steps, swiperRef]); + + return ( + + + + + + + + + + ); +}; + +export default Params; diff --git a/src/pages/Params/Params.styled.jsx b/src/pages/Params/Params.styled.jsx new file mode 100644 index 00000000..54543cb2 --- /dev/null +++ b/src/pages/Params/Params.styled.jsx @@ -0,0 +1,197 @@ +import styled from '@emotion/styled'; + +import imgPrmsForm from '../../assets/images/imgParamsForm'; +import { mq, colors } from '../../utils'; + +export const ParamsPageWrapper = styled.div` + ${mq.smallMobile} { + padding: 20px; + + background-color: black; + background: + linear-gradient(168deg, #040404 14.75%, rgba(4, 4, 4, 0) 52.97%), + linear-gradient(73deg, #040404 6.11%, rgba(4, 4, 4, 0) 66.68%) black; + background-repeat: no-repeat; + background-position: 100% 100%; + background-size: 289px 571px; + + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.mobile.imgS1Mx1; + } + if (props.steps === 2) { + return imgPrmsForm.mobile.imgS2Mx1; + } + if (props.steps === 3) { + return imgPrmsForm.mobile.imgS3Mx1; + } + }}); + + @media (min-device-pixel-ratio: 2), + (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi), + (min-resolution: 2dppx) { + & { + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.mobile.imgS1Mx2; + } + if (props.steps === 2) { + return imgPrmsForm.mobile.imgS2Mx2; + } + if (props.steps === 3) { + return imgPrmsForm.mobile.imgS3Mx2; + } + }}); + } + } + + @media (min-device-pixel-ratio: 3), + (-webkit-min-device-pixel-ratio: 3), + (min-resolution: 288dpi), + (min-resolution: 3dppx) { + & { + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.mobile.imgS1Mx3; + } + if (props.steps === 2) { + return imgPrmsForm.mobile.imgS2Mx3; + } + if (props.steps === 3) { + return imgPrmsForm.mobile.imgS3Mx3; + } + }}); + } + } + } + + ${mq.tablet} { + padding: 32px; + background-size: 488px 835px; + + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.tablet.imgS1Tx1; + } + if (props.steps === 2) { + return imgPrmsForm.tablet.imgS2Tx1; + } + if (props.steps === 3) { + return imgPrmsForm.tablet.imgS3Tx1; + } + }}); + + @media (min-device-pixel-ratio: 2), + (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi), + (min-resolution: 2dppx) { + & { + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.tablet.imgS1Tx2; + } + if (props.steps === 2) { + return imgPrmsForm.tablet.imgS2Tx2; + } + if (props.steps === 3) { + return imgPrmsForm.tablet.imgS3Tx2; + } + }}); + } + } + + @media (min-device-pixel-ratio: 3), + (-webkit-min-device-pixel-ratio: 3), + (min-resolution: 288dpi), + (min-resolution: 3dppx) { + & { + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.tablet.imgS1Tx3; + } + if (props.steps === 2) { + return imgPrmsForm.tablet.imgS2Tx3; + } + if (props.steps === 3) { + return imgPrmsForm.tablet.imgS3Tx3; + } + }}); + } + } + } + + ${mq.desktop} { + padding: 32px 32px 32px 96px; + + background-size: 670px 800px; + + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.desktop.imgS1Dx1; + } + if (props.steps === 2) { + return imgPrmsForm.desktop.imgS2Dx1; + } + if (props.steps === 3) { + return imgPrmsForm.desktop.imgS3Dx1; + } + }}); + + @media (min-device-pixel-ratio: 2), + (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 192dpi), + (min-resolution: 2dppx) { + & { + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.desktop.imgS1Dx2; + } + if (props.steps === 2) { + return imgPrmsForm.desktop.imgS2Dx2; + } + if (props.steps === 3) { + return imgPrmsForm.desktop.imgS3Dx2; + } + }}); + } + } + + @media (min-device-pixel-ratio: 3), + (-webkit-min-device-pixel-ratio: 3), + (min-resolution: 288dpi), + (min-resolution: 3dppx) { + & { + background-image: url(${props => { + if (props.steps === 1) { + return imgPrmsForm.desktop.imgS1Dx3; + } + if (props.steps === 2) { + return imgPrmsForm.desktop.imgS2Dx3; + } + if (props.steps === 3) { + return imgPrmsForm.desktop.imgS3Dx3; + } + }}); + } + } + } +`; + +export const LogoWrapper = styled.div` + ${mq.smallMobile} { + width: 100px; + height: 17px; + margin-bottom: 90px; + + color: ${colors.white}; + } + + ${mq.tablet} { + margin-bottom: 140px; + } + + ${mq.desktop} { + margin-bottom: 151px; + } +`; From 5b4c77ecd9217a0ac8bbc490a3bd897dc6001046 Mon Sep 17 00:00:00 2001 From: Nikita Date: Sun, 17 Sep 2023 07:44:54 +0300 Subject: [PATCH 12/16] fix --- src/App.jsx | 9 +- src/components/ParamsBar/ParamsBar.jsx | 8 +- src/components/ParamsForm/ParamsForm.jsx | 654 ++++++++++++----------- src/pages/Home/Home.jsx | 4 +- src/pages/Params/Params.jsx | 10 +- 5 files changed, 344 insertions(+), 341 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 770ccf8c..9e98c6a5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,23 +4,24 @@ import { lazy } from 'react'; import SharedLayout from './components/SharedLayout/SharedLayout'; // import SharedLayout from './components/SharedLayout/SharedLayout'; -// const Home = lazy(() => import('../src/pages/Home/Home')); +const Home = lazy(() => import('../src/pages/Home/Home')); const SignIn = lazy(() => import('../src/pages/SignIn/SignIn')); const SignUp = lazy(() => import('../src/pages/SignUp/SignUp')); const Products = lazy(() => import('../src/pages/Products/Products')); const Params = lazy(() => import('../src/pages/Params/Params')); -// const test = import.meta.env.VITE_API_TEST; +const test = import.meta.env.VITE_API_TEST; function App() { - // console.log(test); + console.log(test); return ( }> - } /> + } /> } /> } /> } /> + } /> ); diff --git a/src/components/ParamsBar/ParamsBar.jsx b/src/components/ParamsBar/ParamsBar.jsx index 1773c89f..ded2330b 100644 --- a/src/components/ParamsBar/ParamsBar.jsx +++ b/src/components/ParamsBar/ParamsBar.jsx @@ -1,6 +1,8 @@ import { ProgressBar, BarItem } from './ParamsBar.styled'; +import PropTypes from 'prop-types'; +import { colors as palette } from '../../utils'; -const ParamsBar = ({ steps, palette }) => { +const ParamsBar = ({ steps }) => { return ( { ); }; +ParamsBar.propTypes = { + steps: PropTypes.number.isRequired, +}; + export default ParamsBar; diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index ec9789fe..71e6599e 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -1,4 +1,6 @@ import { Formik, Form } from 'formik'; +import PropTypes from 'prop-types'; +import { colors as palette } from '../../utils'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; @@ -24,257 +26,106 @@ import { BtnSubmit, } from './ParamsForm.styled'; -const ParamsForm = ({ setSteps, setSwiperRef, palette }) => { +const ParamsForm = ({ setSteps, setSwiperRef }) => { return ( - <> - { - console.log(values); - Formik.resetForm(); - setSteps(1); - }} - > - {({ handleChange, values }) => ( -
- - - Get closer to your goals! + { + console.log(values); + Formik.resetForm(); + setSteps(1); + }} + > + {({ handleChange, values }) => ( + + + + Get closer to your goals! - - To ensure a personalized user experience and the proper - functioning of our platform, we ask you to provide the - following information about your weight, height and other - relevant data: - + + To ensure a personalized user experience and the proper + functioning of our platform, we ask you to provide the following + information about your weight, height and other relevant data: + - - - - - - - - { - setSteps(2); - }} - > - Next - - - + - - + + - + - - - Get closer to your goals! - + { + setSteps(2); + }} + > + Next + - - - - - Blood: - + - - } - label="1" - /> - - } - label="2" - /> - - } - label="3" - /> - - } - label="4" - /> - - - - Sex: - + + - - } - label="male" - /> - - } - label="female" - /> - - + + + Get closer to your goals! + + + { lineHeight: '128.571%', }} > - Level: + Blood: { }} /> } - label="Sedentary lifestyle (little or no physical activity)" + label="1" /> - { }} /> } - label="Light activity (light exercises/sports 1-3 days per - week)" + label="2" /> - { }} /> } - label=" Moderately active (moderate exercises/sports 3-5 days - per week)" + label="3" /> - { }} /> } - label="Very active (intense exercises/sports 6-7 days per week)" + label="4" /> + + + + Sex: + { }} /> } - label="Extremely active (very strenuous exercises/sports and - physical work)" + label="male" + /> + + } + label="female" /> - + - - { - setSteps(1); + + - Back - + Level: + - { - setSteps(3); - }} - > - Next - + + } + label="Sedentary lifestyle (little or no physical activity)" + /> - + } + label="Light activity (light exercises/sports 1-3 days per + week)" /> - - - - - Dear user + + } + label=" Moderately active (moderate exercises/sports 3-5 days + per week)" + /> - - Thank you for filling in all the required data. We greatly - appreciate your cooperation and commitment to a healthy - lifestyle. The collected information will allow us to provide - you with a more individual and personalized approach. - + + } + label="Very active (intense exercises/sports 6-7 days per week)" + /> - Go + + } + label="Extremely active (very strenuous exercises/sports and + physical work)" + /> + + + { - setSteps(2); + setSteps(1); }} > Back + { + setSteps(3); + }} + > + Next + + - - - - - )} - - + + + + + + Dear user + + + Thank you for filling in all the required data. We greatly + appreciate your cooperation and commitment to a healthy + lifestyle. The collected information will allow us to provide + you with a more individual and personalized approach. + + + Go + + { + setSteps(2); + }} + > + Back + + + + + +
+ + )} + ); }; +ParamsForm.propTypes = { + setSteps: PropTypes.func.isRequired, + setSwiperRef: PropTypes.func.isRequired, +}; + export default ParamsForm; diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx index 921c1bb1..67534b84 100644 --- a/src/pages/Home/Home.jsx +++ b/src/pages/Home/Home.jsx @@ -2,7 +2,7 @@ // import MainTitle from '../../components/MainTitle/MainTitle'; // import Header from '../../components/headersComp/Header/Header'; // import { LinkList, Wrapper } from './Home.styled'; -import ParamsForm from '../../components/ParamsForm/ParamsForm'; + const Home = () => { return ( <> @@ -18,8 +18,6 @@ const Home = () => { */} - - ); }; diff --git a/src/pages/Params/Params.jsx b/src/pages/Params/Params.jsx index 2d2cbd65..191a79c5 100644 --- a/src/pages/Params/Params.jsx +++ b/src/pages/Params/Params.jsx @@ -1,9 +1,7 @@ import { useEffect, useState } from 'react'; - import Logo from '../../components/headersComp/Logo/Logo'; import ParamsForm from '../../components/ParamsForm/ParamsForm'; import ParamsBar from '../../components/ParamsBar/ParamsBar'; -import { colors } from '../../utils'; import { ParamsPageWrapper, LogoWrapper } from './Params.styled'; const Params = () => { @@ -24,13 +22,9 @@ const Params = () => { - + - + ); }; From f04352ed8f187e9467d2e078882b38bf6922588a Mon Sep 17 00:00:00 2001 From: Nikita Date: Sun, 17 Sep 2023 07:45:21 +0300 Subject: [PATCH 13/16] fix --- src/pages/Home/Home.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx index 67534b84..cf9e2c64 100644 --- a/src/pages/Home/Home.jsx +++ b/src/pages/Home/Home.jsx @@ -1,12 +1,12 @@ -// import CustomNavLink from '../../components/CustomNavLink/CustomNavLink'; -// import MainTitle from '../../components/MainTitle/MainTitle'; -// import Header from '../../components/headersComp/Header/Header'; -// import { LinkList, Wrapper } from './Home.styled'; +import CustomNavLink from '../../components/CustomNavLink/CustomNavLink'; +import MainTitle from '../../components/MainTitle/MainTitle'; +import Header from '../../components/headersComp/Header/Header'; +import { LinkList, Wrapper } from './Home.styled'; const Home = () => { return ( <> - {/* +
@@ -17,7 +17,7 @@ const Home = () => { - */} + ); }; From 24fb9a28b3a5f6a7aa4d291fec769bc6f31e162f Mon Sep 17 00:00:00 2001 From: Nikita Date: Mon, 18 Sep 2023 01:37:03 +0300 Subject: [PATCH 14/16] add btn component --- src/components/ParamsBtn/ParamsBtn.jsx | 38 ++++++++++++++ src/components/ParamsBtn/ParamsBtn.styled.jsx | 34 +++++++++++++ src/components/ParamsForm/ParamsForm.jsx | 51 ++++--------------- .../ParamsForm/ParamsForm.styled.jsx | 50 ------------------ .../ParamsText/ParamsText.styled.jsx | 4 +- src/pages/Params/Params.jsx | 8 ++- src/pages/Params/Params.styled.jsx | 26 ++-------- 7 files changed, 90 insertions(+), 121 deletions(-) create mode 100644 src/components/ParamsBtn/ParamsBtn.jsx create mode 100644 src/components/ParamsBtn/ParamsBtn.styled.jsx diff --git a/src/components/ParamsBtn/ParamsBtn.jsx b/src/components/ParamsBtn/ParamsBtn.jsx new file mode 100644 index 00000000..47d7bb71 --- /dev/null +++ b/src/components/ParamsBtn/ParamsBtn.jsx @@ -0,0 +1,38 @@ +import PropTypes from 'prop-types'; +import { BtnNav } from './ParamsBtn.styled'; + +const ParamsBtn = ({ setSteps, type, step }) => { + if (type === 'next') { + return ( + { + setSteps(step); + }} + > + Next + + ); + } + + if (type === 'back') { + return ( + { + setSteps(step); + }} + > + Back + + ); + } +}; + +ParamsBtn.propTypes = { + setSteps: PropTypes.func.isRequired, + type: PropTypes.string, + step: PropTypes.number.isRequired, +}; + +export default ParamsBtn; diff --git a/src/components/ParamsBtn/ParamsBtn.styled.jsx b/src/components/ParamsBtn/ParamsBtn.styled.jsx new file mode 100644 index 00000000..fb09ccb2 --- /dev/null +++ b/src/components/ParamsBtn/ParamsBtn.styled.jsx @@ -0,0 +1,34 @@ +import styled from '@emotion/styled'; + +import { mq, colors } from '../../utils'; + +export const BtnNav = styled.button` + ${mq.smallMobile} { + padding-top: 0; + padding-bottom: 0; + font-size: 14px; + font-weight: 400; + line-height: 128%; + + color: ${colors.white}; + background: transparent; + + border: none; + outline: none; + + transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); + + &:hover { + color: ${colors.orange}; + } + + &:focus { + color: ${colors.orange}; + } + } + + ${mq.tablet} { + font-size: 16px; + line-height: 150%; + } +`; diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index 71e6599e..2e774136 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -15,13 +15,13 @@ import { import ParamsBlockCard from '../ParamsBlocks/ParamsBlocks'; import ParamsText from '../ParamsText/ParamsText'; +import Title from '../Title/Title'; +import ParamsBtn from '../ParamsBtn/ParamsBtn'; import { FormikField, - Title, InputGroup, FormRadioBtnGroupWrapper, - BtnNav, BtnsAndBlock, BtnSubmit, } from './ParamsForm.styled'; @@ -52,7 +52,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { onSwiper={setSwiperRef} > - Get closer to your goals! + <ParamsText mb_m={'50px'} mb_t={'54px'}> To ensure a personalized user experience and the proper @@ -84,14 +84,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { /> </InputGroup> - <BtnNav - type="button" - onClick={() => { - setSteps(2); - }} - > - Next - </BtnNav> + <ParamsBtn setSteps={setSteps} type={'next'} step={2} /> <ParamsBlockCard type={'grey'} @@ -117,9 +110,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { </SwiperSlide> <SwiperSlide> - <Title style={{ marginBottom: '28px' }}> - Get closer to your goals! - + <FormControl style={{ marginBottom: '28px' }}> <FormRadioBtnGroupWrapper> @@ -393,24 +384,8 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { </FormControl> <BtnsAndBlock> - <BtnNav - type="button" - style={{ color: `${palette.textWhite06}` }} - onClick={() => { - setSteps(1); - }} - > - Back - </BtnNav> - - <BtnNav - type="button" - onClick={() => { - setSteps(3); - }} - > - Next - </BtnNav> + <ParamsBtn setSteps={setSteps} type={'back'} step={1} /> + <ParamsBtn setSteps={setSteps} type={'next'} step={3} /> <ParamsBlockCard data={350} @@ -435,7 +410,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { /> </SwiperSlide> <SwiperSlide> - <Title>Dear user + <ParamsText mb_m={'28px'} mb_t={'64px'}> Thank you for filling in all the required data. We greatly @@ -446,15 +421,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { <BtnSubmit>Go</BtnSubmit> - <BtnNav - type="button" - style={{ color: `${palette.textWhite06}` }} - onClick={() => { - setSteps(2); - }} - > - Back - </BtnNav> + <ParamsBtn setSteps={setSteps} type={'back'} step={2} /> <ParamsBlockCard data={350} diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx index c51a1da0..17b6561c 100644 --- a/src/components/ParamsForm/ParamsForm.styled.jsx +++ b/src/components/ParamsForm/ParamsForm.styled.jsx @@ -2,25 +2,6 @@ import styled from '@emotion/styled'; import { Field } from 'formik'; import { colors, mq } from '../../utils'; -export const Title = styled.h1` - ${mq.smallMobile} { - margin-bottom: 14px; - - font-size: 24px; - font-weight: 700; - line-height: 116.667%; - - color: ${colors.white}; - } - - ${mq.tablet} { - margin-bottom: 16px; - - font-size: 32px; - line-height: 137.5%; - } -`; - export const InputGroup = styled.div` ${mq.smallMobile} { display: flex; @@ -71,37 +52,6 @@ export const FormikField = styled(Field)` } `; -export const BtnNav = styled.button` - ${mq.smallMobile} { - padding-top: 0; - padding-bottom: 0; - font-size: 14px; - font-weight: 400; - line-height: 128%; - - color: ${colors.white}; - background: transparent; - - border: none; - outline: none; - - transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); - - &:hover { - color: ${colors.orange}; - } - - &:focus { - color: ${colors.orange}; - } - } - - ${mq.tablet} { - font-size: 16px; - line-height: 150%; - } -`; - export const FormRadioBtnGroupWrapper = styled.div` ${mq.smallMobile} { display: flex; diff --git a/src/components/ParamsText/ParamsText.styled.jsx b/src/components/ParamsText/ParamsText.styled.jsx index f8727315..0f1cde35 100644 --- a/src/components/ParamsText/ParamsText.styled.jsx +++ b/src/components/ParamsText/ParamsText.styled.jsx @@ -7,7 +7,7 @@ export const Text = styled.p` font-size: 14px; font-weight: 400; - line-height: 128.571%; /* 128.571% */ + line-height: 128.571%; color: ${colors.textWhite03}; } @@ -17,7 +17,7 @@ export const Text = styled.p` margin-bottom: ${props => props.mb_t}; font-size: 16px; - line-height: 150%; /* 150% */ + line-height: 150%; } ${mq.desktop} { diff --git a/src/pages/Params/Params.jsx b/src/pages/Params/Params.jsx index 191a79c5..f26b8fd1 100644 --- a/src/pages/Params/Params.jsx +++ b/src/pages/Params/Params.jsx @@ -1,8 +1,8 @@ import { useEffect, useState } from 'react'; -import Logo from '../../components/headersComp/Logo/Logo'; +import Header from '../../components/headersComp/Header/Header'; import ParamsForm from '../../components/ParamsForm/ParamsForm'; import ParamsBar from '../../components/ParamsBar/ParamsBar'; -import { ParamsPageWrapper, LogoWrapper } from './Params.styled'; +import { ParamsPageWrapper } from './Params.styled'; const Params = () => { const [swiperRef, setSwiperRef] = useState(null); @@ -18,9 +18,7 @@ const Params = () => { return ( <ParamsPageWrapper steps={steps}> - <LogoWrapper> - <Logo /> - </LogoWrapper> + <Header /> <ParamsForm setSwiperRef={setSwiperRef} setSteps={setSteps} /> diff --git a/src/pages/Params/Params.styled.jsx b/src/pages/Params/Params.styled.jsx index 54543cb2..f29f025f 100644 --- a/src/pages/Params/Params.styled.jsx +++ b/src/pages/Params/Params.styled.jsx @@ -1,11 +1,11 @@ import styled from '@emotion/styled'; import imgPrmsForm from '../../assets/images/imgParamsForm'; -import { mq, colors } from '../../utils'; +import { mq } from '../../utils'; export const ParamsPageWrapper = styled.div` ${mq.smallMobile} { - padding: 20px; + padding: 0 20px 20px 20px; background-color: black; background: @@ -67,7 +67,7 @@ export const ParamsPageWrapper = styled.div` } ${mq.tablet} { - padding: 32px; + padding: 0 32px 32px 32px; background-size: 488px 835px; background-image: url(${props => { @@ -122,7 +122,7 @@ export const ParamsPageWrapper = styled.div` } ${mq.desktop} { - padding: 32px 32px 32px 96px; + padding: 0 32px 32px 96px; background-size: 670px 800px; @@ -177,21 +177,3 @@ export const ParamsPageWrapper = styled.div` } } `; - -export const LogoWrapper = styled.div` - ${mq.smallMobile} { - width: 100px; - height: 17px; - margin-bottom: 90px; - - color: ${colors.white}; - } - - ${mq.tablet} { - margin-bottom: 140px; - } - - ${mq.desktop} { - margin-bottom: 151px; - } -`; From de3a35d0f3a1d10889e3be4faf5d9559fabc79da Mon Sep 17 00:00:00 2001 From: Nikita Chebanenko <chebanikita@icloud.com> Date: Mon, 18 Sep 2023 12:58:00 +0300 Subject: [PATCH 15/16] subtitle and svgs --- src/components/ParamsBtn/ParamsBtn.jsx | 50 ++++++++++++------- src/components/ParamsBtn/ParamsBtn.styled.jsx | 13 +++++ src/components/ParamsForm/ParamsForm.jsx | 24 ++++----- .../ParamsForm/ParamsForm.styled.jsx | 4 ++ src/components/ParamsText/ParamsText.jsx | 19 ------- .../ParamsText/ParamsText.styled.jsx | 26 ---------- 6 files changed, 61 insertions(+), 75 deletions(-) delete mode 100644 src/components/ParamsText/ParamsText.jsx delete mode 100644 src/components/ParamsText/ParamsText.styled.jsx diff --git a/src/components/ParamsBtn/ParamsBtn.jsx b/src/components/ParamsBtn/ParamsBtn.jsx index 47d7bb71..744e2a5e 100644 --- a/src/components/ParamsBtn/ParamsBtn.jsx +++ b/src/components/ParamsBtn/ParamsBtn.jsx @@ -1,30 +1,46 @@ import PropTypes from 'prop-types'; -import { BtnNav } from './ParamsBtn.styled'; +import { Div, BtnNav, Svg } from './ParamsBtn.styled'; const ParamsBtn = ({ setSteps, type, step }) => { if (type === 'next') { return ( - <BtnNav - type="button" - onClick={() => { - setSteps(step); - }} - > - Next - </BtnNav> + <Div> + <BtnNav + type="button" + onClick={() => { + setSteps(step); + }} + > + Next + </BtnNav> + <Svg viewBox="0 0 20 20"> + <path + d="M11.3333 14.1666L15.5 9.99998M15.5 9.99998L11.3333 5.83331M15.5 9.99998H5.5" + + /> + </Svg> + </Div> ); } if (type === 'back') { return ( - <BtnNav - type="button" - onClick={() => { - setSteps(step); - }} - > - Back - </BtnNav> + <Div> + <Svg viewBox="0 0 20 20"> + <path + d="M8.66667 14.1666L4.5 9.99998M4.5 9.99998L8.66667 5.83331M4.5 9.99998H14.5" + + /> + </Svg> + <BtnNav + type="button" + onClick={() => { + setSteps(step); + }} + > + Back + </BtnNav> + </Div> ); } }; diff --git a/src/components/ParamsBtn/ParamsBtn.styled.jsx b/src/components/ParamsBtn/ParamsBtn.styled.jsx index fb09ccb2..07a08443 100644 --- a/src/components/ParamsBtn/ParamsBtn.styled.jsx +++ b/src/components/ParamsBtn/ParamsBtn.styled.jsx @@ -2,6 +2,13 @@ import styled from '@emotion/styled'; import { mq, colors } from '../../utils'; +export const Div = styled.div`\ + + display: inline-flex; + justify-content: center; + align-items: center; +`; + export const BtnNav = styled.button` ${mq.smallMobile} { padding-top: 0; @@ -32,3 +39,9 @@ export const BtnNav = styled.button` line-height: 150%; } `; + +export const Svg = styled.svg` + width: 20px; + height: 20px; + stroke: ${colors.orange}; +`; diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index 2e774136..c9034767 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -14,8 +14,8 @@ import { } from '@mui/material'; import ParamsBlockCard from '../ParamsBlocks/ParamsBlocks'; -import ParamsText from '../ParamsText/ParamsText'; import Title from '../Title/Title'; +import SubTitle from '../SubTitle/SubTitle'; import ParamsBtn from '../ParamsBtn/ParamsBtn'; import { @@ -54,11 +54,11 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { <SwiperSlide> <Title text={'Get closer to your goals!'} margin={14} /> - <ParamsText mb_m={'50px'} mb_t={'54px'}> - To ensure a personalized user experience and the proper - functioning of our platform, we ask you to provide the following - information about your weight, height and other relevant data: - </ParamsText> + <SubTitle + text={ + 'To ensure a personalized user experience and the proper functioning of our platform, we ask you to provide the following information about your weight, height and other relevant data: ' + } + /> <InputGroup> <FormikField @@ -412,13 +412,11 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { <SwiperSlide> <Title text={'Dear user'} margin={14} /> - <ParamsText mb_m={'28px'} mb_t={'64px'}> - Thank you for filling in all the required data. We greatly - appreciate your cooperation and commitment to a healthy - lifestyle. The collected information will allow us to provide - you with a more individual and personalized approach. - </ParamsText> - + <SubTitle + text={ + ' Thank you for filling in all the required data. We greatl appreciate your cooperation and commitment to a health lifestyle. The collected information will allow us to provide you with a more individual and personalized approach.' + } + /> <BtnSubmit>Go</BtnSubmit> <ParamsBtn setSteps={setSteps} type={'back'} step={2} /> diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx index 17b6561c..de58c000 100644 --- a/src/components/ParamsForm/ParamsForm.styled.jsx +++ b/src/components/ParamsForm/ParamsForm.styled.jsx @@ -9,12 +9,14 @@ export const InputGroup = styled.div` flex-wrap: wrap; margin: -7px; + margin-top: 50px; margin-bottom: 30px; } ${mq.tablet} { justify-content: flex-start; width: 527px; + margin-top: 54px; margin-bottom: 32px; } `; @@ -76,6 +78,7 @@ export const BtnsAndBlock = styled.div` export const BtnSubmit = styled.button` ${mq.smallMobile} { + margin-top: 28px; margin-right: 16px; padding: 12px 40px; @@ -101,6 +104,7 @@ export const BtnSubmit = styled.button` } ${mq.tablet} { + margin-top: 64px; padding: 16px 75px; font-size: 20px; diff --git a/src/components/ParamsText/ParamsText.jsx b/src/components/ParamsText/ParamsText.jsx deleted file mode 100644 index 1f2b9ab1..00000000 --- a/src/components/ParamsText/ParamsText.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Text } from './ParamsText.styled'; - -import PropTypes from 'prop-types'; - -const ParamsText = ({ mb_m, mb_t, mb_d, children }) => { - return ( - <Text mb_m={mb_m} mb_t={mb_t} mb_d={mb_d}> - {children} - </Text> - ); -}; - -ParamsText.propTypes = { - mb_m: PropTypes.string, - mb_t: PropTypes.string, - mb_d: PropTypes.string, -}; - -export default ParamsText; diff --git a/src/components/ParamsText/ParamsText.styled.jsx b/src/components/ParamsText/ParamsText.styled.jsx deleted file mode 100644 index 0f1cde35..00000000 --- a/src/components/ParamsText/ParamsText.styled.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import styled from '@emotion/styled'; -import { mq, colors } from '../../utils'; - -export const Text = styled.p` - ${mq.smallMobile} { - margin-bottom: ${props => props.mb_m}; - - font-size: 14px; - font-weight: 400; - line-height: 128.571%; - - color: ${colors.textWhite03}; - } - - ${mq.tablet} { - width: 496px; - margin-bottom: ${props => props.mb_t}; - - font-size: 16px; - line-height: 150%; - } - - ${mq.desktop} { - margin-bottom: ${props => props.mb_d}; - } -`; From a33f49e347063f640b7871ea2c943f4810d1a592 Mon Sep 17 00:00:00 2001 From: Nikita Chebanenko <chebanikita@icloud.com> Date: Mon, 18 Sep 2023 13:16:06 +0300 Subject: [PATCH 16/16] yup validation --- src/components/ParamsForm/ParamsForm.jsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index c9034767..b5c29cc8 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -1,5 +1,6 @@ import { Formik, Form } from 'formik'; import PropTypes from 'prop-types'; +import * as Yup from 'yup'; import { colors as palette } from '../../utils'; import { Swiper, SwiperSlide } from 'swiper/react'; @@ -26,6 +27,16 @@ import { BtnSubmit, } from './ParamsForm.styled'; +let paramsSchema = Yup.object({ + height: Yup.string().required(), + currentWeight: Yup.string().required(), + desiredWeight: Yup.string().required(), + birthday: Yup.string().required(), + blood: Yup.string().required(), + sex: Yup.string().required(), + levelActivity: Yup.string().required(), +}); + const ParamsForm = ({ setSteps, setSwiperRef }) => { return ( <Formik @@ -43,8 +54,9 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { Formik.resetForm(); setSteps(1); }} + validationSchema={paramsSchema} > - {({ handleChange, values }) => ( + {({ handleChange, values, errors }) => ( <Form> <Swiper spaceBetween={10} @@ -417,7 +429,8 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { ' Thank you for filling in all the required data. We greatl appreciate your cooperation and commitment to a health lifestyle. The collected information will allow us to provide you with a more individual and personalized approach.' } /> - <BtnSubmit>Go</BtnSubmit> + + <BtnSubmit>Go </BtnSubmit> <ParamsBtn setSteps={setSteps} type={'back'} step={2} />