Skip to content

Commit

Permalink
Merge branch 'main' into fix/Header
Browse files Browse the repository at this point in the history
  • Loading branch information
MargoMarm committed Sep 25, 2023
2 parents 591db71 + bd52864 commit 8a97b40
Show file tree
Hide file tree
Showing 27 changed files with 249 additions and 71 deletions.
41 changes: 41 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"react-dom": "^18.2.0",
"react-loader-spinner": "^5.4.5",
"react-redux": "^8.1.2",
"react-responsive": "^9.0.2",
"react-router-dom": "^6.15.0",
"react-table": "^7.8.0",
"react-toastify": "^9.1.3",
Expand Down
6 changes: 4 additions & 2 deletions src/components/AddProductForm/AddProductForm.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
import formatDate from '../../utils/formatDate';

function AddProductForm({ data, closeModal, addProduct }) {
const [quantity, setQuantity] = useState(0);
const [quantity, setQuantity] = useState('');

const amount = Math.round((quantity * data.calories) / 100);
const date = formatDate(new Date());
Expand All @@ -28,12 +28,14 @@ function AddProductForm({ data, closeModal, addProduct }) {

<label>
<InputQuantity

placeholder="grams"
type="number"
value={quantity}
onChange={e => setQuantity(e.target.value)}
/>
</label>
</label>

</InputContainer>

<Calories>
Expand Down
7 changes: 7 additions & 0 deletions src/components/AddProductForm/AddProductForm.styled.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,12 @@ export const InputTitle = styled.input`
width: 244px;
height: 40px;
}
`;

export const InputQuantity = styled.input`
position: relative;
width: 287px;
height: 34px;
padding: 8px 14px;
Expand Down Expand Up @@ -66,6 +69,10 @@ export const InputQuantity = styled.input`
height: 40px;
margin-top: 0;
}
:focus-visible {
outline: 2px solid ${colors.orange};
}
`;

export const Calories = styled.p`
Expand Down
9 changes: 6 additions & 3 deletions src/components/AuthForm/AuthForm.styled.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { colors, mq } from '../../utils';
import { Form, Field } from 'formik';

export const FormContainer = styled(Form)`
width: 335px;
margin-top: 28px;
${mq.tablet} {
margin-top: 32px;
width: 364px;
Expand All @@ -15,10 +15,10 @@ export const InputContainer = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 21px;
gap: 28px;
margin-bottom: 28px;
${mq.tablet} {
gap: 24px;
gap: 32px;
margin-bottom: 64px;
}
`;
Expand Down Expand Up @@ -55,6 +55,9 @@ export const TextInput = styled(Field)`

export const Warning = styled.div`
position: absolute;
${mq.smallMobile} {
bottom: -24px;
}
`;

export const Error = styled.div`
Expand Down
6 changes: 3 additions & 3 deletions src/components/ButtonIconForInput/ButtonIconForInput.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import PropTypes from 'prop-types';
import { Button } from './ButtonIconForInput.styled';

export default function ButtonIconForInput({ children, onClick, right, type }) {
export default function ButtonIconForInput({ children, onClick, right, type, }) {
return (
<Button onClick={onClick} right={right} type={type}>
<Button onClick={onClick} right={right} type={type} >
{children}
</Button>
);
Expand All @@ -12,6 +12,6 @@ export default function ButtonIconForInput({ children, onClick, right, type }) {
ButtonIconForInput.propTypes = {
// onClick: PropTypes.func.isRequired,
right: PropTypes.string,
type: PropTypes.string.isRequired,
type: PropTypes.string,
children: PropTypes.object.isRequired,
};
2 changes: 1 addition & 1 deletion src/components/DailyStatsCards/DailyStatsCards.styled.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { colors, mq } from '../../utils';

export const CardWrap = styled.div`
export const CardWrap = styled.li`
box-sizing: border-box;
border: 1px solid;
Expand Down
43 changes: 42 additions & 1 deletion src/components/DiaryStatisticsList/DiaryStatisticsList.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,11 @@ import {
consumedCalories,
doneExercisesTime,
} from '../../redux/diary/selectors';
import { useMediaQuery } from 'react-responsive';

const DairyStatisticList = () => {
const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1439 });

const dayliTime = useSelector(selectDailyTime);
const dailyСalories = useSelector(selectDailyСalories);
const burnCalories = useSelector(burnedCalories);
Expand All @@ -31,7 +34,45 @@ const DairyStatisticList = () => {
let resultTime = dayliTime - result.minutes;
let theRestOfTheСalories = dailyСalories - consumCalories;

return (
return isTablet ? (
<List>
{' '}
<DailyStatsCards
icon="fork-and-knife"
fill="true"
label="Daily calorie intake"
keyValue={dailyСalories}
></DailyStatsCards>
<DailyStatsCards
icon="apple"
label="Сalories consumed"
keyValue={consumCalories}
></DailyStatsCards>
<DailyStatsCards
icon="bubble"
label="The rest of the calories"
keyValue={theRestOfTheСalories}
border={theRestOfTheСalories < 0 ? 'red' : 'default'}
></DailyStatsCards>
<DailyStatsCards
icon="barbell"
fill="true"
label="Daily norm of sports"
keyValue={dayliTime + ' min'}
></DailyStatsCards>
<DailyStatsCards
icon="fire"
label="Сalories burned"
keyValue={burnCalories}
></DailyStatsCards>
<DailyStatsCards
icon="runningMan"
label="The rest of sports"
keyValue={resultTime + ' min'}
border={resultTime > dayliTime ? 'green' : 'default'}
></DailyStatsCards>
</List>
) : (
<List>
<DailyStatsCards
icon="fork-and-knife"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ import { mq, colors } from '../../utils';

export const List = styled.ul`
display: grid;
width: 335px;
gap: 13px;
grid-template-columns: repeat(2, 1fr);
${mq.tablet} {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
width: 593px;
}
${mq.desktop} {
grid-template-columns: repeat(2, 1fr);
Expand Down
16 changes: 16 additions & 0 deletions src/components/EmptyProductList/EmptyProductList.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import {TextContainer, MainText, AccentText } from './EmptyProductList.styled';

import PropTypes from 'prop-types';

const EmptyProductList = () => {
return (
<TextContainer>
<MainText> <AccentText>Sorry, no results were found</AccentText> for the product filters you selected. You may want to consider other search options to find the product you want. Our range is wide and you have the opportunity to find more options that suit your needs.</MainText>
<AccentText>Try changing the search parameters.</AccentText>
</TextContainer>
);
};



export default EmptyProductList;
38 changes: 38 additions & 0 deletions src/components/EmptyProductList/EmptyProductList.styled.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import styled from '@emotion/styled';
import { mq } from '../../utils';

export const TextContainer = styled.div`
${mq.tablet} {
width: 580px;
margin-top: 45px;
}
${mq.desktop} {
margin-top: 100px;
}
`;
export const MainText = styled.p`
color: rgba(239, 237, 232, 0.30);
margin-bottom: 16px;
font-size: 14px;
line-height: 1.28;
${mq.tablet} {
}
${mq.desktop} {
}
`;
export const AccentText = styled.span`
color: #E6533C;
font-size: 14px;
line-height: 1.28;
${mq.tablet} {
gap: 32px;
}
${mq.desktop} {
}
`;
4 changes: 1 addition & 3 deletions src/components/ExercisesItem/ExercisesItem.styled.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@ export const Item = styled.li`
margin-bottom: 0px;
}
// &:nth-child(10) {
// margin-bottom: 0;
// }
${mq.tablet} {
flex-basis: calc((100% - 32px) / 3);
Expand Down
Loading

0 comments on commit 8a97b40

Please sign in to comment.