add button

Anastasia-front · May 23, 2023 · 2a93e9a · 2a93e9a
1 parent b94d004
commit 2a93e9a
Show file tree

Hide file tree

Showing 11 changed files with 188 additions and 32 deletions.
diff --git a/public/index.html b/public/index.html
@@ -60,6 +60,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/components/Contact/Contact.jsx b/src/components/Contact/Contact.jsx
@@ -22,13 +22,13 @@ export const Contact = ({ id, name, number }) => {
         {name}: {number}
       </p>
       {isLoading && !error ? (
-        <Button style={{ marginLeft: 7, height: 36 }} variant="contained">
-          <Puff height={18} stroke="#fff" style={{ padding: '0.5px 7px' }} />
+        <Button style={{ marginLeft: 25, height: 36 }} variant="contained">
+          <Puff height={18} stroke="#fff" style={{ padding: '0.5px 10.5px' }} />
         </Button>
       ) : (
         <Button
           type="button"
-          style={{ marginLeft: 7, height: 36 }}
+          style={{ marginLeft: 25, height: 36 }}
           variant="contained"
           endIcon={<DeleteIcon />}
           size="small"

diff --git a/src/components/ContactForm/ContactForm.jsx b/src/components/ContactForm/ContactForm.jsx
@@ -12,7 +12,7 @@ import { Puff } from 'react-loading-icons';
 import { useState } from 'react';
 import { Button } from '@mui/material';
 
-export default function ContactForm() {
+export default function ContactForm({ onClose }) {
   const dispatch = useDispatch();
   const contacts = useSelector(selectContacts);
   const isGeneralLoading = useSelector(selectIsLoading);
@@ -35,6 +35,7 @@ export default function ContactForm() {
       setIsLoading(true);
       dispatch(addContact({ name, number }));
       form.reset();
+      onClose();
     }
     setTimeout(() => {
       setIsLoading(false);

diff --git a/src/components/ContactForm/ContactForm.styled.js b/src/components/ContactForm/ContactForm.styled.js
@@ -8,7 +8,7 @@ export const Form = styled.form`
   flex-direction: column;
   align-items: flex;
   gap: 25px;
-  width: 200px;
+  width: 300px;
 `;
 
 export const Label = styled.label`
@@ -26,6 +26,7 @@ export const BoxSection = styled.form`
   align-items: flex-end;
   gap: 25px;
   min-width: 200px;
+  position: relative;
 `;
 
 export const TwoSections = styled.div`
@@ -39,3 +40,51 @@ export const TwoSections = styled.div`
     gap: 50px;
   }
 `;
+
+export const Add = styled.button`
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 50px;
+  height: 50px;
+  font-size: 40px;
+  padding-bottom: 1px;
+  padding-right: 4.5px;
+  color: white;
+  background-color: rgb(0, 137, 123);
+  border-radius: 50%;
+  border-style: none;
+  transition: transform 0.2s;
+  transition: font-size 0.2s;
+
+  &:hover {
+    box-shadow: 0px 1px 8px 5px rgba(0, 0, 0, 0.33);
+  }
+`;
+
+export const Close = styled.button`
+  position: absolute;
+  top: 12px;
+  right: 16px;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  font-weight: 900;
+  padding-bottom: 4px;
+  padding-right: 5.5px;
+  color: rgb(0, 137, 123);
+  background-color: white;
+  border-radius: 50%;
+  border: 1px solid rgb(0, 137, 123);
+
+  &:hover {
+    box-shadow: 0px 1px 8px 5px rgba(0, 0, 0, 0.33);
+  }
+`;
+
+export const BackGround = styled.div`
+  padding: 10px 30px 30px 30px;
+  border-radius: 5px;
+  background-color: rgb(220, 255, 252);
+  position: relative;
+`;
diff --git a/src/components/ContactList/ContactList.jsx b/src/components/ContactList/ContactList.jsx
@@ -24,7 +24,7 @@ const Items = () => {
           </Li>
         ))
       ) : (
-        <h3 style={{ textAlign: 'center' }}>
+        <h3 style={{ textAlign: 'center', marginLeft: 70 }}>
           There are no contacts in your phonebook
         </h3>
       )}

diff --git a/src/components/ContactList/ContactList.styled.js b/src/components/ContactList/ContactList.styled.js
@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
 export const List = styled.ul`
-  margin: 0 auto;
-  list-style-type: circle;
+  margin: 0;
   padding: 0 0 0 15px;
+  list-style-type: circle;
 `;
 export const Li = styled.li`
   display: list-item;

diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { ModalField, Backdrop } from './Modal.styled';
+import PropTypes from 'prop-types';
+
+const modalRoot = document.querySelector('#modal-root');
+
+export default function Modal({ onClose, children }) {
+  useEffect(() => {
+    const handleKeyDown = e => {
+      if (e.code === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+
+  const handleBackdropClick = e => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return createPortal(
+    <Backdrop onClick={handleBackdropClick}>
+      <ModalField>{children}</ModalField>
+    </Backdrop>,
+    modalRoot
+  );
+}
+
+Modal.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+};
diff --git a/src/components/Modal/Modal.styled.js b/src/components/Modal/Modal.styled.js
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export const Backdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 1200;
+`;
+export const ModalField = styled.div`
+  max-width: calc(100vw - 48px);
+  max-height: calc(100vh - 24px);
+`;
diff --git a/src/components/UserMenu/UserMenu.styled.js b/src/components/UserMenu/UserMenu.styled.js
@@ -13,5 +13,8 @@ export const Wrapper = styled.div`
 export const Name = styled.p`
   text-transform: uppercase;
   font-weight: 700;
-  width: 250%;
+
+  @media screen and (min-width: 540px) {
+    width: 250%;
+  }
 `;
diff --git a/src/pages/Contacts.js b/src/pages/Contacts.js
@@ -3,19 +3,32 @@ import ContactForm from 'components/ContactForm';
 import ContactList from 'components/ContactList';
 import Filter from 'components/Filter';
 import { useDispatch, useSelector } from 'react-redux';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { fetchContacts } from 'redux/contacts/contactsOperations';
 import { selectError, selectContacts } from 'redux/contacts/selectors';
+import Modal from 'components/Modal/Modal';
 import {
   BoxSection,
-  TwoSections,
+  // TwoSections,
+  BackGround,
+  Add,
+  Close,
 } from 'components/ContactForm/ContactForm.styled';
 
 const Contacts = () => {
   const dispatch = useDispatch();
   const error = useSelector(selectError);
   const contacts = useSelector(selectContacts);
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
   useEffect(() => {
     dispatch(fetchContacts());
   }, [dispatch]);
@@ -27,27 +40,36 @@ const Contacts = () => {
         alignItems: 'center',
       }}
     >
-      <h1 style={{ fontFamily: 'revert-layer' }}>Phonebook</h1>
-      <TwoSections>
-        <Section title="Additor">
-          <ContactForm style={{ maxWidth: 500 }} />
-        </Section>
+      {/* <h1 style={{ fontFamily: 'revert-layer' }}>Phonebook</h1> */}
 
-        <Section title="Contacts">
-          <BoxSection style={{ maxWidth: 500 }}>
-            {contacts.length !== 0 && <Filter />}
-            {!error && <ContactList />}
-          </BoxSection>
-
-          {error && (
-            <b
-              style={{ margin: '10px auto', width: '50%', textAlign: 'center' }}
-            >
-              The operation failed with error: ${error}
-            </b>
+      <Section title="Contacts">
+        <BoxSection style={{ maxWidth: 500 }}>
+          <Add type="button" onClick={openModal}>
+            +
+          </Add>
+          {contacts.length !== 0 && <Filter />}
+          {!error && <ContactList />}
+          {isModalOpen && (
+            <Modal onClose={closeModal}>
+              <BackGround>
+                <Close type="button" onClick={closeModal}>
+                  x
+                </Close>
+                <Section title="Additor">
+                  <ContactForm onClose={closeModal} style={{ maxWidth: 500 }} />
+                </Section>
+              </BackGround>
+            </Modal>
           )}
-        </Section>
-      </TwoSections>
+        </BoxSection>
+
+        {error && (
+          <b style={{ margin: '10px auto', width: '50%', textAlign: 'center' }}>
+            The operation failed with error: ${error}
+          </b>
+        )}
+      </Section>
+      {/* </TwoSections> */}
     </div>
   );
 };

diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -9,12 +9,34 @@ const styles = {
   },
   title: {
     fontWeight: 500,
-    fontSize: 48,
+    fontSize: 24,
     textAlign: 'center',
     fontFamily: 'Times New Roman',
   },
 };
 
+const breakpoints = {
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+};
+
+const screenWidth = window.innerWidth;
+
+let fontSize = 24;
+if (screenWidth >= breakpoints.sm && screenWidth < breakpoints.md) {
+  fontSize = 28;
+} else if (screenWidth >= breakpoints.md && screenWidth < breakpoints.lg) {
+  fontSize = 32;
+} else if (screenWidth >= breakpoints.lg && screenWidth < breakpoints.xl) {
+  fontSize = 40;
+} else if (screenWidth >= breakpoints.xl) {
+  fontSize = 48;
+}
+
+styles.title.fontSize = fontSize;
+
 export default function Home() {
   return (
     <div style={styles.container}>
@@ -46,7 +68,6 @@ export default function Home() {
           </span>
         </p>
       </h1>
-      {/* </ParticlesGrowing> */}
     </div>
   );
 }