added some icons

package-lock.json

@@ -19,6 +19,7 @@
         "react-codemirror2": "^7.2.1",
         "react-dom": "^18.2.0",
         "react-easy-crop": "^4.7.4",
+        "react-icons": "^4.8.0",
         "react-redux": "^8.0.5",
         "react-router-dom": "^6.8.1",
         "react-scripts": "5.0.1",
@@ -15850,6 +15851,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+      "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -30791,6 +30800,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-icons": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+      "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "react-codemirror2": "^7.2.1",
     "react-dom": "^18.2.0",
     "react-easy-crop": "^4.7.4",
+    "react-icons": "^4.8.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",

src/components/CropperPopup/CropperPopup.jsx

@@ -4,14 +4,10 @@ import { useCrop } from '../../hooks/useCrop';
 import { changeAvatar } from '../../store/user/actions/changeAvatar';
 import style from './CropperPopup.module.scss';
 import { useRef } from 'react';
+import { IoMdArrowBack } from 'react-icons/io';
+import { GrClose } from 'react-icons/gr/index';
 
-export const CropperPopup = ({
-  isOpen,
-  close,
-  closeParent,
-  imageUrl,
-  onCropComplete,
-}) => {
+export const CropperPopup = ({ isOpen, close, closeParent, imageUrl }) => {
   const dispatch = useDispatch();
   const user = useSelector((state) => state.user);
   const formRef = useRef();
@@ -34,12 +30,17 @@ export const CropperPopup = ({
     closeParent();
   };
 
+  const handleClose = () => {
+    close();
+    closeParent();
+  };
+
   if (!isOpen) return null;
   return (
     <div className={style.container}>
       <div className={style.header}>
-        <span> goBack </span>
-        <span> close </span>
+        <IoMdArrowBack onClick={close} />
+        <GrClose onClick={handleClose} />
       </div>
 
       <div className={style.cropContainer}>

src/components/CropperPopup/CropperPopup.module.scss

@@ -12,10 +12,29 @@
     border-radius: 6px;
 
     .header {
-        padding: 15px;
+        padding: 12px;
         display: flex;
         justify-content: space-between;
         border-bottom: 2px solid #0EBEFF;
+
+        svg {
+            width: 25px;
+            height: 25px;
+            color:#bdbdbd;
+
+            path {
+                stroke: #bdbdbd;
+
+            }
+
+            &:hover {
+                color:#ffffff;
+
+                path {
+                    stroke: #ffffff;
+                }
+            }
+        }
     }
   
 

src/components/DragAndDropPopup/DragAndDropPopup.jsx

@@ -4,6 +4,8 @@ import { ReactComponent as IconAddFile } from '../../assets/img/iconAddFile.svg'
 import { usePopup } from '../../hooks/usePopup';
 import { CropperPopup } from '../CropperPopup/CropperPopup';
 import { getImageUrlFromFile } from '../../utils/getImageUrlFromFile';
+import { GrClose } from 'react-icons/gr/index';
+import { FaUpload } from 'react-icons/fa/index';
 
 export const DragAndDropPopup = ({ isOpen, close }) => {
   const [isDragging, setIsDragging] = useState(false);
@@ -61,11 +63,9 @@ export const DragAndDropPopup = ({ isOpen, close }) => {
         onDrop={getUncroppedAvatar}
       >
         <div className={style.header}>
-          <img
-            src="https://static.filestackapi.com/picker/1.23.0/assets/images/navbar-local_file_system.svg"
-            alt=""
-          />
-          <span onClick={close}>x</span>
+          <FaUpload />
+
+          <GrClose onClick={close} />
         </div>
 
         <label htmlFor="upload" className={style.dropArea}>

src/components/DragAndDropPopup/DragAndDropPopup.module.scss

@@ -26,11 +26,24 @@
         height: 50px;
         @include flex( $align: center);
         padding: 10px;
-        border-bottom: 2px solid #0EBEFF;
-        img {
-            margin: 0 auto;
-        }       
+        border-bottom: 2px solid #0EBEFF;    
         margin-bottom: 40px;
+
+        svg:first-of-type {
+            margin: 0 auto;
+            color:#bdbdbd;
+        }
+
+        svg:last-of-type {
+            @extend %buttonGrey;
+            width: 23px;
+            height: 23px;
+            padding: 3px;
+            path {
+                stroke: #bdbdbd;
+            }
+            
+        }
     }
 
     .dropArea {

src/components/Footer/Footer.jsx

@@ -1,12 +1,12 @@
 import style from './Footer.module.scss';
-import { ReactComponent as LogoSmall } from '../../assets/img/logo.svg';
+import { ReactComponent as Logo } from '../../assets/img/logoBig.svg';
 
 export const Footer = () => {
   return (
     <footer className={style.footer}>
-      <div className={style.main}>
-        <LogoSmall className={style.logoSmall} />
-        <p>©2023 CodePen</p>
+      <div className={style.container}>
+        <span>©2023 CodePen</span>
+        <Logo />
       </div>
     </footer>
   );

src/components/Footer/Footer.module.scss

@@ -1,17 +1,22 @@
+@import '../../scss/index.scss';
+
 .footer {
-  background-color: black;
-  color: white;
+  height: 80px;
   width: 100%;
-  text-align: right;
-  font-size: 10px;
-  justify-self: flex-end;
-  z-index: 3;
+  margin-top: auto;
 
-  .main {
-    padding: 20px 20px;
-  }
-  .logoSmall {
-    width: 50px;
-    fill: white;
+  .container {
+    @include container();
+    @include flex( $align: center ,$justify: space-between);
+    
+    span {
+      color: white;
+    }
+  
+    & > svg {
+      margin-left: 15px;
+      width: 150px;
+    }
   }
+ 
 }

src/components/HomeCard/HomeCard.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import style from './HomeCard.module.scss';
+
+export const HomeCard = ({ icon: Icon, title, description }) => {
+  return (
+    <div className={style.card}>
+      <Icon />
+      <h2>{title}</h2>
+      <p>{description}</p>
+    </div>
+  );
+};

src/components/HomeCard/HomeCard.module.scss

@@ -0,0 +1,46 @@
+.card {
+    background: #2c303a;
+    padding: 60px 30px;
+    margin: 2rem 0;
+    border-radius: 10px;
+    position: relative;
+    z-index: 1;
+    // height: fit-content;
+    height: 300px;
+    width: 32%;
+
+    svg {
+        position: absolute;
+        top:-45px;
+        left:25px;
+        padding: 10px;
+        background-color: black;
+        width: 75px;
+        height: 75px;
+        border-radius: 10px;
+    }
+
+    h2 {
+        color:white;
+        margin-bottom: 20px;
+    }
+
+    p {
+        color:#c7c9d3;
+        font-size: 17px;
+        line-height: 23px;
+    }
+}
+
+@media (max-width: 1003px) {
+.card {
+    height: 335px;
+}
+}
+
+@media (max-width: 900px) {
+    .card {
+        height: fit-content;
+        width: 100%;
+    }
+    }

src/components/ImageUploader/ImageUploader.module.scss

@@ -8,7 +8,6 @@
     float: right;
     padding: 30px;
     display: flex;
-    margin-bottom: 30px;
 
     img {
         height: 100%;
@@ -39,4 +38,10 @@
             color:#b7bbc8;
         }
     }
-}
+}
+
+@media (max-width: 940px) {
+    .imageUploader {
+      width: 100%;
+    }
+  }

src/components/UpdatePassword/UpdatePassword.module.scss

@@ -1,10 +1,9 @@
 @import '../../scss/index.scss';
 
 .updatePassword {
-  @include container();
   color: #fdfdfd;
   width: 65%;
-  height: auto;
+  height: fit-content;
   border-radius: 6px;
   background-color: #1e1f26;
   padding: 30px;
@@ -23,10 +22,16 @@
 
   button {
     @extend %buttonGrey;
+    margin-left: auto;
     font-size: 16px;
     font-weight: 600;
     width: 160px;
-   
+  }
+}
+
+@media (max-width: 940px) {
+  .updatePassword {
+    width: 100%;
   }
 }
 

src/components/UserPopup/UserPopup.jsx

@@ -1,6 +1,10 @@
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { logout } from '../../store/auth/authSlice';
+import { IoMdSettings } from 'react-icons/io/index';
+import { MdLogout } from 'react-icons/md/index';
+import { FaPen } from 'react-icons/fa/index';
+
 import style from './UserPopup.module.scss';
 
 export const UserPopup = ({ isOpen, popupRef }) => {
@@ -17,10 +21,16 @@ export const UserPopup = ({ isOpen, popupRef }) => {
   if (!isOpen) return null;
   return (
     <ul ref={popupRef} className={style.userPopup}>
-      <li onClick={() => navigate('/your-works')}>Your Works</li>
+      <li onClick={() => navigate('/your-works')}>
+        <FaPen className={style.pen} /> Your Works
+      </li>
       <hr />
-      <li onClick={() => navigate('/settings')}>Settings</li>
-      <li onClick={handleLogout}>Log Out</li>
+      <li onClick={() => navigate('/settings')}>
+        <IoMdSettings /> Settings
+      </li>
+      <li onClick={handleLogout}>
+        <MdLogout /> Log Out
+      </li>
     </ul>
   );
 };

src/components/UserPopup/UserPopup.module.scss

@@ -12,14 +12,27 @@
   
 
     li,a {
-        
         list-style: none;
         color: #e3e4e8;
         padding: 0.6rem 25px 0.6rem 20px;
        font-weight: 700;
        font-size: 17px;
        text-decoration:none;
-      
+       display: flex;
+       align-items: center;
+       cursor: pointer;
+
+        .pen {
+            width: 15px;
+            height: 15px;
+        }
+       
+       svg{ 
+        width: 18px;
+        height: 18px;
+        margin-right: 10px;
+        color:#5A5F73;
+       }
       
 
        &:hover {
@@ -29,6 +42,9 @@
        &:last-of-type {
         &:hover {
             background-color: $redMain;
+            svg { 
+                color:white;
+            }
         }
        }
     }

src/layouts/PrivateRoute.jsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { Route, useNavigate } from 'react-router-dom';
-import { SettingsPage } from '../pages/SettingsPage/SettingsPage';
+import { useNavigate } from 'react-router-dom';
 
 export const PrivateRoute = ({ children }) => {
   const { isAuth } = useSelector((state) => state.auth);

src/pages/HomePage/HomePage.jsx

@@ -1,92 +1,62 @@
 import { Link } from 'react-router-dom';
-import { Header } from '../../components/Header/Header';
-import { Footer } from '../../components/Footer/Footer';
 import style from './HomePage.module.scss';
 
-import { ReactComponent as HomeLine } from '../../assets/img/homeline.svg';
+import { ReactComponent as Decor1 } from '../../assets/img/homeline.svg';
+import { ReactComponent as Decor2 } from '../../assets/img/linehometwo.svg';
 import { ReactComponent as MainSvg } from '../../assets/img/home.svg';
 import { ReactComponent as LogoBig } from '../../assets/img/logo.svg';
-import { ReactComponent as HomeLineTwo } from '../../assets/img/linehometwo.svg';
 import { ReactComponent as Icon1 } from '../../assets/img/icon1.svg';
 import { ReactComponent as Icon2 } from '../../assets/img/icon2.svg';
 import { ReactComponent as Icon3 } from '../../assets/img/icon3.svg';
 import { useSelector } from 'react-redux';
+import { MainLayout } from '../../layouts/MainLayout';
+import { HomeCard } from '../../components/HomeCard/HomeCard';
 
 export const HomePage = () => {
   const { isAuth } = useSelector((state) => state.auth);
 
   return (
-    <div className={style.homePage}>
-      <Header />
-
-      <div className={style.container}>
-        <div>
-          <LogoBig className={style.logoBig} />
-          <h1>The best place to build, test, and discover front-end code.</h1>
-
-          <p>
-            CodePen is a social development environment for front-end designers
-            and developers. Build and deploy a website, show off your work,
-            build test cases to learn and debug, and find inspiration.
-          </p>
-
-          <Link className={style.link} to={isAuth ? '/your-works' : '/pen'}>
-            {isAuth ? 'Your works' : 'Start Codding'}
-          </Link>
-        </div>
-        <div>
-          <MainSvg />
-        </div>
-      </div>
-      <div className={style.homeline}>
-        <HomeLine />
-      </div>
-      <div className={style.homelinetwo}>
-        <HomeLineTwo />
-      </div>
-
-      <div className={style.table}>
-        <div className={style.card}>
-          <div className={style.iconcard}>
-            <Icon1 />
-          </div>
-          <h2>Build & Test</h2>
-          <p>
-            Get work done quicker by building out entire projects or isolating
+    <MainLayout className={style.homePage}>
+      <section>
+        <LogoBig />
+        <h1>The best place to build, test, and discover front-end code.</h1>
+        <p>
+          CodePen is a social development environment for front-end designers
+          and developers. Build and deploy a website, show off your work, build
+          test cases to learn and debug, and find inspiration.
+        </p>
+        <Link to={isAuth ? '/your-works' : '/pen'}>
+          {isAuth ? 'Your works' : 'Start Codding'}
+        </Link>
+        <MainSvg className={style.mainSvg} />
+        <Decor1 className={style.decor1} />
+      </section>
+
+      <section>
+        <HomeCard
+          icon={Icon1}
+          title={'Build & Test'}
+          description={`Get work done quicker by building out entire projects or isolating
             code to test features and animations. Want to keep it all under
-            wraps?
-          </p>
-          <button>Try the Editor</button>
-        </div>
-
-        <div className={style.card}>
-          <div className={style.iconcard}>
-            <Icon2 />
-          </div>
-          <h2>Learn & Discover</h2>
-          <p>
-            Want to upgrade your skills and get noticed? Participating in
+            wraps?`}
+        />
+        <HomeCard
+          icon={Icon2}
+          title={'Learn & Discover'}
+          description={`Want to upgrade your skills and get noticed? Participating in
             CodePen Challenges is a great way to try something new. We
             frequently feature these Pens on our homepage and across social
-            media!
-          </p>
-          <button>Join this Week's Challenge</button>
-        </div>
-
-        <div className={style.card}>
-          <div className={style.iconcard}>
-            <Icon3 />
-          </div>
-          <h2>Share Your Work</h2>
-          <p>
-            Become a part of the most active front-end community in the world by
+            media!`}
+        />
+        <HomeCard
+          icon={Icon3}
+          title={'Share Your Work'}
+          description={`Become a part of the most active front-end community in the world by
             sharing work. Presenting at a conference? Show your code directly in
-            the browser with Presentation Mode.
-          </p>
-          <button>Explore Trending</button>
-        </div>
-      </div>
-      <Footer />
-    </div>
+            the browser with Presentation Mode.`}
+        />
+        <Decor2 className={style.decor2} />
+      </section>
+    </MainLayout>
   );
 };

src/pages/HomePage/HomePage.module.scss

@@ -1,131 +1,133 @@
 @import "../../scss/index.scss";
 
+
 .homePage {
   position: relative;
   width: 100vw;
   background-color: #131417;
+  z-index: 1;
+  overflow: hidden;
 
-  .logoBig {
-    width: 100px;
-    fill: white;
-    height: auto;
-  }
-
-  h1,
-  h2,
-  p {
-    color: white;
-    margin-bottom: 50px;
-  }
-
-  .link {
-    @extend %buttonGreen;
-  }
-
-  .container {
-    margin: 0 auto;
-    padding: 100px 150px;
-    display: flex;
-    flex-direction: row;
+  section:first-of-type {
+    @include container(80%, 1250px);
     position: relative;
-    z-index: 1;
-
-    @media (max-width: 1200px) {
-      flex-direction: column;
-      padding: 50px;
+    display: grid;
+    gap: 20px;
+    grid-template-columns:  45% 55%;
+     grid-template-rows: 50px 85px;
+    grid-template-areas: 
+    '_ _'
+    'icon mainImage'
+    'title mainImage'
+    'text mainImage'
+    'button mainImage'
+    'cards cards'
+    ;
+
+    & > svg:first-of-type {
+      grid-area: icon;
+      width:60px;
+      margin-top: 25px;
+      path {
+        fill: white;
+      }
+    }
+   
+    h1 {
+      grid-area: title;
+      font-weight: 800;
+      font-size: 33px;
+      color: white;
+      line-height: 40px;
     }
 
-    @media (max-width: 767px) {
-      padding: 30px;
+    p {
+      grid-area: text;
+      color: #c7c9d3;
+      font-size: 1.2rem;
+      font-weight: 500;
+      line-height: 27px;
     }
-  }
-}
 
-.table {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-around;
-  align-items: center;
-
-  .card {
-    background: #2c303a;
-    padding: 1.5rem 1.5rem 2rem;
-    margin: 2rem 0;
-    border-radius: 10px;
-    position: relative;
-    z-index: 1;
-    height: 300px;
-    width: 360px;
+    & > a {
+      grid-area: button;
+      width: 200px;
+      @extend %buttonGreen;
+      height: 50px;
+    }
 
-    @media (max-width: 1200px) {
+    .mainSvg {
       width: 100%;
-      margin: 2rem auto;
+      grid-area: mainImage;
     }
 
-    @media (max-width: 767px) {
-      padding: 1rem;
+    .decor1 {
+      position: absolute;
+        top:500px;
+        right: -150px;
+        width: 600px;
+        z-index: -1;
     }
-  }
 
-  .card button {
-    @extend %buttonGrey;
+    
   }
 
-  .table h2 {
-    font-weight: 400;
-    font-size: 25px;
-    line-height: 32px;
-    display: flex;
-    align-items: center;
+  section:nth-of-type(2) {
+    position: relative;
+    grid-area: cards;
+    @include container;
+    height: fit-content;
+    margin-top: 30px;
+    margin-bottom: 80px;
+    @include flex($align: center, $justify: space-between);
+
+    .decor2 {
+      position: absolute;
+      bottom: -50px;
+      left: -90px;
+      width: 450px;
+      z-index: -1;
+    }
   }
+}
 
-  .table p {
-    font-weight: 400;
-    font-size: 18px;
-    line-height: 22px;
-    display: flex;
-    align-items: center;
-  }
 
-  .iconcard {
-    background: #131417;
-    border-radius: 10px;
-    width: 95px;
-    height: 95px;
-    position: absolute;
-    top: -70px;
+@media (max-width: 900px) {
+  .homePage {
 
-    @media (max-width: 767px) {
-      top: -50px;
+    section:first-of-type .decor1 {
+      top: 550px;
     }
-  }
 
-  .iconcard svg {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 65px;
-    margin: auto 0;
+    section:nth-of-type(2) {
+      margin-top: 60px;
+      @include flex($direction: column);
+    }
   }
 }
 
-.homeline {
-  bottom: 100px;
-  position: absolute;
-  right: 20px;
-  width: 600px;
-
-  @media (max-width: 1200px) {
-    display: none;
+ @media (max-width: 793px) {
+  .homePage {
+   section:first-of-type {
+    grid-template-columns:  100%;
+     grid-template-rows: 60px 100px auto;
+    gap: 5px;
+    grid-template-areas: 
+    '_ _'
+    'icon'
+    'title'
+    'text'
+    'button';
+
+    
+   }
   }
-}
-
-.homelinetwo {
-  position: absolute;
+ }
 
-  @media (max-width: 1200px) {
-    display: none;
+ @media (max-width: 445px) {
+  .homePage {
+   section {
+     grid-template-rows: 50px 100px auto auto;
+   }
   }
-}
+ }

src/pages/SettingsPage/SettingsPage.jsx

@@ -9,14 +9,15 @@ export const SettingsPage = () => {
       <div className={style.container}>
         <h1>Settings</h1>
 
-        <h2>Profile Image</h2>
-        <ImageUploader />
+        <section>
+          <h2>Profile Image</h2>
+          <ImageUploader />
+        </section>
 
-        <div className={style.updatePassword}>
+        <section>
           <h2>Update Password</h2>
-
           <UpdatePassword />
-        </div>
+        </section>
       </div>
     </MainLayout>
   );

src/pages/SettingsPage/SettingsPage.module.scss

@@ -1,33 +1,44 @@
 @import '../../scss/index.scss';
 
 .settings {
-  height: 100vh;
   background-color: #131417;
-
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  
   .container {
     @include container();
     margin-top: 20px;
     color: #fdfdfd;
-
+   
     h1 {
       padding-bottom: 13px;
       border-bottom: 2px solid $greenMain;
-      margin-bottom: 35px;
+      margin-bottom: 50px;
     }
 
-    h2:first-of-type {
-      display: inline-block;
-      margin-bottom: 260px;
-      width: 35%;
+    section:first-of-type {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 50px;
     }
 
-    h2:nth-of-type(2) {
-      display: inline-block;
-      width: 35%;
+    section:last-of-type {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 50px;
     }
   }
+}
+
+@media (max-width: 940px) {
+  .settings {
+      section {
+        flex-direction: column;
 
-  .updatePassword {
-    display: flex;
+        h2 {
+          margin-bottom: 20px;
+        }
+      }
   }
 }

src/scss/index.scss

@@ -11,6 +11,7 @@
 }
 
 body {
+  
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
@@ -29,6 +30,10 @@ body {
   height: 100vh;
 }
 
+#root {
+  height: 100%;
+}
+
 .CodeMirror {
   height: 100% !important;
 }