Merge pull request #16 from Mayotopia04/bhie-branch

From Bhie-branch: updated additonal head, background, daily calorie intake and calculat…

src/components/AdditionalHeaderField/AdditionalHeaderField.jsx

@@ -1,9 +1,46 @@
-import React from 'react'
+import s from './AdditionalHeaderField.module.css';
+import { ReactComponent as BackArrow } from 'assets/icons/back-arrow.svg';
+import { UserInfo } from 'components';
+import { useSelector, useDispatch } from 'react-redux';
+import { getModalStatus } from 'redux/auth/auth-selector';
+import { Link, useLocation } from 'react-router-dom';
+import { updateModalStatus } from 'redux/auth/auth-slice';
+import { getLoginStatus } from 'redux/auth/auth-selector';
 
 const AdditionalHeaderField = () => {
-    return (
-        <div>AdditionalHeaderField</div>
-    )
-}
+  const showModal = useSelector(getModalStatus);
+  const { pathname } = useLocation();
+  const isLogin = useSelector(getLoginStatus);
+  const dispatch = useDispatch();
+  return (
+    <div className={s.block}>
+      {showModal && (
+        <button
+          className={s.btn}
+          onClick={() => {
+            dispatch(updateModalStatus(false));
+          }}
+        >
+          <BackArrow className={s.icon} />
+        </button>
+      )}
+      {pathname === '/diary' && (
+        <Link to="/calculator">
+          <BackArrow className={s.icon} />
+        </Link>
+      )}
+      {pathname === '/diary-mobile-form' && (
+        <Link to="/diary">
+          <BackArrow className={s.icon} />
+        </Link>
+      )}
+      {isLogin && (
+        <div className={s.thumb}>
+          <UserInfo />
+        </div>
+      )}
+    </div>
+  );
+};
 
-export default AdditionalHeaderField;
+export default AdditionalHeaderField;

src/components/AdditionalHeaderField/AdditionalHeaderField.module.css

@@ -1,3 +1,27 @@
-.block {
+@media screen and (max-width: 767px) {
+  .block {
+    position: relative;
     display: flex;
-}
+    justify-content: space-between;
+    align-items: center;
+    background-color: #eff1f3;
+    width: 100%;
+    height: 40px;
+    padding: 0 20px;
+  }
+  .icon {
+    stroke: var(--main-color);
+  }
+  .icon:hover {
+    stroke: var(--accent-color);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .block {
+    display: none;
+  }
+}
+.btn {
+  border: none;
+}

src/components/Background/Background.js

@@ -1,9 +1,29 @@
-import React from 'react';
+import s from './Background.module.css';
+import { useSelector } from 'react-redux';
+import { getLoginStatus } from 'redux/auth/auth-selector';
+import { useLocation } from 'react-router-dom';
+
+const Background = ({ children }) => {
+  const isLogin = useSelector(getLoginStatus);
+  const { pathname } = useLocation();
+  const style = (function () {
+    if (pathname === '/registration' || pathname === '/login' || pathname === '/forgot-password') {
+      if (window.innerWidth >= 1280) {
+        return s.backgroundHome;
+      }
+      return s.backgroundAuth;
+    } else if (isLogin) {
+      return s.backgroundDiaryCalc;
+    } else {
+      return s.backgroundHome;
+    }
+  })();
 
-const Background = () => {
   return (
-    <div>Background</div>
-  )
-}
+    <>
+      <div className={style}>{children}</div>
+    </>
+  );
+};
 
-export default Background;
+export default Background;

src/components/Background/Background.module.css

