Merge pull request #28 from MargoMarm/fix/ParamsForm

Fix/params form
MargoMarm · Sep 18, 2023 · 4ed3574 · 4ed3574
2 parents 80385d2 + 525ed27
commit 4ed3574
Show file tree

Hide file tree

Showing 13 changed files with 48 additions and 164 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -9,7 +9,7 @@ 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 Params = lazy(() => import('../src/pages/Params'));
 
 const Exercises = lazy(() => import('../src/pages/Exercises/Exercises'));
 
@@ -19,7 +19,6 @@ const Dairy = lazy(() => import('../src/pages/Diary/Dairy'));
 const test = import.meta.env.VITE_API_TEST;
 
 function App() {
-
   console.log(test);
 
   return (

diff --git a/src/components/ParamsBar/index.js b/src/components/ParamsBar/index.js
@@ -0,0 +1 @@
+export { default } from './ParamsBar';
diff --git a/src/components/ParamsBlocks/ParamsBlocks.jsx → ...nents/ParamsBlockСard/ParamsBlockCard.jsx b/src/components/ParamsBlocks/ParamsBlocks.jsx → ...nents/ParamsBlockСard/ParamsBlockCard.jsx
@@ -13,41 +13,12 @@ import {
   OrangeTextWrapper,
   OrangeDynamicText,
   OrangeStaticText,
-} from './ParamsBlocks.styled';
+} from './ParamsBlockCard.styled';
 
-const ParamsBlockCard = ({
-  data,
-  measure,
-  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,
-}) => {
+const ParamsBlockCard = ({ data, measure, type, step }) => {
   if (type === 'grey') {
     return (
-      <GreyCard
-        mt_m={mt_m}
-        mr_m={mr_m}
-        mb_m={mb_m}
-        ml_m={ml_m}
-        mt_t={mt_t}
-        mr_t={mr_t}
-        mb_t={mb_t}
-        ml_t={ml_t}
-        mt_d={mt_d}
-        mr_d={mr_d}
-        mb_d={mb_d}
-        ml_d={ml_d}
-      >
+      <GreyCard step={step}>
         <GreySvgWrapper>
           <GreySvg viewBox="0 0 15 18">
             <path d="M15 9L0 17.6603L0 0.339746L15 9Z" />
@@ -63,20 +34,7 @@ const ParamsBlockCard = ({
 
   if (type === 'orange') {
     return (
-      <OrangeCard
-        mt_m={mt_m}
-        mr_m={mr_m}
-        mb_m={mb_m}
-        ml_m={ml_m}
-        mt_t={mt_t}
-        mr_t={mr_t}
-        mb_t={mb_t}
-        ml_t={ml_t}
-        mt_d={mt_d}
-        mr_d={mr_d}
-        mb_d={mb_d}
-        ml_d={ml_d}
-      >
+      <OrangeCard>
         <OrangeSvgWrapper>
           <OrangeSvg viewBox="0 0 32 32">
             <path d="M29.647 9.451c-0.419-0.501-1.166-0.567-1.667-0.149l-3.282 2.757-1.509-3.739c-0.054-0.14-0.135-0.258-0.229-0.362-0.308-0.686-0.844-1.275-1.582-1.617-0.32-0.146-0.652-0.224-0.982-0.262-0.073-0.038-0.139-0.088-0.222-0.114l-5.775-1.61c-0.324-0.088-0.65-0.031-0.917 0.125-0.317 0.107-0.589 0.338-0.719 0.672l-2.175 5.592c-0.236 0.608 0.066 1.294 0.676 1.534 0.607 0.236 1.294-0.068 1.532-0.678l1.837-4.722 2.63 0.731c-0.064 0.104-0.133 0.201-0.185 0.312l-3.372 7.309c-0.049 0.107-0.075 0.217-0.109 0.328l-4.098 6.871-6.859 2.294c-0.776 0.58-0.941 1.674-0.367 2.45 0.577 0.778 1.674 0.943 2.448 0.369l7.018-2.417c0.215-0.156 0.371-0.36 0.489-0.58 0.088-0.094 0.189-0.168 0.256-0.284l2.443-4.096 4.337 3.696-4.641 5.23c-0.639 0.721-0.575 1.832 0.149 2.469 0.723 0.643 1.83 0.575 2.473-0.149l5.791-6.524c0.18-0.201 0.288-0.433 0.36-0.676 0.043-0.132 0.043-0.269 0.054-0.406 0-0.069 0.026-0.132 0.021-0.196-0.016-0.478-0.21-0.943-0.601-1.274l-3.991-3.403c0.288-0.274 0.532-0.6 0.709-0.983l2.585-5.599 0.828 2.206c0.035 0.196 0.1 0.388 0.239 0.549 0.125 0.149 0.284 0.248 0.454 0.317 0.017 0.009 0.038 0.010 0.059 0.016 0.107 0.038 0.216 0.075 0.329 0.080 0.133 0.012 0.269-0.005 0.405-0.043 0.004-0.002 0.005-0.002 0.005-0.002 0.036-0.009 0.073-0.002 0.109-0.017 0.192-0.073 0.34-0.196 0.466-0.34l4.71-3.998c0.501-0.421 0.289-1.166-0.132-1.667z"></path>
@@ -96,18 +54,7 @@ ParamsBlockCard.propTypes = {
   data: PropTypes.number,
   type: PropTypes.string,
   measure: 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,
+  steps: PropTypes.string,
 };
 
 export default ParamsBlockCard;
diff --git a/...ents/ParamsBlocks/ParamsBlocks.styled.jsx → ...aramsBlockСard/ParamsBlockCard.styled.jsx b/...ents/ParamsBlocks/ParamsBlocks.styled.jsx → ...aramsBlockСard/ParamsBlockCard.styled.jsx
@@ -2,38 +2,32 @@ import styled from '@emotion/styled';
 import { mq, colors } from '../../utils';
 
 export const GreyCard = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
   ${mq.smallMobile} {
+    position: absolute;
+    top: ${props => (props.step === '2' ? 534 : 474)}px;
+    left: ${props => (props.step === '2' ? 154 : 101)}px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     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};
+    top: 630px;
+    left: 297px;
 
     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};
+    left: 674px;
+    top: 300px;
   }
 `;
 
@@ -109,33 +103,25 @@ export const GreyStaticText = styled.p`
 
 export const OrangeCard = styled.div`
   ${mq.smallMobile} {
-    padding: 14px 18px;
+    position: absolute;
+    top: 625px;
+    right: 0;
     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};
+    padding: 14px 18px;
 
     border-radius: 12px;
     background: ${colors.orangeSecondary};
   }
   ${mq.tablet} {
+    top: 782px;
+
     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};
+    top: 430px;
   }
 `;
 

diff --git a/src/components/ParamsBlockСard/index.js b/src/components/ParamsBlockСard/index.js
@@ -0,0 +1 @@
+export { default } from './ParamsBlockCard';
diff --git a/src/components/ParamsBtn/ParamsBtn.jsx b/src/components/ParamsBtn/ParamsBtn.jsx
@@ -14,10 +14,7 @@ const ParamsBtn = ({ setSteps, type, 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"
-
-          />
+          <path d="M11.3333 14.1666L15.5 9.99998M15.5 9.99998L11.3333 5.83331M15.5 9.99998H5.5" />
         </Svg>
       </Div>
     );
@@ -27,10 +24,7 @@ const ParamsBtn = ({ setSteps, type, step }) => {
     return (
       <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"
-
-          />
+          <path d="M8.66667 14.1666L4.5 9.99998M4.5 9.99998L8.66667 5.83331M4.5 9.99998H14.5" />
         </Svg>
         <BtnNav
           type="button"

diff --git a/src/components/ParamsBtn/index.js b/src/components/ParamsBtn/index.js
@@ -0,0 +1 @@
+export { default } from './ParamsBtn';
diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx
@@ -15,10 +15,10 @@ import {
   colors,
 } from '@mui/material';
 
-import ParamsBlockCard from '../ParamsBlocks/ParamsBlocks';
+import ParamsBlockCard from '../ParamsBlockСard';
+import ParamsBtn from '../ParamsBtn';
 import Title from '../Title/Title';
 import SubTitle from '../SubTitle/SubTitle';
-import ParamsBtn from '../ParamsBtn/ParamsBtn';
 
 import {
   FormikField,
@@ -100,27 +100,9 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
 
               <ParamsBtn setSteps={setSteps} type={'next'} step={2} />
 
-              <ParamsBlockCard
-                type={'grey'}
-                data={350}
-                mt_m={'100px'}
-                ml_m={'101px'}
-                mb_m={'75px'}
-                mt_t={'165px'}
-                ml_t={'311px'}
-                mb_t={'56px'}
-                mt_d={'-200px'}
-                ml_d={'674px'}
-              />
+              <ParamsBlockCard type={'grey'} data={350} />
 
-              <ParamsBlockCard
-                data={100}
-                measure={'users'}
-                type={'orange'}
-                ml_m={'auto'}
-                mb_m={'16px'}
-                mb_t={'12px'}
-              />
+              <ParamsBlockCard data={100} measure={'users'} type={'orange'} />
             </SwiperSlide>
 
             <SwiperSlide>
@@ -280,6 +262,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
                 <RadioGroup
                   aria-labelledby="demo-radio-buttons-group-label"
                   name="radio-buttons-group3"
+                  style={{ padding: '2px' }}
                 >
                   <FormLabel
                     style={{
@@ -401,27 +384,10 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
                 <ParamsBtn setSteps={setSteps} type={'back'} step={1} />
                 <ParamsBtn setSteps={setSteps} type={'next'} step={3} />
 
-                <ParamsBlockCard
-                  data={350}
-                  type={'grey'}
-                  ml_m={'20px'}
-                  mt_t={'40px'}
-                  ml_t={'165px'}
-                  ml_d={'580px'}
-                  mt_d={'-310px'}
-                />
+                <ParamsBlockCard data={350} type={'grey'} step={'2'} />
               </BtnsAndBlock>
 
-              <ParamsBlockCard
-                type={'orange'}
-                data={24}
-                measure={'hours'}
-                ml_m={'auto'}
-                mb_m={'16px'}
-                mb_t={'12px'}
-                mt_d={'-260px'}
-                mb_d={'142px'}
-              />
+              <ParamsBlockCard type={'orange'} data={24} measure={'hours'} />
             </SwiperSlide>
             <SwiperSlide>
               <Title text={'Dear user'} margin={mg} />
@@ -436,25 +402,8 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
 
               <ParamsBtn setSteps={setSteps} type={'back'} step={2} />
 
-              <ParamsBlockCard
-                data={350}
-                type={'grey'}
-                mt_m={'276px'}
-                ml_m={'101px'}
-                mb_m={'25px'}
-                mt_t={'249px'}
-                ml_t={'297px'}
-                mb_t={'56px'}
-                mt_d={'-80px'}
-                mb_d={'40px'}
-                ml_d={'674px'}
-              />
-              <ParamsBlockCard
-                data={300}
-                measure={'ex'}
-                type={'orange'}
-                ml_m={'auto'}
-              />
+              <ParamsBlockCard data={350} type={'grey'} />
+              <ParamsBlockCard data={300} measure={'ex'} type={'orange'} />
             </SwiperSlide>
           </Swiper>
         </Form>

diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx
@@ -58,6 +58,7 @@ export const FormRadioBtnGroupWrapper = styled.div`
   ${mq.smallMobile} {
     display: flex;
     margin-bottom: 28px;
+    padding-left: 2px;
   }
 
   ${mq.tablet} {
@@ -69,10 +70,13 @@ export const BtnsAndBlock = styled.div`
   ${mq.smallMobile} {
     display: flex;
     align-items: flex-start;
-    margin-bottom: 25px;
+    margin-bottom: 159px;
   }
   ${mq.tablet} {
-    margin-bottom: 56px;
+    margin-bottom: 283px;
+  }
+  ${mq.desktop} {
+    margin-bottom: 48px;
   }
 `;
 

diff --git a/src/components/ParamsForm/index.js b/src/components/ParamsForm/index.js
@@ -0,0 +1 @@
+export { default } from './ParamsForm';
diff --git a/src/index.css b/src/index.css
@@ -64,7 +64,7 @@ button {
   color: #efede8;
   font-size: 14px;
   font-weight: 400;
-  line-height: 128%; /* 128.571% */
+  line-height: 128%; 
   letter-spacing: normal;
 
   @media screen and (min-width: 768px) {

diff --git a/src/pages/Params/Params.jsx b/src/pages/Params/Params.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import Header from '../../components/headersComp/Header/Header';
-import ParamsForm from '../../components/ParamsForm/ParamsForm';
-import ParamsBar from '../../components/ParamsBar/ParamsBar';
+import ParamsForm from '../../components/ParamsForm';
+import ParamsBar from '../../components/ParamsBar';
 import { ParamsPageWrapper } from './Params.styled';
 
 const Params = () => {

diff --git a/src/pages/Params/index.js b/src/pages/Params/index.js
@@ -0,0 +1 @@
+export { default } from './Params';