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'}
/>
+
+
+
+
>
);