Июль-2 (#147)

* fix: fix Login page

* fix: fix Password input

* fix: fix Input

* fix: validate inputs after user leaves the input

* fix: fix NewPassword page

* UMAK-201: Длинный пароль перекрывает иконку глаза на странице Регистрации/Входа
https://lapkipomoshi.atlassian.net/browse/UMAK-201

* UMAK-204: Кнопка Зарегистрироваться становится активна, если в поле Пароль введены только числа, на странице Регистрации
https://lapkipomoshi.atlassian.net/browse/UMAK-204

* UMAK-203: Не появляется ошибка если ввести значение без букв в поле Имя на странице Регистрации
https://lapkipomoshi.atlassian.net/browse/UMAK-203

* UMAK-203: fix regex

* UMAK-195: Добавить крестик на popup
https://lapkipomoshi.atlassian.net/jira/software/projects/UMAK/boards/1/backlog?selectedIssue=UMAK-195

* UMAK-194: Закрытие popup по клику вне области popup
https://lapkipomoshi.atlassian.net/jira/software/projects/UMAK/boards/1/backlog?selectedIssue=UMAK-194

* fix: fix update user info

* fix

* fix: off camelcase rule

* fix: fix after PR

* fix: fix after review

* fix: change user profile depend on status

* fix: fix after review

* fix: fix InfoToolTip

* feat: add emailConfirmationTemplate

* fix: fix font

* refactor(App): setting the ProtectedRoute component

* feat: add PrivacyPolicyPage (#132)

feat: add PrivacyPolicyPage

* feat: add displaying SheltersList according to the shelter warning color  (#127)

* refactor: change styles according to the layout, add adaptability
* fix: react router paths and hierarchy

* feat: add a table to PrivacyPolicyPage (#137)

* feat: add a table to PrivacyPolicyPage

* fix: close InfoTooltip after 15 seconds

* fix: fix standard font's weight

* fix

* feat: add template for email confirmation

* feat: add template for success registration

* fix styles

* feat: add template for reset password

* feat: add template for change email

* fix text

* feat: add template for change password

* fix styles

* fix profile popup

* fix: change validation on onChange

* fix: change autocomplete background-color

* feat(App): add app with the site data

* fix after review

* fix after W3C validation

* feat: add scroll to slider (#143)

* refactor: add closure to function

* feat: add new filter to shelters list page (#144)

* Update conflicts App.jsx

* feat: add terms page (#142)

* feat: add links (#146)

---------

Co-authored-by: Vlada Melnikova <wannhorn@gmail.com>
Co-authored-by: Tatiana Ponomareva <tatiana.developerr@gmail.com>

.eslintrc.json

@@ -64,6 +64,8 @@
     "class-methods-use-this": "warn",
     "prefer-promise-reject-errors": "warn",
     "react/jsx-one-expression-per-line": "off",
+    "react/destructuring-assignment": "off",
+    "no-unused-expressions": "warn",
     "camelcase": [1, { "properties": "never" }]
   }
 }

src/components/CardsSlider/CardsSlider.jsx

@@ -1,35 +1,27 @@
 import React, { useRef } from 'react';
-import './CardsSlider.css';
+import './CardsSlider.scss';
 
-const CardsSlider = ({
-  children, listLength, columnGap = 24, cardWidth = 200,
-}) => {
-  const slider = useRef(null); // элемент слайдера
+const CardsSlider = ({ children, isButtonsHidden = false }) => {
+  const defaultScrollPixelsAmount = 350;
 
-  let position = 0; // смещение карточек в слайдере при листании
+  const sliderContainerRef = useRef(null);
 
-  const handlePrev = () => { // показать предыдущие карточки
-    if (position < 0) position += 200;
-    slider.current.childNodes.forEach((element) => {
-      element.style = `transform: translateX(${position}px)`;
-    });
-  };
+  const handleSliderScroll = (direction) => {
+    return () => {
+      const scrollPixelsAmount = direction === 'left' ? -defaultScrollPixelsAmount : defaultScrollPixelsAmount;
 
-  const handleNext = () => { // показать следующие карточки
-    if (position >= (-(listLength - 7) * (columnGap + cardWidth))) position -= (columnGap + cardWidth);
-    slider.current.childNodes.forEach((element) => {
-      element.style = `transform: translateX(${position}px)`;
-    });
+      sliderContainerRef.current.scrollBy({ behavior: 'smooth', left: scrollPixelsAmount });
+    };
   };
 
   return (
     <>
-      <ul className='cards-slider' ref={slider} style={{ columnGap: `${columnGap}px` }}>
+      <ul className='cards-slider' ref={sliderContainerRef}>
         {children}
       </ul>
-      <div className='cards-slider__buttons'>
-        <button className='cards-slider__button' type='button' onClick={handlePrev} />
-        <button className='cards-slider__button cards-slider__button_next' type='button' onClick={handleNext} />
+      <div className={`cards-slider__buttons ${isButtonsHidden && 'cards-slider__buttons_hidden'}`}>
+        <button className='cards-slider__button' type='button' onClick={handleSliderScroll('left')} />
+        <button className='cards-slider__button cards-slider__button_next' type='button' onClick={handleSliderScroll('right')} />
       </div>
     </>
   );

src/components/CardsSlider/CardsSlider.scss

@@ -0,0 +1,4 @@
+@import url('./styles/cards-slider.scss');
+@import url('./styles/__buttons/cards-slider__buttons.scss');
+@import url('./styles/__button/cards-slider__button.scss');
+@import url('./styles/__button/_next/cards-slider__button_next.scss');

src/components/CardsSlider/styles/__button/cards-slider__button.css → src/components/CardsSlider/styles/__button/cards-slider__button.scss

@@ -2,16 +2,16 @@
   width: 49px;
   height: 49px;
   margin: 0 9px 0 0;
-  background-color: rgba(0,0,0,0);
+  background-color: rgba(0, 0, 0, 0);
   background-image: url('../../../../images/slider__button.svg');
   background-position: center;
   background-size: 41px;
   background-repeat: no-repeat;
   border: none;
   cursor: pointer;
-  transition-duration: .7s;
-}
+  transition-duration: 0.7s;
 
-.cards-slider__button:hover {
-  opacity: .77;
+  &:hover {
+    opacity: 0.77;
+  }
 }

src/components/CardsSlider/styles/__buttons/cards-slider__buttons.scss

@@ -0,0 +1,11 @@
+.cards-slider__buttons {
+  margin-bottom: 40px;
+
+  &_hidden {
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    margin-bottom: 80px;
+  }
+}

src/components/CardsSlider/styles/cards-slider.scss

@@ -0,0 +1,20 @@
+.cards-slider {
+  margin: 0;
+  display: flex;
+  white-space: nowrap;
+  overflow-y: hidden;
+  width: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+  list-style-type: none;
+  column-gap: 38px;
+  overflow: hidden;
+
+  @media (min-width: 768px) {
+    padding: 20px 0 44px 44px;
+  }
+
+  @media (min-width: 1440px) {
+    padding-left: 132px;
+  }
+}

src/components/DetailsCard/DetailsCard.jsx

@@ -3,13 +3,11 @@ import './DetailsCard.css';
 import PlusMinus from './svg/PlusMinus';
 import Arrow from './svg/Arrow';
 
-const DetailsCard = ({
-  children, title, isOpen, textStyle = 'faq', iconType = 'plus-minus',
-}) => {
+const DetailsCard = ({ children, title, isOpen, iconType, titleClasses }) => {
   return (
     <details className='details-card' open={isOpen}>
-      <summary className={`details-card__summary details-card__summary_style_${textStyle}`}>
-        <p className={`details-card__title details-card__title_style_${textStyle}`}>{title}</p>
+      <summary className='details-card__summary'>
+        <p className={`details-card__title ${titleClasses}`}>{title}</p>
         {iconType === 'plus-minus' && <PlusMinus />}
         {iconType === 'arrow' && <Arrow />}
       </summary>

src/components/DetailsCard/styles/__summary/details-card__summary.css

@@ -1,20 +1,9 @@
 .details-card__summary {
   display: flex;
   width: 100%;
-  padding: 24px 28px 20px 40px;
   justify-content: space-between;
   align-items: center;
   background-color: var(--color-background-additional);
   cursor: pointer;
   box-sizing: border-box;
 }
-
-.details-card__summary_style_shelter-pets {
-  margin-left: 132px;
-  border-radius: 20px;
-  transition-duration: .5s;
-}
-
-.shelter-pets__summary_style_shelter-pets:hover {
-  opacity: .77;
-}

src/components/DetailsCard/styles/__title/details-card__title.css

@@ -1,16 +1,4 @@
 .details-card__title {
-  width: 890px;
   margin: 0;
   padding: 0;
-  font-size: 24px;
-  line-height: 29px;
-}
-
-.details-card__title_style_faq {
-  font-weight: 500;
-  font-family: var(--font-family-title);
-}
-
-.details-card__title_style_shelter-pets {
-  font-weight: 400;
 }

src/components/DetailsCard/svg/Arrow.css

@@ -1,22 +1,22 @@
-.arrow {
-  width: 37px;
-  height: 22px;
-  transition: transform .7s;
+.caret {
+  width: 24px;
+  height: 24px;
+  transition: transform 0.7s;
 }
 
-.arrow path {
-  transition-duration: .3s;
+.caret path {
+  transition-duration: 0.3s;
   fill: var(--color-text-base);
 }
 
-.details-card:hover .arrow path {
+.details-card:hover .caret path {
   fill: var(--color-accent-hover);
 }
 
-.details-card__summary:focus .arrow path {
+.details-card__summary:focus .caret path {
   fill: var(--color-accent-pressed);
 }
 
-.details-card[open] .arrow {
+.details-card[open] .caret {
   transform: rotate(180deg);
 }

src/components/DetailsCard/svg/Arrow.jsx

@@ -3,7 +3,7 @@ import './Arrow.css';
 
 const Arrow = () => {
   return (
-    <svg className='arrow' width='36' height='21' viewBox='0 0 36 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <svg className='caret' width='36' height='21' viewBox='0 0 36 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path
         d={`M34.9204 1.25245C35.7015 2.0335 35.7015 3.29983 34.9204 4.08088L19.4155 19.5858C18.6345 20.3668 17.3681 20.3668 16.5871
       19.5858L1.08218 4.08088C0.301133 3.29983 0.301134 2.0335 1.08218 1.25245L1.50792 0.826714C2.28897 0.0456657 3.5553 0.0456657 4.33635

src/components/InfoTooltip/InfoTooltip.jsx

@@ -38,7 +38,7 @@ const InfoTooltip = ({ isOpen, image, message, onClose }) => {
           src={image}
         />
 
-        <p className='popup__text'>{message}</p>
+        <h3 className='popup__text standard-font standard-font_type_h3'>{message}</h3>
 
         <button
           type='button'

src/components/InfoTooltip/InfoTooltip.scss

@@ -13,6 +13,7 @@ $images-path: '../../images';
   visibility: hidden;
   opacity: 0;
   transition: visibility 0.5s, opacity 0.5s ease-in-out;
+  z-index: 1;
 
   &_opened {
     display: flex;
@@ -24,45 +25,40 @@ $images-path: '../../images';
 
 .popup__container {
   width: 100%;
-  max-width: 636px;
+  max-width: 576px;
   height: fit-content;
   background-color: var(--color-background-additional);
   border-radius: 30px;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
-  padding: 77px 82px 88px;
+  padding: 75px 100px 60px;
 }
 
 .popup__image {
-  width: 248px;
-  height: 248px;
+  width: 90px;
+  height: 90px;
+  margin-bottom: 35px;
 }
 
 .popup__text {
-  font-family: var(--font-family-title);
-  font-style: normal;
-  font-weight: 600;
-  font-size: 40px;
-  line-height: 49px;
   text-align: center;
-  color: var(--color-text-base);
 }
 
 .popup__button-close {
   background-image: url('#{$images-path}/icons/ic_button_close.svg');
   background-size: contain;
   border: none;
-  width: 36px;
-  height: 36px;
+  width: 28px;
+  height: 28px;
   background-color: rgba(0, 0, 0, 0);
   padding: 0;
   margin: 0;
   transition: opacity 0.2s;
   position: absolute;
-  top: 36px;
-  right: 36px;
+  top: 28px;
+  right: 28px;
 
   &:hover {
     opacity: 0.6;

src/components/ProfilePopup/ProfilePopup.jsx

@@ -1,24 +1,41 @@
-import React, { useContext } from 'react';
-import './ProfilePopup.css';
+import React, { useContext, useEffect, useRef } from 'react';
+import './ProfilePopup.scss';
 import { Link } from 'react-router-dom';
 import CurrentUserContext from '../../contexts/CurrentUserContext';
 
 function ProfilePopup({ isOpen, closeProfilePopup }) {
   const currentUser = useContext(CurrentUserContext);
   const { username, email } = currentUser;
+  const ref = useRef(null);
+
+  const handleOverlayClose = (e) => {
+    const popup = e.target.classList;
+    if ((ref.current && !ref.current.contains(e.target) || popup.contains('profile-popup_opened') || popup.contains('profile-popup__button-close'))) {
+      closeProfilePopup();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleOverlayClose, true);
+    return () => {
+      document.removeEventListener('click', handleOverlayClose, true);
+    };
+  }, [closeProfilePopup]);
 
   return (
-    <div className={`profile-popup ${isOpen && 'profile-popup_opened'}`}>
-      <Link className='profile-popup__name' to='/profile' onClick={closeProfilePopup}>{username}</Link>
-      <p className='profile-popup__email'>{email}</p>
-      <Link className='profile-popup__link' to='/profile/edit' onClick={closeProfilePopup}>Редактировать профиль</Link>
-      <Link className='profile-popup__link' to='/profile/edit/password' onClick={closeProfilePopup}>Изменить пароль</Link>
-      <Link className='profile-popup__button' to='/profile/sign-out' onClick={closeProfilePopup}>Выйти</Link>
-      <button
-        type='button'
-        className='profile-popup__button-close'
-        onClick={closeProfilePopup}
-      />
+    <div className={`profile-popup ${isOpen && 'profile-popup_opened'}`} ref={ref}>
+      <div className='profile-popup__container'>
+        <Link className='profile-popup__name' to='/profile' onClick={closeProfilePopup}>{username}</Link>
+        <p className='profile-popup__email'>{email}</p>
+        <Link className='profile-popup__link' to='/profile/edit' onClick={closeProfilePopup}>Редактировать профиль</Link>
+        <Link className='profile-popup__link' to='/profile/edit/password' onClick={closeProfilePopup}>Изменить пароль</Link>
+        <Link className='profile-popup__button' to='/profile/sign-out' onClick={closeProfilePopup}>Выйти</Link>
+        <button
+          type='button'
+          className='profile-popup__button-close'
+          onClick={closeProfilePopup}
+        />
+      </div>
     </div>
   );
 }