Merge pull request #89 from MargoMarm/fix/StatisticCards

add signup and signin statistic card

src/App.jsx

@@ -82,7 +82,7 @@ function App() {
             path="/profile"
             element={<PrivateRoute component={<Profile />} redirectTo="/" />}
           />
-          <Route path="/error" element={<Error />} />
+          <Route path="*" element={<Error />} />
         </Route>
       </Routes>
     )

src/components/AuthForm/AuthForm.jsx

@@ -29,7 +29,7 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) {
   const authSchema = Yup.object().shape({
     name: validateName(nameIsShown),
     email: Yup.string()
-      .matches(emailLyout, { message: 'Email must be valid' })
+      .matches(emailLyout, { message: 'Email must be valid! For example: [email protected]' })
       .email('Invalid email')
       .required('Email is required'),
     password: Yup.string()
@@ -72,7 +72,7 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) {
         <InputContainer>
           {nameIsShown && (
             <InputWrapper>
-              <TextInput id="name" type="text" placeholder="name" name="name" />
+              <TextInput id="name" type="text" placeholder="Name" name="name" />
               <Warning>
                 <ErrorMessage name="name">
                   {msg => (
@@ -91,7 +91,7 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) {
             <TextInput
               id="email"
               type="email"
-              placeholder="email"
+              placeholder="Email"
               name="email"
             />
             <Warning>
@@ -111,7 +111,7 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) {
             <TextInput
               id="password"
               type={typePasswordInput}
-              placeholder="password"
+              placeholder="Password"
               name="password"
             />
             <ButtonIconForInput

src/components/Calendar/Calendar.styled.js

@@ -118,6 +118,7 @@ export const GlobalStyles = css`
     height: 32px;
     border-radius: 50%;
     font-size: 14px;
+    cursor: pointer;
     transition:
       color 0.3s,
       background-color 0.3s;
@@ -147,6 +148,7 @@ export const GlobalStyles = css`
     position: absolute;
     top: 16px;
     right: 40px;
+    cursor: pointer;
   }
 
   .react-datepicker__month-read-view--selected-month,

src/components/CustomNavLink/CustomNavLink.styled.jsx

@@ -27,6 +27,18 @@ export const Link = styled(NavLink)`
   font-weight: ${props => (props.isinheader === 'true' ? '400' : '500')};
   line-height: 1.13;
 
+  &.active {
+    background-color: ${colors.orange};
+  }
+
+  &.active:hover {
+    background-color: ${colors.orange};
+  }
+
+  transition:
+    background-color 0.3s,
+    border 0.3s;
+
   &:hover {
     background-color: ${props =>
       props.isorange === 'true' ? colors.orangeSecondary : 'inherit'};

src/components/ExercisesItemList/ExercisesItemList.jsx

@@ -56,7 +56,6 @@ const ExercisesList = () => {
       spaceBetween={50}
       slidesPerView={1}
       pagination={{ clickable: true }}
-      scrollbar={{ draggable: true }}
       className="pagination"
     >
       {chunkedFilters.map(arr => (

src/components/ParamsBlockСard/ParamsBlockCard.jsx

@@ -15,10 +15,10 @@ import {
   OrangeStaticText,
 } from './ParamsBlockCard.styled';
 
-const ParamsBlockCard = ({ data, measure, type, step }) => {
+const ParamsBlockCard = ({ data, measure, type, step, page }) => {
   if (type === 'grey') {
     return (
-      <GreyCard step={step}>
+      <GreyCard step={step} page={page}>
         <GreySvgWrapper>
           <GreySvg viewBox="0 0 15 18">
             <path d="M15 9L0 17.6603L0 0.339746L15 9Z" />
@@ -34,7 +34,7 @@ const ParamsBlockCard = ({ data, measure, type, step }) => {
 
   if (type === 'orange') {
     return (
-      <OrangeCard>
+      <OrangeCard page={page}>
         <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>
@@ -55,6 +55,7 @@ ParamsBlockCard.propTypes = {
   type: PropTypes.string,
   measure: PropTypes.string,
   step: PropTypes.string,
+  page: PropTypes.string,
 };
 
 export default ParamsBlockCard;

src/components/ParamsBlockСard/ParamsBlockCard.styled.jsx

@@ -5,6 +5,7 @@ export const GreyCard = styled.div`
   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;
@@ -16,16 +17,18 @@ export const GreyCard = styled.div`
   border-radius: 12px;
 
   ${mq.tablet} {
-    top: 630px;
-    left: 297px;
+    top: ${props => (props.page === 'auth' ? 526 : 630)}px;
+
+    left: ${props => (props.page === 'auth' ? 331 : 298)}px;
 
     width: 206px;
     height: 96px;
   }
 
   ${mq.desktop} {
-    left: 674px;
-    top: 300px;
+    top: ${props => (props.page === 'auth' ? 184 : 300)}px;
+
+    left: ${props => (props.page === 'auth' ? 770 : 674)}px;
   }
 `;
 
@@ -93,8 +96,9 @@ export const GreyStaticText = styled.p`
 
 export const OrangeCard = styled.div`
   position: absolute;
-  top: 625px;
-  right: 0;
+  top: ${props => (props.page === 'auth' ? 570 : 625)}px;
+  right: ${props => (props.page === 'auth' ? 20 : 0)}px;
+
   width: 119px;
   height: 76px;
   padding: 14px 18px;
@@ -105,12 +109,13 @@ export const OrangeCard = styled.div`
   ${mq.tablet} {
     top: 782px;
 
+    top: ${props => (props.page === 'auth' ? 672 : 782)}px;
+    right: ${props => (props.page === 'auth' ? 32 : 0)}px;
     width: 180px;
     height: 110px;
   }
-
   ${mq.desktop} {
-    top: 430px;
+    top: ${props => (props.page === 'auth' ? 318 : 434)}px;
   }
 `;
 

src/components/ParamsForm/ParamsForm.styled.jsx

@@ -45,6 +45,16 @@ export const FormikField = styled(Field)`
     border-color: ${colors.orange};
   }
 
+  &::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* &[type='number'] {
+    -moz-appearance: textfield;
+  } */
+
   ${mq.tablet} {
     font-size: 16px;
     line-height: 150%;

src/components/SharedLayout/SheradLayout.styled.jsx

@@ -4,19 +4,16 @@ import { mq } from '../../utils';
 
 export const Container = styled.div`
   margin: 0px auto;
-  ${'' /* padding: 0px 20px; */}
 
   ${mq.mobile} {
     width: 375px;
   }
 
   ${mq.tablet} {
     width: 768px;
-    ${'' /* padding: 0px 32px; */}
   }
 
   ${mq.desktop} {
     width: 1440px;
-    ${'' /* padding: 0px 96px; */}
   }
 `;

src/pages/Home/Home.styled.jsx

@@ -9,6 +9,7 @@ export const LinkList = styled.ul`
 `;
 
 export const Wrapper = styled.div`
+  position: relative;
   height: 685px;
   background-image: url(${imgForHome.imgMx1});
   background-repeat: no-repeat;
@@ -35,7 +36,7 @@ export const Wrapper = styled.div`
   }
 
   ${mq.tablet} {
-    height: 1024px;
+    height: 832px;
     background-image: url(${imgForHome.imgTx1});
     background-size: 437px 893px;
     padding: 0 32px;

src/pages/SignIn/SignIn.jsx

@@ -1,9 +1,10 @@
+import { useDispatch } from 'react-redux';
 import Title from '../../components/Title/Title';
 import SubTitle from '../../components/SubTitle/SubTitle';
 import AuthForm from '../../components/AuthForm/AuthForm';
 import BtnSubtitle from '../../components/BtnSubtitle/BtnSubtitle';
 import { Wrapper, WrapperDesktop } from '../Home/Home.styled';
-import { useDispatch } from 'react-redux';
+import ParamsBlockCard from '../../components/ParamsBlockСard';
 import { logInUser } from '../../redux/auth/operation';
 import { mg } from '../../utils';
 
@@ -31,6 +32,15 @@ const SignIn = () => {
           to={'/signup'}
           linkText={'Sign Up'}
         />
+
+        <ParamsBlockCard type={'grey'} page={'auth'} data={350} />
+
+        <ParamsBlockCard
+          type={'orange'}
+          page={'auth'}
+          data={500}
+          measure={'cal'}
+        />
       </Wrapper>
     </>
   );

src/pages/SignUp/SignUp.jsx

@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 import { authUser } from '../../redux/auth/operation';
 import BtnSubtitle from '../../components/BtnSubtitle/BtnSubtitle';
 import { Wrapper, WrapperDesktop } from '../Home/Home.styled';
-
+import ParamsBlockCard from '../../components/ParamsBlockСard/ParamsBlockCard';
 import { mg } from '../../utils';
 
 const SignUp = () => {
@@ -37,6 +37,15 @@ const SignUp = () => {
           to={'/signin'}
           linkText={'Sign In'}
         />
+
+        <ParamsBlockCard type={'grey'} page={'auth'} data={350} />
+
+        <ParamsBlockCard
+          type={'orange'}
+          page={'auth'}
+          data={500}
+          measure={'cal'}
+        />
       </Wrapper>
     </>
   );