@@ -1 +1,61 @@
-/* Background.module.css */
+.backgroundHome,
+.backgroundAuth,
+.backgroundDiaryCalc {
+  min-height: 100vh;
+}
+
+@media screen and (min-width: 768px) and (max-width: 1279px) {
+  .backgroundHome {
+    background: url(../../assets/png/backgroundTab_x1.png) no-repeat 100% 100%;
+    background-size: 768px 563px;
+  }
+  .backgroundAuth {
+    background: url(../../assets/png/backgroundTabAuth_x1.png) no-repeat 100% 100%;
+    background-size: 752px 944px;
+  }
+  @media screen and (min-device-pixel-ratio: 2),
+    screen and (-webkit-min-device-pixel-ratio: 2),
+    screen and (-o-min-device-pixel-ratio: 2/1),
+    screen and (min-resolution: 192dpi),
+    screen and (min-resolution: 2dppx) {
+    .backgroundHome {
+      background-image: url(../../assets/png/backgroundTab_x2.png);
+    }
+    .backgroundAuth {
+      background: url(../../assets/png/backgroundTabAuth_x2.png) no-repeat 100% 100%;
+    }
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .backgroundHome {
+    background-image: url(../../assets/png/backgroundAuthDeskTop_x1.png);
+    background-position: right;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+  .backgroundDiaryCalc {
+    background-image: url(../../assets/png/backgroundDiaryCalcDeskTop_x1.png),
+      linear-gradient(to right, var(--bg-color) 59.6%, var(--scroll-color) 59.6%);
+    background-repeat: no-repeat;
+    background-position: 100% 0%;
+    background-size: contain, 100% 100%;
+  }
+
+  @media screen and (min-device-pixel-ratio: 2),
+    screen and (-webkit-min-device-pixel-ratio: 2),
+    screen and (-o-min-device-pixel-ratio: 2/1),
+    screen and (min-resolution: 192dpi),
+    screen and (min-resolution: 2dppx) {
+    /* .backgroundHome {
+      background-image: url(../../assets/png/backgroundAuthDeskTop_x2.png);
+    } */
+    .backgroundHome {
+      background-image: url(../../assets/png/backgroundAuthDeskTop_x2.png);
+    }
+    .backgroundDiaryCalc {
+      background-image: url(../../assets/png/backgroundDiaryCalcDeskTop_x2.png),
+        linear-gradient(to right, var(--bg-color) 59.6%, var(--scroll-color) 59.6%);
+    }
+  }
+}

src/components/Button/Button.jsx

@@ -1,9 +1,41 @@
-import React from 'react'
+import PropTypes from 'prop-types';
 
-const Button = () => {
-    return (
-        <div>Button</div>
-    )
-}
+import s from '../Button/Button.module.css';
 
-export default Button;
+// The button accepts 4 props.
+
+// 1. text = Required props button text.
+// 2. isPrimaryButton = Optional props, default is true if you want the
+//  which the background is white and the border orange transmit isPrimaryButton={false}.
+// 3. width = Required minimum prop size,
+//  since one Add button, login/registration buttons,
+//  different width calculator buttons.
+// 4. onClick =  props action when clicking.
+
+
+
+const Button = ({ text, isPrimaryButton = true, width, onClick, isDisabled = false }) => {
+  const buttonClass = isPrimaryButton ? s.primaryButton : s.secondaryButton;
+
+  return (
+    <button
+      onClick={onClick}
+      style={{ minWidth: width }}
+      disabled={isDisabled}
+      type="submit"
+      className={buttonClass}
+    >
+      {text}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  text: PropTypes.string.isRequired,
+  isPrimaryButton: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  width: PropTypes.number.isRequired,
+  onClick: PropTypes.func,
+};
+
+export default Button;

src/components/Button/Button.module.css

@@ -1,4 +1,67 @@
-/* Primary Button */
+/* Primary button */
+
 .primaryButton {
-    display: block;
-}
+  display: block;
+
+  height: 44px;
+  padding: 13px 0px;
+
+  background: var(--accent-color);
+  box-shadow: var(--btn-box-shadow);
+
+  border: none;
+  border-radius: 30px;
+
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.2;
+  text-align: center;
+  letter-spacing: 0.04em;
+
+  color: var(--bg-color);
+
+  transition: all 250ms linear;
+}
+
+.primaryButton:hover,
+.primaryButton:focus {
+  background: var(--bg-color);
+  border: 2px solid var(--accent-color);
+  color: var(--accent-color);
+}
+
+/* Secondary button */
+
+.secondaryButton {
+  display: block;
+  margin: 0 auto;
+  height: 44px;
+  padding: 13px 0px;
+
+  background: var(--bg-color);
+
+  border-radius: 30px;
+  border: 2px solid var(--accent-color);
+
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.2;
+  text-align: center;
+  letter-spacing: 0.04em;
+
+  color: var(--accent-color);
+
+  transition: all 250ms linear;
+}
+
+.secondaryButton:hover,
+.secondaryButton:focus {
+  background: var(--accent-color);
+  border: none;
+  color: var(--bg-color);
+}
+
+.secondaryButton[disabled] {
+  opacity: 0.75;
+  pointer-events: none;
+}

src/components/DailyCalorieIntake/DailyCalorieIntake.jsx

@@ -1,9 +1,43 @@
-import React from 'react'
+import { NavLink } from 'react-router-dom';
 
-const DailyCalorieIntake = () => {
-    return (
-        <div>DailyCalorieIntake</div>
-    )
-}
+import { useDispatch, useSelector } from 'react-redux';
+import { getDailyIntake, getUserDailyDiet, getLoginStatus } from 'redux/auth/auth-selector';
+import { updateModalStatus } from 'redux/auth/auth-slice';
+import { nanoid } from '@reduxjs/toolkit';
+
+import s from '../DailyCalorieIntake/DailyCalorieIntake.module.css';
+
+export default function DailyCalorieIntake() {
+  const dispatch = useDispatch();
 
-export default DailyCalorieIntake;
+  const isLoggedIn = useSelector(getLoginStatus);
+  const navigateTo = isLoggedIn ? '/diary' : '/registration';
+  const getDiet = isLoggedIn ? getUserDailyDiet : getDailyIntake;
+  const dailyDiet = useSelector(getDiet);
+
+  const productsNotAllowed = dailyDiet?.notAllowedProduct?.map(el => (
+    <li key={nanoid()} className={s.item}>
+      <p className={s.text}>{el.title}</p>
+    </li>
+  ));
+
+  return (
+    <>
+      <h2 className={s.title}>Your recommended daily calorie intake is</h2>
+      <p className={s.textPrimary}>
+        {dailyDiet?.calories} <span className={s.textPrimarySpan}>kcal</span>
+      </p>
+      <p className={s.textSecondary}>Foods you should not eat</p>
+      <ol className={s.list}>{productsNotAllowed}</ol>
+      <NavLink
+        className={s.navLink}
+        to={navigateTo}
+        onClick={() => {
+          dispatch(updateModalStatus(false));
+        }}
+      >
+        Start losing weight
+      </NavLink>
+    </>
+  );
+}