Merge pull request #13 from 001elijah/Modal-component

Modal component

src/assets/styles/_vars.scss

@@ -12,6 +12,7 @@ $priority-low-color: #8fa1d0;
 $priority-medium-color: #e09cb5;
 $priority-high-color: #bedbb0;
 $red-error-color: #ff0000;
+$white-background-modal: #fcfcfc;
 $icon-main-color: rgba(22, 22, 22, 0.5);
 $icon-secondary-color: rgba(255, 255, 255, 0.5);
 

src/components/Modal/Modal.jsx

@@ -0,0 +1,56 @@
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import React, { useEffect, useCallback, useState } from 'react';
+import { BackdropModal } from '../BackdropMain/BackdropMain';
+import { selectorTheme } from 'redux/Auth/authSelectors';
+import s from './Modal.module.scss';
+import svg from 'assets/icons/sprite.svg';
+
+export const Modal = ({ title, onClose, children }) => {
+  const theme = useSelector(selectorTheme);
+  const [, setThemeClass] = useState('');
+
+  useEffect(() => {
+    setThemeClass(s[theme]);
+  }, [theme]);
+
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        handleClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  const handleClose = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  return (
+    <BackdropModal closeModal={onClose}>
+      <div className={`${s.modal} ${s[theme]}`}>
+        <div className={`${s.modalHeader} ${s[theme]}`}>
+          <h3 className={`${s.title} ${s[theme]}`}>{title}</h3>
+          <div onClick={handleClose} className={`${s.close} ${s[theme]}`}>
+            <svg width="18" height="18" className={`${s.closeSvg} ${s[theme]}`}>
+              <use xlinkHref={`${svg}#icon-x-close`} />
+            </svg>
+          </div>
+        </div>
+        <div className={s.modalContent}>{children}</div>
+      </div>
+    </BackdropModal>
+  );
+};
+
+Modal.propTypes = {
+  title: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+};

src/components/Modal/Modal.module.scss

@@ -0,0 +1,80 @@
+@import '../../assets/styles/vars';
+@import '../../assets/styles/mixins';
+
+.modalBackdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  font-family: 'Poppins-Medium';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 1.5em;
+  letter-spacing: -0.02em;
+  margin-bottom: 24px;
+  margin-top: 24px;
+
+  &.dark {
+    color: $white-text-color;
+  }
+
+  &.light,
+  &.colorful {
+    color: $black-text-color;
+  }
+}
+
+.modal {
+  padding: 0 0 24px 24px;
+  border-radius: 4px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  width: 100%;
+  max-width: 335px;
+  border-radius: 8px;
+
+  &.dark {
+    background-color: $black-text-color;
+  }
+
+  &.light,
+  &.colorful {
+    background-color: $white-background-modal;
+  }
+
+  @include tablet {
+    max-width: 350px;
+  }
+
+  @include desktop {
+    max-width: 350px;
+  }
+}
+
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+}
+
+.closeSvg {
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin: 14px;
+  &.dark {
+    stroke: $white-text-color;
+  }
+
+  &.light,
+  &.colorful {
+    stroke: $black-text-color;
+  }
+}

src/pages/HomePage.jsx

@@ -2,15 +2,26 @@ import { useDispatch, useSelector } from 'react-redux';
 import { logoutUser } from 'redux/Auth/authOperations';
 import { themeChangeUser } from 'redux/Auth/authOperations';
 import { selectorTheme } from 'redux/Auth/authSelectors';
+import React, { useState } from 'react';
+import { Modal } from '../components/Modal/Modal';
 
 export const HomePage = () => {
-  const theme = useSelector(selectorTheme) || "";
+  const theme = useSelector(selectorTheme) || '';
   const dispatch = useDispatch();
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleChange = e => {
     dispatch(themeChangeUser(e.target.value));
   };
 
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
   return (
     <div>
       <select name="priority" value={theme} onChange={handleChange}>
@@ -19,6 +30,14 @@ export const HomePage = () => {
         <option value="colorful">Colorful</option>
       </select>
       <button onClick={() => dispatch(logoutUser())}>Log logOut</button>
+
+      <button onClick={openModal}>Open Modal</button>
+
+      {isModalOpen && (
+        <Modal title="New board" onClose={closeModal}>
+          <p>Content of the modal.</p>
+        </Modal>
+      )}
     </div>
   );
 };