diff --git a/src/App.jsx b/src/App.jsx index a0d4cbfe..e446be6d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -82,7 +82,7 @@ function App() { path="/profile" element={} redirectTo="/" />} /> - } /> + } /> ) diff --git a/src/components/AuthForm/AuthForm.jsx b/src/components/AuthForm/AuthForm.jsx index 162a45d1..f16d694f 100644 --- a/src/components/AuthForm/AuthForm.jsx +++ b/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: example@gmail.com' }) .email('Invalid email') .required('Email is required'), password: Yup.string() @@ -72,7 +72,7 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) { {nameIsShown && ( - + {msg => ( @@ -91,7 +91,7 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) { @@ -111,7 +111,7 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) { (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'}; diff --git a/src/components/ExercisesItemList/ExercisesItemList.jsx b/src/components/ExercisesItemList/ExercisesItemList.jsx index 53d35e74..76e7d262 100644 --- a/src/components/ExercisesItemList/ExercisesItemList.jsx +++ b/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 => ( diff --git "a/src/components/ParamsBlock\320\241ard/ParamsBlockCard.jsx" "b/src/components/ParamsBlock\320\241ard/ParamsBlockCard.jsx" index c3337ace..93339258 100644 --- "a/src/components/ParamsBlock\320\241ard/ParamsBlockCard.jsx" +++ "b/src/components/ParamsBlock\320\241ard/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 ( - + @@ -34,7 +34,7 @@ const ParamsBlockCard = ({ data, measure, type, step }) => { if (type === 'orange') { return ( - + @@ -55,6 +55,7 @@ ParamsBlockCard.propTypes = { type: PropTypes.string, measure: PropTypes.string, step: PropTypes.string, + page: PropTypes.string, }; export default ParamsBlockCard; diff --git "a/src/components/ParamsBlock\320\241ard/ParamsBlockCard.styled.jsx" "b/src/components/ParamsBlock\320\241ard/ParamsBlockCard.styled.jsx" index ca434090..47da86ad 100644 --- "a/src/components/ParamsBlock\320\241ard/ParamsBlockCard.styled.jsx" +++ "b/src/components/ParamsBlock\320\241ard/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; } `; diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx index 2f7f97c3..068739d3 100644 --- a/src/components/ParamsForm/ParamsForm.styled.jsx +++ b/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%; diff --git a/src/components/SharedLayout/SheradLayout.styled.jsx b/src/components/SharedLayout/SheradLayout.styled.jsx index 567a3a23..014deacf 100644 --- a/src/components/SharedLayout/SheradLayout.styled.jsx +++ b/src/components/SharedLayout/SheradLayout.styled.jsx @@ -4,7 +4,6 @@ import { mq } from '../../utils'; export const Container = styled.div` margin: 0px auto; - ${'' /* padding: 0px 20px; */} ${mq.mobile} { width: 375px; @@ -12,11 +11,9 @@ export const Container = styled.div` ${mq.tablet} { width: 768px; - ${'' /* padding: 0px 32px; */} } ${mq.desktop} { width: 1440px; - ${'' /* padding: 0px 96px; */} } `; diff --git a/src/httpRequests/addToDiary.js b/src/httpRequests/addToDiary.js deleted file mode 100644 index 94fba6c8..00000000 --- a/src/httpRequests/addToDiary.js +++ /dev/null @@ -1,12 +0,0 @@ -import axios from 'axios'; -import { toast } from 'react-toastify'; - -export const addToDiary = async exercise => { - try { - const { data } = await axios.post('/api/diary/add-exercise', exercise); - return data; - } catch (error) { - toast.error('Oops... Something went wrong! Try again!'); - console.log(error); - } -}; diff --git a/src/pages/Home/Home.styled.jsx b/src/pages/Home/Home.styled.jsx index cd709f58..a980c758 100644 --- a/src/pages/Home/Home.styled.jsx +++ b/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; diff --git a/src/pages/SignIn/SignIn.jsx b/src/pages/SignIn/SignIn.jsx index 4bd4824f..24208364 100644 --- a/src/pages/SignIn/SignIn.jsx +++ b/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'} /> + + + + ); diff --git a/src/pages/SignUp/SignUp.jsx b/src/pages/SignUp/SignUp.jsx index 3e5d81c5..db515ffe 100644 --- a/src/pages/SignUp/SignUp.jsx +++ b/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'} /> + + + + );