add object for title margin

src/components/ParamsForm/ParamsForm.jsx

@@ -2,6 +2,7 @@ import { Formik, Form } from 'formik';
 import PropTypes from 'prop-types';
 import * as Yup from 'yup';
 import { colors as palette } from '../../utils';
+import { mg } from '../../utils';
 
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
@@ -37,6 +38,7 @@ let paramsSchema = Yup.object({
   levelActivity: Yup.string().required(),
 });
 
+
 const ParamsForm = ({ setSteps, setSwiperRef }) => {
   return (
     <Formik
@@ -64,7 +66,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
             onSwiper={setSwiperRef}
           >
             <SwiperSlide>
-              <Title text={'Get closer to your goals!'} margin={14} />
+              <Title text={'Get closer to your goals!'} margin={mg} />
 
               <SubTitle
                 text={
@@ -122,7 +124,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
             </SwiperSlide>
 
             <SwiperSlide>
-              <Title text={'Get closer to your goals!'} margin={28} />
+              <Title text={'Get closer to your goals!'} margin={mg} />
 
               <FormControl style={{ marginBottom: '28px' }}>
                 <FormRadioBtnGroupWrapper>
@@ -422,7 +424,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
               />
             </SwiperSlide>
             <SwiperSlide>
-              <Title text={'Dear user'} margin={14} />
+              <Title text={'Dear user'} margin={mg} />
 
               <SubTitle
                 text={

src/components/Title/Title.jsx

@@ -7,7 +7,7 @@ const Title = ({ text, margin }) => {
 
 Title.propTypes = {
   text: PropTypes.string,
-  margin: PropTypes.number,
+  margin: PropTypes.object,
 };
 
 export default Title;

src/components/Title/Title.styled.jsx

@@ -10,18 +10,18 @@ export const StyledTitle = styled.h2`
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: 0.38px;
-  margin-bottom: ${props => props.margin}px;
+  margin-bottom: ${props => props.margin.bt.mob}px;
 
   ${mq.tablet} {
-    margin-bottom: ${props => props.margin + 2}px;
-    margin-top: 105px;
+    margin-bottom: ${props => props.margin.bt.tab}px;
+    margin-top: ${props => props.margin.top.tab}px;
     font-size: 32px;
 
     line-height: 1.11;
     letter-spacing: 0.7px;
   }
 
   ${mq.desktop} {
-	margin-top: 116px;
+    margin-top: ${props => props.margin.top.desk}px;
   }
 `;

src/pages/SignIn/SignIn.jsx

@@ -6,6 +6,7 @@ import BtnSubtitle from '../../components/BtnSubtitle/BtnSubtitle';
 import { Wrapper } from '../Home/Home.styled';
 import { useDispatch } from 'react-redux';
 import { logInUser } from '../../redux/auth/operation';
+import {mg} from '../../utils'
 
 const SignIn = () => {
   const dispatch = useDispatch();
@@ -18,7 +19,7 @@ const SignIn = () => {
   return (
     <Wrapper>
       <Header />
-      <Title text={'Sign In'} margin={14} />
+      <Title text={'Sign In'} margin={mg} />
       <SubTitle
         text={
           'Welcome! Please enter your credentials to login to the platform:'

src/pages/SignUp/SignUp.jsx

@@ -7,18 +7,23 @@ import { authUser } from '../../redux/auth/operation';
 import BtnSubtitle from '../../components/BtnSubtitle/BtnSubtitle';
 import { Wrapper } from '../Home/Home.styled';
 
+import { mg } from '../../utils';
+
+
 const SignUp = () => {
   const dispatch = useDispatch();
   const handleSubmit = (user, { resetForm }) => {
     console.log(user);
     dispatch(authUser(user));
     resetForm();
   };
+
+
 
   return (
     <Wrapper>
       <Header />
-      <Title text={'Sign Up'} margin={14} />
+      <Title text={'Sign Up'} margin={mg} />
       <SubTitle
         text={
           'Thank you for your interest in our platform. To complete the registration process, please provide us with the following information.'

src/utils/index.js

@@ -2,4 +2,6 @@ export { default as colors } from './colorVeriables'
 export { default as mq } from './mediaQuery'
 export { default as button } from './customBtn'
 export { default as svgUser } from './svgUser'
-export {default as pageContentToRender} from './pageContentToRender'
+export { default as pageContentToRender } from './pageContentToRender'
+export { default as mg } from './titleMargins';
+

src/utils/titleMargins.js

@@ -0,0 +1,12 @@
+const mg = {
+  top: {
+    desk: 116,
+    tab: 105,
+  },
+  bt: {
+    tab: 16,
+    mob: 14,
+  },
+};
+
+export default mg