fixed LoginPopup

src/components/HeaderPen/HeaderPen.jsx

@@ -7,37 +7,25 @@ import { setFormatCode } from '../../store/currentWork/currentWorkSlice';
 import { BsFillCloudFill } from 'react-icons/bs';
 import { FaPen } from 'react-icons/fa/index';
 import { GoMessage } from '../GoMessage/GoMessage';
+import { LoginPopup } from '../LoginPopup/LoginPopup';
+import { usePopup } from '../../hooks/usePopup.js';
 
 export const HeaderPen = () => {
   const dispatch = useDispatch();
   const { isAuth } = useSelector((state) => state.auth);
   const { id, title, owner, files } = useSelector((state) => state.currentWork);
+  const loginPopup = usePopup();
 
   const logout = () => {
     localStorage.removeItem('authToken');
     dispatch(logout());
   };
 
-  // const loginPrompt = (
-  //   <div className={style.loginPopup}>
-  //     <span>
-  //       You’ll have to Log In or Sign Up to save your Pen. Don’t worry! All your
-  //       work will be saved to your account.
-  //     </span>
-  //     <div>
-  //       <button>close</button>
-  //       <NavLink to={'/login'}>OK</NavLink>
-  //     </div>
-  //   </div>
-  // );
-
-  // TODO: HoldUp component
-
   const handleSaveFiles = () => {
     dispatch(setFormatCode());
 
     if (!isAuth) {
-      console.log('HoldUp component!!!!');
+      loginPopup.open();
     } else {
       dispatch(
         saveFiles({
@@ -64,6 +52,8 @@ export const HeaderPen = () => {
 
       <GoMessage />
 
+      <LoginPopup isOpen={loginPopup.isPopupVisible} close={loginPopup.close} />
+
       <nav>
         <button onClick={handleSaveFiles}>
           <BsFillCloudFill />

src/components/LoginPopup/LoginPopup.jsx

@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import { GrClose } from 'react-icons/gr';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { useInput } from '../../hooks/useInput';
+import { login } from '../../store/auth/actions/loginAction';
+import { Input } from '../Input/Input';
+import style from '../LoginPopup/LoginPopup.module.scss';
+
+export const LoginPopup = ({ isOpen, close }) => {
+  const dispatch = useDispatch();
+  const { isAuth, error } = useSelector((state) => state.auth);
+  const loginName = useInput('');
+  const password = useInput('');
+
+  const handleLogin = (e) => {
+    e.preventDefault();
+
+    const userData = {
+      login: loginName.value,
+      password: password.value,
+    };
+
+    console.log(dispatch(login(userData)));
+  };
+
+  useEffect(() => {
+    if (isAuth) close();
+    if (error) {
+      loginName.setValue('');
+      password.setValue('');
+    }
+  }, [isAuth, error]);
+
+  if (!isOpen) return null;
+  return (
+    <>
+      <div className={style.overlay} onClick={close} />
+      <div className={style.loginPopup}>
+        <GrClose className={style.close} onClick={close} />
+        <div className={style.tableOfContents}>
+          <h1>Hold up!</h1>
+          <span>
+            You’ll have to <strong>Log In</strong> or <strong>Sign Up</strong>{' '}
+            (for free!) to save your Pen. <br /> Don't worry! You can create and
+            save new works in your account.
+          </span>
+          <div className={style.buttons}>
+            <Link to="/login">Login</Link>
+          </div>
+        </div>
+
+        <div className={style.create}>
+          <span>Need to create an account?</span>
+          <Link to="/signup"> Sign Up for CodePen</Link>
+        </div>
+      </div>
+    </>
+  );
+};

src/components/LoginPopup/LoginPopup.module.scss

@@ -0,0 +1,91 @@
+@import '../../scss/index.scss';
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+
+.loginPopup{
+  border-top:7px solid #47d074;
+  border-radius: 6px;
+  display: block;
+  background-color: white;
+  width: 490px;
+  height: 410px;
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: fixed;
+
+  .close {
+    position: absolute;
+    top:10px;
+    right: 10px;
+    width:20px;
+    height:20px;
+    cursor: pointer;
+  }
+  
+  .tableOfContents{
+    text-align: center;
+    margin: 10% 5% 0 5%;
+    
+    
+    h1{
+      font-size: 3rem;
+      color: #444857;
+      padding-bottom: 20px;
+    }
+    span{
+      color: #444857;
+      font-size: 15px;
+      margin-bottom: 50px;
+      
+      
+    }
+
+    .buttons {  
+      @include flex( $align: center, $justify: center);
+      width: 80%;
+      margin: 90px auto 20px;
+  
+      button {
+        @extend %buttonGrey;
+        font-size: 17px;
+        font-family: 600;
+        height:50px;
+        width:150px;
+      }
+
+      a {
+        @extend %buttonGreen;
+        font-size: 17px;
+        height:50px;
+        width:150px;
+      }
+    }
+
+    
+  }
+
+  
+    
+  .create{
+    border-top: 1px solid #f1f1f3;
+    padding-top: 20px;
+    text-align: center;
+
+    a{
+      text-decoration: none;
+      color: #1f798f;
+    }
+  }
+  
+}

src/components/PopupWrapper/PopupWrapper.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import style from './PopupWrapper.module.scss';
+
+export const PopupWrapper = ({ title, children, close, className, isOpen }) => {
+  if (!isOpen) return null;
+  return (
+    <>
+      <div className={style.overlay} onClick={close}></div>
+      <div className={style.popupWrapper}>
+        <header>
+          <h2>{title}</h2>
+          <button onClick={close}>✕</button>
+        </header>
+
+        <div className={className}>{children}</div>
+      </div>
+    </>
+  );
+};

src/components/PopupWrapper/PopupWrapper.module.scss

@@ -0,0 +1,47 @@
+@import "../../scss/index.scss";
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 10;
+  }
+  
+  .popupWrapper {
+    min-width: 550px;
+    min-height: 300px;
+    background-color: #131417;
+    border-radius: 6px;
+    z-index: 2;
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 11;
+    
+
+    header {
+        padding: 12px 13px;
+        border-bottom: 2px solid $greenMain;
+        @include flex( $align: center, $justify: space-between);
+
+        h2 {
+            margin-left: 10px;
+            color: white;
+            font-size: 22px;
+        }
+      
+        button {
+          @extend %buttonGrey;
+          font-size: 20px;
+          padding: 0px 5px;
+        
+        }
+    }
+  }
+  
+
+  

src/pages/YourWorksPage/YourWorksPage.jsx

@@ -8,12 +8,15 @@ import { LoadingPage } from '../LoadingPage/LoadingPage';
 import { fetchWorks } from '../../store/works/actions/fetchWorks';
 import { Works } from '../../components/Works/Works';
 import { MainLayout } from '../../layouts/MainLayout';
+import { PopupWrapper } from '../../components/PopupWrapper/PopupWrapper';
+import { Input } from '../../components/Input/Input';
 
 export const YourWorksPage = () => {
   const dispatch = useDispatch();
   const { isAuth } = useSelector((state) => state.auth);
   const { isLoading } = useSelector((state) => state.works);
   const { isPopupVisible, ref, open, close } = usePopup();
+  const newPenPopup = usePopup();
 
   useEffect(() => {
     if (isAuth) {
@@ -31,13 +34,26 @@ export const YourWorksPage = () => {
           <a className={style.active} href="/your-works">
             Your Works
           </a>
-          <button onClick={open}>+</button>
+          <button onClick={newPenPopup.open}>+</button>
         </div>
 
         <Works openPopup={open} />
       </div>
 
-      {isPopupVisible && <CreateWorkPopup popupRef={ref} close={close} />}
+      <PopupWrapper
+        title="New Pen!"
+        className={style.newPen}
+        isOpen={newPenPopup.isPopupVisible}
+        close={newPenPopup.close}
+      >
+        <form>
+          <Input title="Pen title" />
+          <Input title="Pen description" />
+          <button>Create</button>
+        </form>
+      </PopupWrapper>
+
+      {/* <CreateWorkPopup popupRef={ref} close={close} /> */}
     </MainLayout>
   );
 };

src/pages/YourWorksPage/YourWorksPage.module.scss

@@ -39,4 +39,42 @@
       float: right;
     }
   }
+
+  
 }
+
+
+.newPen {
+  form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px 50px 30px;
+    
+
+    label {
+      margin-bottom: 23px;
+      width: 100%;
+      // height: 50px;
+    }
+
+    input {
+      margin-top: 8px;
+      width: 100%;
+      // height: 37px;
+    }
+
+    button {
+      @extend %buttonGreen;
+      font-size: 18px;
+      margin-left: auto;
+      margin: 0 0 0 auto;
+    }
+
+    // input,label {
+    //   margin: 0 auto;
+    // }
+  }
+ 
+}