Profile page (#126)

* layed out the base for the profile page * create profile page and fixed some bugs * updated snapshot Co-authored-by: allan <[email protected]>
ReCoded-Org · Nov 21, 2022 · ec61253 · ec61253
1 parent 4d5f2e5
commit ec61253
Show file tree

Hide file tree

Showing 16 changed files with 249 additions and 232 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.38.0",
     "react-i18next": "^12.0.0",
+    "react-icons": "^4.6.0",
     "react-redux": "^8.0.1",
     "react-router-dom": "6",
     "react-scripts": "^5.0.1",

diff --git a/src/App.jsx b/src/App.jsx
@@ -5,6 +5,7 @@ import Navbar from "./components/Navbar/Navbar";
 import SignUp from "./components/signup/SignUp";
 import Login from "./components/Login/Login";
 import AboutPage from "./pages/about-us";
+import ProfilePage from "./pages/profile";
 import Index from "./pages/index";
 import Footer from "./components/Footer/Footer";
 import CombiningFilterComponents from "./components/CombiningComponents/CombiningFilterComponents";
@@ -20,6 +21,8 @@ function App() {
         <Route path="/about-us" element={<AboutPage />} />
         <Route path="/roadmap" element={<h1>roadmap page</h1>} />
         <Route path="/jobs" element={<CombiningFilterComponents />} />
+        <Route path="/profile" element={<ProfilePage />} />
+        <Route path="/profile-edit" element={<h1>profile edit page</h1>} />
         <Route path="/contact" element={<h1>contact us page</h1>} />
       </Routes>
       <Footer />

diff --git a/src/components/contact/Contact.js → src/components/Contact/Contact.js b/src/components/contact/Contact.js → src/components/Contact/Contact.js
@@ -2,9 +2,11 @@ import React from "react";
 
 export default function Contact() {
   return (
-    <div className=" bg-[#f8f8f8] flex justify-around items-center pt-20 pb-10 px-32 small:px-14 small:py-5 medium:py-6 medium:px-16 large:py-8 large:px-18">
-      <div className="flex justify-start flex-col">
-        <h1 className="text-3xl text-dark-gray small:text-xl">Contact</h1>
+    <div className="ml-9 flex flex-col md:flex-row justify-start pt-20 pb-10 px-32 small:px-14 small:py-5 medium:py-6 medium:px-16 large:py-8 large:px-18">
+      <div className="flex justify-start m-5 pr-10 flex-col">
+        <h1 className="text-3xl text-dark-gray font-semibold small:text-xl">
+          Contact
+        </h1>
         <div className="flex  justify-center  flex-col pt-4 ">
           <div className="pb-3 flex">
             <svg
@@ -50,8 +52,10 @@ export default function Contact() {
           </div>
         </div>
       </div>
-      <div>
-        <h1 className="text-3xl text-dark-gray pb-3 small:text-xl">Skills</h1>
+      <div className="m-5 ml-9">
+        <h1 className="text-3xl font-semibold text-dark-gray lg:pb-3 small:text-xl">
+          Skills
+        </h1>
         <div>
           <ul>
             <li>HTML</li>

diff --git a/...mponents/contact/__Test__/Contact.test.js → ...mponents/Contact/__Test__/Contact.test.js b/...mponents/contact/__Test__/Contact.test.js → ...mponents/Contact/__Test__/Contact.test.js
diff --git a/...Test__/__snapshots__/Contact.test.js.snap → ...Test__/__snapshots__/Contact.test.js.snap b/...Test__/__snapshots__/Contact.test.js.snap → ...Test__/__snapshots__/Contact.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`renders Contact 1`] = `
 <div
-  className=" bg-[#f8f8f8] flex justify-around items-center pt-20 pb-10 px-32 small:px-14 small:py-5 medium:py-6 medium:px-16 large:py-8 large:px-18"
+  className="ml-9 flex flex-col md:flex-row justify-start pt-20 pb-10 px-32 small:px-14 small:py-5 medium:py-6 medium:px-16 large:py-8 large:px-18"
 >
   <div
-    className="flex justify-start flex-col"
+    className="flex justify-start m-5 pr-10 flex-col"
   >
     <h1
-      className="text-3xl text-dark-gray small:text-xl"
+      className="text-3xl text-dark-gray font-semibold small:text-xl"
     >
       Contact
     </h1>
@@ -81,9 +81,11 @@ exports[`renders Contact 1`] = `
       </div>
     </div>
   </div>
-  <div>
+  <div
+    className="m-5 ml-9"
+  >
     <h1
-      className="text-3xl text-dark-gray pb-3 small:text-xl"
+      className="text-3xl font-semibold text-dark-gray lg:pb-3 small:text-xl"
     >
       Skills
     </h1>

diff --git a/src/components/JobsShowcase/JobsShowcase.jsx b/src/components/JobsShowcase/JobsShowcase.jsx
@@ -2,7 +2,7 @@ import Showcase from "./Showcase";
 
 const JobsShowcase = ({ showcaseArray }) => {
   return (
-    <div className="my-20 flex justify-center gap-x-20 flex-wrap w-screen ">
+    <div className="my-20 flex justify-center gap-x-20 flex-wrap">
       {showcaseArray.map((data) => {
         return (
           <Showcase

diff --git a/src/components/JobsShowcase/__snapshots__/JobsShowcase.test.js.snap b/src/components/JobsShowcase/__snapshots__/JobsShowcase.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly when the component matches the snapshot 1`] = `
 <div
-  className="my-20 flex justify-center gap-x-20 flex-wrap w-screen "
+  className="my-20 flex justify-center gap-x-20 flex-wrap"
 >
   <div
     className="w-96 small:w-80 px-11 py-9 mb-20 flex flex-col justify-between content-start  shadow-[2px_7px_7px_5px_rgba(83,83,83,0.3)] rounded-lg bg-light-gray text-gray-800 text-left leading-8  "

diff --git a/src/components/NameAndLinks/--Test--/__snapshots__/NameAndLinks.test.js.snap b/src/components/NameAndLinks/--Test--/__snapshots__/NameAndLinks.test.js.snap
@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders  NameAndLinks component correctly 1`] = `
-<div
-  className=""
->
+<div>
   <div
-    className="  flex flex-row pt-6  pl-44  small:pl-10 "
+    className="flex flex-row pt-6  pl-44  small:pl-10 "
   >
     <div
       className="bg-black  pt-6 p-10  "
@@ -17,13 +15,13 @@ exports[`renders  NameAndLinks component correctly 1`] = `
       />
     </div>
     <div
-      className=" flex flex-col   pt-6  "
+      className="flex flex-col pt-6  "
     >
       <button
-        className="bg-dark-gray hover:bg-[#226086]  ml-8  mb-4 w-40 text-white font-bold py-2 px-4 rounded-full  "
+        className="bg-transparent hover:bg-dark-gray w-40  ml-8 mb-4  text-[#154360] font-semibold hover:text-white py-2 px-4 border border-dark-gray hover:border-transparent rounded-full"
         type="button"
       >
-        UPload Photo
+        Upload Photo
       </button>
       <button
         className="bg-transparent hover:bg-dark-gray w-40  ml-8 mb-4  text-[#154360] font-semibold hover:text-white py-2 px-4 border border-dark-gray hover:border-transparent rounded-full"
@@ -37,7 +35,7 @@ exports[`renders  NameAndLinks component correctly 1`] = `
     className="pt-32  pb-32 pl-44 small:pl-10 "
   >
     <h1
-      className="mb-4 text-4xl  text-dark-gray md:text-5xl lg:text-6x  pb-7 text-left"
+      className="mb-4 text-4xl text-dark-gray md:text-5xl lg:text-6x pb-7 text-left"
     >
       Resume File
     </h1>
@@ -46,10 +44,10 @@ exports[`renders  NameAndLinks component correctly 1`] = `
         className="relative"
       >
         <div
-          className="flex absolute  items-center "
+          className="flex absolute items-center "
         >
           <input
-            className="  p-6 pl-44 pr-96   small:pl-24 small:pr-8  medium:pl-44  medium:pr-24  rounded-lg border border-gray-300 "
+            className="p-6 pl-44 mr-5 md:mr-0 w-full small:pl-24 small:pr-8 medium:pl-44  medium:pr-24  rounded-lg border border-gray-300 placeholder:text-20"
             placeholder="No File Selected"
             required={true}
           />

diff --git a/src/components/NameAndLinks/NameAndLinks.js b/src/components/NameAndLinks/NameAndLinks.js
@@ -2,21 +2,21 @@ import React from "react";
 
 const NameAndLinks = () => {
   return (
-    <div className="">
-      <div className="  flex flex-row pt-6  pl-44  small:pl-10 ">
+    <div>
+      <div className="flex flex-row pt-6  pl-44  small:pl-10 ">
         <div className="bg-black  pt-6 p-10  ">
           <img
             src="https://i.pinimg.com/236x/44/ab/21/44ab21be0821eed03d0943dd5662def8.jpg"
             className="w-20 bg-blue-100"
             alt=""
           />
         </div>
-        <div className=" flex flex-col   pt-6  ">
+        <div className="flex flex-col pt-6  ">
           <button
             type="button"
-            className="bg-dark-gray hover:bg-[#226086]  ml-8  mb-4 w-40 text-white font-bold py-2 px-4 rounded-full  "
+            className="bg-transparent hover:bg-dark-gray w-40  ml-8 mb-4  text-[#154360] font-semibold hover:text-white py-2 px-4 border border-dark-gray hover:border-transparent rounded-full"
           >
-            UPload Photo
+            Upload Photo
           </button>
           <button
             type="button"
@@ -27,15 +27,15 @@ const NameAndLinks = () => {
         </div>
       </div>
       <div className="pt-32  pb-32 pl-44 small:pl-10 ">
-        <h1 className="mb-4 text-4xl  text-dark-gray md:text-5xl lg:text-6x  pb-7 text-left">
+        <h1 className="mb-4 text-4xl text-dark-gray md:text-5xl lg:text-6x pb-7 text-left">
           Resume File
         </h1>
 
         <form>
           <div className="relative">
-            <div className="flex absolute  items-center ">
+            <div className="flex absolute items-center ">
               <input
-                className="  p-6 pl-44 pr-96   small:pl-24 small:pr-8  medium:pl-44  medium:pr-24  rounded-lg border border-gray-300 "
+                className="p-6 pl-44 mr-5 md:mr-0 w-full small:pl-24 small:pr-8 medium:pl-44  medium:pr-24  rounded-lg border border-gray-300 placeholder:text-20"
                 placeholder="No File Selected"
                 required
               />

diff --git a/src/components/Navbar/DropDown.jsx b/src/components/Navbar/DropDown.jsx
@@ -1,5 +1,6 @@
 import { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
+import { Link } from "react-router-dom";
 
 function DropDown() {
   return (
@@ -11,7 +12,7 @@ function DropDown() {
       <div>
         <Menu.Button
           data-testid="filter-botton-toggle"
-          className="bg-red-400 hover:bg-blue-700 text-white font-bold py-2 px-9 mx-4 rounded-full"
+          className="bg-red-400 hover:bg-blue-700 text-white font-bold py-2 px-5 mx-3 rounded-full"
         >
           {" "}
           Account
@@ -27,7 +28,7 @@ function DropDown() {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute left-0 md:right-0 z-10 mt-2 w-40 origin-center md:origin-top-right rounded-md bg-accent shadow-lg ring-1 ring-white ring-opacity-5 focus:outline-none">
+        <Menu.Items className="absolute md:right-0 z-10 mt-2 w-40 origin-center md:origin-top-right rounded-md bg-accent shadow-lg ring-1 ring-white ring-opacity-5 focus:outline-none">
           <div>
             <Menu.Item>
               {({ active }) => (
@@ -40,7 +41,9 @@ function DropDown() {
                       : "text-black-500"
                   }`}
                 >
-                  <h3>View Profile</h3>
+                  <Link to="/profile">
+                    <h3>View Profile</h3>
+                  </Link>
                 </div>
               )}
             </Menu.Item>
@@ -55,7 +58,9 @@ function DropDown() {
                       : "text-black-500"
                   }`}
                 >
-                  <h3>Edit Profile</h3>
+                  <Link to="/profile-edit">
+                    <h3>Edit Profile</h3>
+                  </Link>
                 </div>
               )}
             </Menu.Item>

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -1,29 +1,23 @@
 /* eslint-disable */
 /* eslint-disable no-console, no-control-regex*/
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faMagnifyingGlass,
-  faGlobe,
-  faCaretDown,
-} from "@fortawesome/free-solid-svg-icons";
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMagnifyingGlass, faGlobe } from "@fortawesome/free-solid-svg-icons";
 import Button from "./Button";
 import Dropdown from "./DropDown";
 import { useTranslation } from "react-i18next";
 
-import { Link } from "react-router-dom";
-
 const Navbar = () => {
-  let Links = [
+  const Links = [
     { name: "Home", link: "/" },
     { name: "About", link: "/about-us" },
     { name: "Roadmap", link: "/roadmap" },
     { name: "Jobs", link: "/jobs" },
     { name: "Contact", link: "/contact" },
   ];
   const isAuthenticated = true;
-  let [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false);
   const [openDropDown, setOpenDropDown] = useState(false);
   const [isEnglish, setIsEnglish] = useState(true);
 
@@ -34,53 +28,54 @@ const Navbar = () => {
     i18n.changeLanguage(isEnglish ? "en" : "ar");
   };
   return (
-    <div className="shadow-md w-full fixed top-0 left-0">
-      <div className="md:flex items-center justify-between bg-white py-4 md:px-10 px-7">
-        <div className="font-bold text-2xl cursor-pointer flex items-center font-[Poppins] text-gray-800">
-          <span className="text-3xl text-indigo-600 mr-1 pt-2">
-            <img src="/logo.svg" alt="logo" className="h-8 md:flex md:h-12" />
-          </span>
-        </div>
-        <div
-          onClick={() => setOpen(!open)} //set open if close.
-          className="text-3xl absolute right-8 top-6 cursor-pointer md:hidden"
-        >
-          <ion-icon name={open ? "close" : "menu"}></ion-icon>
-        </div>
+    <div className="bg-white lg:flex-nowrap md:flex-wrap shadow-md max-w-10 sticky top-0 left-0 z-10 md:flex items-center  justify-between py-4 md:px-10 px-7">
+      <img
+        src="/logo.svg"
+        alt="logo"
+        className="h-8 md:flex md:h-12 cursor-pointer"
+      />
+      <div
+        onClick={() => setOpen(!open)} //set open if close.
+        className="text-3xl absolute right-8 top-6 cursor-pointer md:hidden object-scale-down"
+      >
+        <ion-icon name={open ? "close" : "menu"} />
+      </div>
 
-        <ul
-          className={`mx-5 md:flex md:items-center md:pb-0 pb-12 absolute md:static bg-white md:z-auto z-[-1] left-0 w-full md:w-auto md:pl-0 pl-9 transition-all duration-500 ease-in ${
-            open ? "top-20" : "top-[-490px]"
-          }`}
-        >
-          {Links.map((link) => (
-            <li key={link.name} className="md:ml-8 text-xl md:my-0 my-7">
-              <Link
-                to={link.link}
-                className="text-gray-800 hover:text-gray-400 duration-500"
-              >
-                {link.name}
-              </Link>
-            </li>
-          ))}
+      <ul
+        className={`md:flex md:items-center md:justify-item-ends md:pb-0 pb-12 absolute md:static bg-white md:z-auto z-[-1] md:pl-0 pl-9 transition-all duration-500 ease-in ${
+          open ? "top-20" : "top-[-490px]"
+        }`}
+      >
+        {Links.map((link) => (
+          <li
+            key={link.name}
+            className="md:ml-8 lg:text-xl md:text-sm lg:my-0 my-7"
+          >
+            <Link
+              to={link.link}
+              className="text-gray-800 hover:text-gray-400 duration-500"
+            >
+              {link.name}
+            </Link>
+          </li>
+        ))}
 
-          <span onClick={handleTranslate} className="mx-3">
-            <FontAwesomeIcon icon={faGlobe} className="mx-1" />
-            {isEnglish ? "En" : "Ku"}
-          </span>
-          <div className="w-60 flex items-center md: flex ">
-            <input
-              type="text"
-              className=" block w-full px-4 py-2 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40 w-full"
-              placeholder="Search..."
-            />
-            <button type="button" className="-ml-6">
-              <FontAwesomeIcon icon={faMagnifyingGlass} />
-            </button>
-          </div>
-          {isAuthenticated ? <Dropdown /> : <Button>Login</Button>}
-        </ul>
-      </div>
+        <span onClick={handleTranslate} className="mx-3">
+          <FontAwesomeIcon icon={faGlobe} className="mx-5" />
+          {isEnglish ? "En" : "Ku"}
+        </span>
+        <div className="lg:w-60 md:w-45 flex items-center">
+          <input
+            type="text"
+            className="block px-4 md:my-0 my-5 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40 w-full"
+            placeholder="Search..."
+          />
+          <button type="button" className="-ml-6">
+            <FontAwesomeIcon icon={faMagnifyingGlass} />
+          </button>
+        </div>
+        {isAuthenticated ? <Dropdown /> : <Button>Login</Button>}
+      </ul>
     </div>
   );
 };