Merge pull request #997 from BlessingEmejulu/fix-#947

Fix #947: Menu burger modifications
lfglabs-dev · Jan 28, 2025 · cac1dea · cac1dea
2 parents 5c11c45 + 31961b7
commit cac1dea
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 44 deletions.
diff --git a/components/UI/desktopNav.tsx b/components/UI/desktopNav.tsx
@@ -1,9 +1,9 @@
 import React, { FunctionComponent, MouseEvent, useEffect } from "react";
 import styles from "../../styles/components/desktopNav.module.css";
 import Link from "next/link";
-import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
-import theme from "../../styles/theme";
-
+import TwitterIcon from "./iconsComponents/icons/twitterIcon";
+import DiscordIcon from "./iconsComponents/icons/discordIcon";
+import GitHubIcon2 from "./iconsComponents/icons/githubIcon2";
 type DesktopNavProps = {
   close: () => void;
 };
@@ -16,16 +16,16 @@ const DesktopNav: FunctionComponent<DesktopNavProps> = ({ close }) => {
   // Close when clicking outside the nav
   useEffect(() => {
     const handleClickOutside: EventListener = (e) => {
-      const burger = document.getElementById("burger");
+      const burger = document?.getElementById("burger");
       if (burger && !burger.contains(e.target as Node)) {
         close();
       }
     };
     // Bind the event listener
-    document.addEventListener("mousedown", handleClickOutside);
+    document?.addEventListener("mousedown", handleClickOutside);
     return () => {
       // Unbind the event listener on clean up
-      document.removeEventListener("mousedown", handleClickOutside);
+      document?.removeEventListener("mousedown", handleClickOutside);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -35,7 +35,7 @@ const DesktopNav: FunctionComponent<DesktopNavProps> = ({ close }) => {
       <div className={styles.columns}>
         <div className={styles.column} onClick={close}>
           <Link href="/pfpcollections">
-            <li className={styles.burgerItem}>PFP collections</li>
+            <li className={styles.burgerItemTopLeft}>PFP collections</li>
           </Link>
           <Link
             href={process.env.NEXT_PUBLIC_STARKNET_ID as string}
@@ -57,7 +57,7 @@ const DesktopNav: FunctionComponent<DesktopNavProps> = ({ close }) => {
         </div>
         <div className={styles.column}>
           <Link href="https://docs.starknet.id/" target="_blank">
-            <li className={styles.burgerItem}>Documentation</li>
+            <li className={styles.burgerItemTopRight}>Documentation</li>
           </Link>
           <Link href="https://www.starknet.id/pdfs/Terms.pdf" target="_blank">
             <li className={styles.burgerItem}>Terms of use</li>
@@ -72,19 +72,19 @@ const DesktopNav: FunctionComponent<DesktopNavProps> = ({ close }) => {
       </div>
       <hr className={styles.hr} />
       <div className={styles.socials}>
-        <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300">
+        <div className="rounded-full shadow-gray-400 p-4 cursor-pointer">
           <Link href="https://twitter.com/Starknet_id" target="_blank">
-            <FaTwitter size={24} color={theme.palette.secondary.main} />
+            <TwitterIcon width="28" color="black" />{" "}
           </Link>
         </div>
-        <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300">
+        <div className="rounded-full shadow-gray-400 p-4 cursor-pointer">
           <Link href="https://discord.com/invite/8uS2Mgcsza" target="_blank">
-            <FaDiscord size={24} color={theme.palette.secondary.main} />
+            <DiscordIcon width="28" color="#5865F2" />
           </Link>
         </div>
-        <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300">
-          <Link href="https://github.com/starknet-id" target="_blank">
-            <FaGithub size={24} color={theme.palette.secondary.main} />
+        <div className="rounded-full shadow-gray-400 p-4 cursor-pointer">
+          <Link href="https://github.com/lfglabs-dev" target="_blank">
+            <GitHubIcon2 width="28" color="black" />
           </Link>
         </div>
       </div>

diff --git a/components/UI/iconsComponents/icons/discordIcon.tsx b/components/UI/iconsComponents/icons/discordIcon.tsx
@@ -3,13 +3,16 @@ import React, { FunctionComponent } from "react";
 const DiscordIcon: FunctionComponent<IconProps> = ({ color, width }) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={width}
-      viewBox="0 0 50 50"
+      viewBox="0 0 28 28"
       fill={color}
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M 41.625 10.769531 C 37.644531 7.566406 31.347656 7.023438 31.078125 7.003906 C 30.660156 6.96875 30.261719 7.203125 30.089844 7.589844 C 30.074219 7.613281 29.9375 7.929688 29.785156 8.421875 C 32.417969 8.867188 35.652344 9.761719 38.578125 11.578125 C 39.046875 11.867188 39.191406 12.484375 38.902344 12.953125 C 38.710938 13.261719 38.386719 13.429688 38.050781 13.429688 C 37.871094 13.429688 37.6875 13.378906 37.523438 13.277344 C 32.492188 10.15625 26.210938 10 25 10 C 23.789063 10 17.503906 10.15625 12.476563 13.277344 C 12.007813 13.570313 11.390625 13.425781 11.101563 12.957031 C 10.808594 12.484375 10.953125 11.871094 11.421875 11.578125 C 14.347656 9.765625 17.582031 8.867188 20.214844 8.425781 C 20.0625 7.929688 19.925781 7.617188 19.914063 7.589844 C 19.738281 7.203125 19.34375 6.960938 18.921875 7.003906 C 18.652344 7.023438 12.355469 7.566406 8.320313 10.8125 C 6.214844 12.761719 2 24.152344 2 34 C 2 34.175781 2.046875 34.34375 2.132813 34.496094 C 5.039063 39.605469 12.972656 40.941406 14.78125 41 C 14.789063 41 14.800781 41 14.8125 41 C 15.132813 41 15.433594 40.847656 15.621094 40.589844 L 17.449219 38.074219 C 12.515625 36.800781 9.996094 34.636719 9.851563 34.507813 C 9.4375 34.144531 9.398438 33.511719 9.765625 33.097656 C 10.128906 32.683594 10.761719 32.644531 11.175781 33.007813 C 11.234375 33.0625 15.875 37 25 37 C 34.140625 37 38.78125 33.046875 38.828125 33.007813 C 39.242188 32.648438 39.871094 32.683594 40.238281 33.101563 C 40.601563 33.515625 40.5625 34.144531 40.148438 34.507813 C 40.003906 34.636719 37.484375 36.800781 32.550781 38.074219 L 34.378906 40.589844 C 34.566406 40.847656 34.867188 41 35.1875 41 C 35.199219 41 35.210938 41 35.21875 41 C 37.027344 40.941406 44.960938 39.605469 47.867188 34.496094 C 47.953125 34.34375 48 34.175781 48 34 C 48 24.152344 43.785156 12.761719 41.625 10.769531 Z M 18.5 30 C 16.566406 30 15 28.210938 15 26 C 15 23.789063 16.566406 22 18.5 22 C 20.433594 22 22 23.789063 22 26 C 22 28.210938 20.433594 30 18.5 30 Z M 31.5 30 C 29.566406 30 28 28.210938 28 26 C 28 23.789063 29.566406 22 31.5 22 C 33.433594 22 35 23.789063 35 26 C 35 28.210938 33.433594 30 31.5 30 Z"></path>
+      <path
+        d="M22.5038 5.96338C20.8971 5.21161 19.1973 4.67744 17.4493 4.375C17.2316 4.76863 16.9772 5.29806 16.8018 5.71925C14.9172 5.43584 13.0499 5.43584 11.2 5.71925C11.0247 5.29815 10.7646 4.76863 10.5448 4.375C8.79517 4.67757 7.09392 5.2131 5.48643 5.96731C2.28765 10.8012 1.42049 15.5148 1.85402 20.1618C3.97566 21.7462 6.03175 22.7086 8.05319 23.3385C8.5556 22.6476 8.9997 21.9162 9.38088 21.1518C8.65509 20.8754 7.9554 20.5349 7.29015 20.1342C7.4652 20.0045 7.63615 19.8692 7.80274 19.7287C11.8339 21.6143 16.2141 21.6143 20.1972 19.7287C20.3645 19.8683 20.5354 20.0035 20.7097 20.1342C20.0434 20.536 19.3424 20.8772 18.6152 21.1538C18.9986 21.9213 19.4419 22.6534 19.9429 23.3404C21.9662 22.7107 24.0242 21.7482 26.1459 20.1618C26.6546 14.7749 25.2769 10.1045 22.5038 5.96338ZM9.93012 17.304C8.71995 17.304 7.72751 16.1742 7.72751 14.7985C7.72751 13.4228 8.6988 12.2911 9.93012 12.2911C11.1614 12.2911 12.1539 13.4208 12.1327 14.7985C12.1346 16.1742 11.1615 17.304 9.93012 17.304ZM18.0698 17.304C16.8596 17.304 15.8673 16.1742 15.8673 14.7985C15.8673 13.4228 16.8384 12.2911 18.0698 12.2911C19.3012 12.2911 20.2935 13.4208 20.2724 14.7985C20.2724 16.1742 19.3012 17.304 18.0698 17.304Z"
+        fill={color}
+      />
     </svg>
   );
 };

diff --git a/components/UI/iconsComponents/icons/githubIcon2.tsx b/components/UI/iconsComponents/icons/githubIcon2.tsx
@@ -0,0 +1,32 @@
+import React, { FunctionComponent } from "react";
+
+const GitHubIcon2: FunctionComponent<IconProps> = ({ width, color }) => {
+  return (
+    <svg
+      width={width}
+      height={width}
+      viewBox="0 0 28 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_4850_6207)">
+        <path
+          d="M16.8914 5.66828C14.99 5.22643 13.0125 5.22643 11.111 5.66828C10.0128 4.99472 9.17434 4.68516 8.56456 4.5545C8.3043 4.49576 8.038 4.46809 7.77123 4.47205C7.64984 4.47534 7.52902 4.48992 7.41034 4.51561L7.39478 4.51872L7.38856 4.52183H7.38389L7.597 5.27005L7.38389 4.52339C7.27461 4.55427 7.17341 4.60871 7.08742 4.68288C7.00142 4.75705 6.93271 4.84916 6.88611 4.95272C6.42718 5.98049 6.33975 7.13581 6.63878 8.22094C5.86433 9.1595 5.44228 10.3392 5.44567 11.5561C5.44567 13.9718 6.15811 15.5958 7.373 16.6396C8.22389 17.3707 9.25678 17.7596 10.2928 17.9821C10.1297 18.4609 10.0683 18.9684 10.1123 19.4723V20.4025C9.47923 20.5347 9.04056 20.4927 8.72789 20.3901C8.33745 20.2609 8.03723 20.0012 7.74945 19.6278C7.59901 19.4266 7.45883 19.2179 7.32945 19.0025L7.24078 18.8578C7.12882 18.6717 7.01264 18.4881 6.89234 18.3072C6.59678 17.8701 6.15811 17.3225 5.44878 17.1358L4.69589 16.9383L4.30078 18.4441L5.05367 18.6416C5.17811 18.6727 5.33989 18.7894 5.60589 19.1798C5.70828 19.334 5.80683 19.4906 5.90145 19.6496L6.00723 19.8207C6.15345 20.0572 6.32145 20.3185 6.51589 20.5736C6.90945 21.0869 7.44611 21.6049 8.24256 21.8678C8.787 22.0483 9.40611 22.0918 10.1123 21.9829V24.8872C10.1123 25.0934 10.1943 25.2913 10.3401 25.4371C10.486 25.583 10.6838 25.6649 10.8901 25.6649H17.1123C17.3186 25.6649 17.5164 25.583 17.6623 25.4371C17.8082 25.2913 17.8901 25.0934 17.8901 24.8872V19.3447C17.8901 18.8547 17.8683 18.4052 17.7299 17.9867C18.7612 17.7689 19.7863 17.3801 20.6326 16.6489C21.8459 15.5974 22.5568 13.9578 22.5568 11.5281V11.5265C22.5529 10.3196 22.1307 9.15145 21.3621 8.22094C21.6608 7.1363 21.5733 5.98159 21.1148 4.95428C21.0685 4.85059 21.0001 4.75828 20.9144 4.68385C20.8287 4.60941 20.7277 4.55464 20.6186 4.52339L20.4054 5.27005C20.6186 4.52339 20.617 4.52339 20.6154 4.52339L20.6123 4.52183L20.6061 4.51872L20.5921 4.51561C20.5537 4.50562 20.5147 4.49783 20.4754 4.49228C20.394 4.48039 20.3119 4.47363 20.2297 4.47205C19.9629 4.46811 19.6966 4.49579 19.4363 4.5545C18.8281 4.68516 17.9897 4.99472 16.8914 5.66828Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4850_6207">
+          <rect
+            width="23.3333"
+            height="23.3333"
+            fill="white"
+            transform="translate(2.33203 2.33301)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default GitHubIcon2;
diff --git a/components/UI/iconsComponents/icons/twitterIcon.tsx b/components/UI/iconsComponents/icons/twitterIcon.tsx
@@ -3,14 +3,19 @@ import React, { FunctionComponent } from "react";
 const TwitterIcon: FunctionComponent<IconProps> = ({ width, color }) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={width}
-      viewBox="0 0 24 24"
+      viewBox="0 0 26 23"
       fill={color}
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
+      <path
+        d="M20.0437 0.625H23.801L15.5935 10.0295L25.25 22.829H17.69L11.7645 15.0677L4.992 22.829H1.23125L10.0092 12.7665L0.75 0.62675H8.5025L13.8505 7.7195L20.0437 0.625ZM18.7225 20.575H20.805L7.365 2.76175H5.132L18.7225 20.575Z"
+        fill="black"
+      />
     </svg>
+
+
   );
 };
 

diff --git a/components/UI/searchBar.tsx b/components/UI/searchBar.tsx
@@ -137,9 +137,9 @@ const SearchBar: FunctionComponent<SearchBarProps> = ({
         setShowResults(true);
       }
     }
-    document.addEventListener("mousedown", handleClickOutside);
+    document?.addEventListener("mousedown", handleClickOutside);
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
+      document?.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
 

diff --git a/components/identities/actions/clickable/clickableGithubIcon.tsx b/components/identities/actions/clickable/clickableGithubIcon.tsx
@@ -79,7 +79,7 @@ const ClickableGithubIcon: FunctionComponent<ClickableGithubIconProps> = ({
               <VerifiedIcon width={"24"} color={theme.palette.primary.main} />
             </div>
           ) : null}
-          <GithubIcon width={width} color={"white"} />
+          <GithubIcon width={width} color="white" />
         </div>
       </Tooltip>
     )

diff --git a/styles/components/desktopNav.module.css b/styles/components/desktopNav.module.css
@@ -1,12 +1,11 @@
 .navContainer {
   position: absolute;
   justify-content: space-between;
-  background-color: #fff;
   right: 0;
   top: 38px;
   border-radius: 8px;
-  border: 1px solid var(--light-tertiary-300, #f5f0eb);
-  background: var(--background-light, #fffcf8);
+  border: 1px solid var(--border-color);
+  background: var(--background-light300);
   /* Small Shadow */
   box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
   display: inline-flex;
@@ -25,28 +24,41 @@
   width: 50%;
 }
 
-.burgerItem {
+.burgerItem,
+.burgerItemTopLeft,
+.burgerItemTopRight {
   text-transform: none;
-  color: var(--dark-content, #454545);
+  color: var(--dark-content);
   /* Body/default/medium */
   font-family: Poppins-Regular;
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
-  line-height: 20px; /* 125% */
+  line-height: 28px;
   display: flex;
   padding: 16px;
   gap: 10px;
 }
 
-.burgerItem:hover {
-  background-color: var(--light-tertiary);
+.burgerItem:hover,
+.burgerItemTopLeft:hover,
+.burgerItemTopRight:hover {
+  background-color: #cccccc5d;
+}
+
+.burgerItemTopLeft:hover {
+  border-top-left-radius: 8px;
+}
+
+.burgerItemTopRight:hover {
+  border-top-right-radius: 8px;
 }
 
 .hr {
   width: 100%;
   height: 1px;
-  background-color: var(--light-tertiary);
+  background-color: var(--border-color);
+  border-color: var(--border-color);
 }
 
 .socials {

diff --git a/styles/components/icons.module.css b/styles/components/icons.module.css
@@ -27,7 +27,7 @@
 .clickableIconGithub,
 .clickableIconTwitter,
 .clickableIconAnima {
-  background-color: #55acee;
+  background-color: white;
   border-radius: 25%;
   padding: 0.5rem;
   cursor: pointer;
@@ -59,7 +59,7 @@
 }
 
 .clickableIconGithub {
-  background-color: #24292e;
+  background-color: #000000;
 }
 
 .clickableIconDiscord {

diff --git a/styles/components/identityCard.module.css b/styles/components/identityCard.module.css
@@ -94,7 +94,7 @@
   border-bottom-right-radius: 30px;
   border-bottom-left-radius: 30px;
   margin-top: -1px;
-  z-index: 8888;
+  z-index: 888;
 
   /* Inside */
   display: flex;

diff --git a/styles/components/navbar.module.css b/styles/components/navbar.module.css
@@ -4,7 +4,7 @@
 
 .menuItem {
   margin-left: 2.5rem /* 40px */;
-  font-size: 0.875rem; /* 14px */;
+  font-size: 0.875rem; /* 14px */
   line-height: 1.25rem /* 20px */;
   cursor: pointer;
   font-weight: 500;
@@ -29,10 +29,10 @@
   width: 40px;
   height: 40px;
   transform: translate(-50%, -50%);
-  background-color: red;
   z-index: -1;
   border-radius: 100px;
-  background: var(--light-tertiary);
+  background: var(--dark-content);
+  opacity: 0.1;
 }
 
 .menuItem:hover {
@@ -76,7 +76,7 @@
   color: #454545;
 }
 
-@media (max-width: 1200px) { 
+@media (max-width: 1200px) {
   .navbarContainer {
     height: 80px;
     padding-left: 2rem;
@@ -107,8 +107,6 @@
   }
 }
 
-
-
 .mobileNavbarShown {
   animation: mobileNavbarIn 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }

diff --git a/styles/globals.css b/styles/globals.css
@@ -25,8 +25,9 @@
   --secondary300: #eae0d5;
   --tertiary: #bf9e7b;
   --light-tertiary: #f5f0eb;
-  --background: #fcfffe;
-  --background-light: #fffcf8;
+  --border-color: #cdcccc;
+  --background: #ffffff;
+  --background-light: #ffffff;
   --background-light300: #f8f7f7;
   --background-white: #ffffff;
   --dark-content: #454545;