diff --git a/components/UI/desktopNav.tsx b/components/UI/desktopNav.tsx index 7dadd949..4f79ef3c 100644 --- 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 = ({ 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 = ({ close }) => {
-
  • PFP collections
    • +
  • PFP collections
    • = ({ close }) => {
    -
  • Documentation
    • +
  • Documentation
  • Terms of use
    • @@ -72,19 +72,19 @@ const DesktopNav: FunctionComponent = ({ close }) => {
    -
    +
    - + {" "}
    -
    +
    - +
    -
    - - +
    + +
    diff --git a/components/UI/iconsComponents/icons/discordIcon.tsx b/components/UI/iconsComponents/icons/discordIcon.tsx index ca230682..1bbe5c68 100644 --- 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 = ({ color, width }) => { return ( - + ); }; diff --git a/components/UI/iconsComponents/icons/githubIcon2.tsx b/components/UI/iconsComponents/icons/githubIcon2.tsx new file mode 100644 index 00000000..588d8266 --- /dev/null +++ b/components/UI/iconsComponents/icons/githubIcon2.tsx @@ -0,0 +1,32 @@ +import React, { FunctionComponent } from "react"; + +const GitHubIcon2: FunctionComponent = ({ width, color }) => { + return ( + + + + + + + + + + + ); +}; + +export default GitHubIcon2; diff --git a/components/UI/iconsComponents/icons/twitterIcon.tsx b/components/UI/iconsComponents/icons/twitterIcon.tsx index 8bffd99e..ad9599ad 100644 --- 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 = ({ width, color }) => { return ( - + + + ); }; diff --git a/components/UI/searchBar.tsx b/components/UI/searchBar.tsx index 21af5fdb..b7f66ff2 100644 --- a/components/UI/searchBar.tsx +++ b/components/UI/searchBar.tsx @@ -137,9 +137,9 @@ const SearchBar: FunctionComponent = ({ 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 index c93d8865..b02cb618 100644 --- a/components/identities/actions/clickable/clickableGithubIcon.tsx +++ b/components/identities/actions/clickable/clickableGithubIcon.tsx @@ -79,7 +79,7 @@ const ClickableGithubIcon: FunctionComponent = ({
    ) : null} - +
    ) diff --git a/styles/components/desktopNav.module.css b/styles/components/desktopNav.module.css index 743fcc39..333abec4 100644 --- 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 index befc54ea..e3b66963 100644 --- 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 index e5918182..8aa81fbe 100644 --- 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 index 9cffa717..13da26f7 100644 --- 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 index 5f607c86..3d9c3c6e 100644 --- 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;