navbar bg undecided

trypear · Jun 20, 2024 · 4262529 · 4262529
1 parent 04a4059
commit 4262529
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 219 deletions.
diff --git a/app/css/additional-styles/custom-animation.css b/app/css/additional-styles/custom-animation.css
diff --git a/app/css/additional-styles/fonts.css b/app/css/additional-styles/fonts.css
diff --git a/app/css/style.css b/app/css/style.css
@@ -5,8 +5,6 @@
 @import "additional-styles/utility-patterns.css";
 @import "additional-styles/range-slider.css";
 @import "additional-styles/toggle-switch.css";
-@import "additional-styles/fonts.css";
-@import "additional-styles/custom-animation.css";
 @import "additional-styles/theme.css";
 
 @import "tailwindcss/utilities";

diff --git a/components/ui/PearDark26x24.svg b/components/ui/PearDark26x24.svg
diff --git a/components/ui/authbutton.tsx b/components/ui/authbutton.tsx
@@ -2,6 +2,7 @@ import { createClient } from "@/utils/supabase/server";
 import { redirect } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
+import { CircleUserRound } from "lucide-react";
 
 export default async function AuthButton() {
   const supabase = createClient();
@@ -17,48 +18,38 @@ export default async function AuthButton() {
   return (
     <div className="hidden flex-row items-center space-x-1 md:flex">
       {error || !data?.user ? (
-        <>
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g clip-path="url(#clip0_255_904)">
-              <path
-                d="M11.9941 23.9883C13.6326 23.9883 15.175 23.6747 16.6213 23.0475C18.0677 22.4204 19.3435 21.5542 20.4488 20.4488C21.5542 19.3435 22.4204 18.0677 23.0475 16.6213C23.6747 15.175 23.9883 13.6326 23.9883 11.9941C23.9883 10.3557 23.6747 8.81334 23.0475 7.36699C22.4204 5.92064 21.5542 4.64479 20.4488 3.53944C19.3435 2.4341 18.0657 1.56786 16.6154 0.940717C15.1651 0.313572 13.6208 0 11.9824 0C10.344 0 8.80159 0.313572 7.35523 0.940717C5.90888 1.56786 4.63499 2.4341 3.53357 3.53944C2.43215 4.64479 1.56786 5.92064 0.940717 7.36699C0.313572 8.81334 0 10.3557 0 11.9941C0 13.6326 0.313572 15.175 0.940717 16.6213C1.56786 18.0677 2.4341 19.3435 3.53944 20.4488C4.64479 21.5542 5.92064 22.4204 7.36699 23.0475C8.81334 23.6747 10.3557 23.9883 11.9941 23.9883ZM11.9941 21.9892C10.6066 21.9892 9.30918 21.7306 8.10193 21.2132C6.89468 20.6958 5.8344 19.9805 4.92112 19.0672C4.00785 18.1539 3.29447 17.0937 2.78099 15.8864C2.26752 14.6792 2.01078 13.3817 2.01078 11.9941C2.01078 10.6066 2.26752 9.30918 2.78099 8.10193C3.29447 6.89468 4.00589 5.83245 4.91525 4.91525C5.8246 3.99804 6.88291 3.28271 8.09017 2.76923C9.29742 2.25576 10.5948 1.99903 11.9824 1.99903C13.37 1.99903 14.6674 2.25576 15.8746 2.76923C17.0819 3.28271 18.1441 3.99804 19.0613 4.91525C19.9785 5.83245 20.6958 6.89468 21.2132 8.10193C21.7306 9.30918 21.9892 10.6066 21.9892 11.9941C21.9892 13.3817 21.7325 14.6792 21.2191 15.8864C20.7056 17.0937 19.9922 18.1539 19.0789 19.0672C18.1656 19.9805 17.1034 20.6958 15.8922 21.2132C14.6811 21.7306 13.3817 21.9892 11.9941 21.9892ZM6.60854 17.9441H17.3563C17.5914 17.9441 17.7658 17.8755 17.8795 17.7383C17.9931 17.6012 18.05 17.4228 18.05 17.2034C18.05 16.8819 17.9265 16.4645 17.6796 15.9511C17.4327 15.4376 17.0603 14.9241 16.5625 14.4106C16.0647 13.8971 15.4356 13.464 14.6752 13.1113C13.9147 12.7585 13.0171 12.5821 11.9824 12.5821C10.9476 12.5821 10.05 12.7585 9.28958 13.1113C8.52917 13.464 7.90007 13.8971 7.40227 14.4106C6.90447 14.9241 6.5321 15.4376 6.28517 15.9511C6.03823 16.4645 5.91476 16.8819 5.91476 17.2034C5.91476 17.4228 5.97159 17.6012 6.08526 17.7383C6.19893 17.8755 6.37336 17.9441 6.60854 17.9441ZM11.9824 11.6179C12.539 11.6257 13.0465 11.4846 13.5051 11.1945C13.9638 10.9045 14.3283 10.5106 14.5987 10.0128C14.8692 9.51496 15.0044 8.95249 15.0044 8.32534C15.0044 7.7374 14.8692 7.19845 14.5987 6.70849C14.3283 6.21853 13.9638 5.82657 13.5051 5.5326C13.0465 5.23862 12.539 5.09164 11.9824 5.09164C11.4258 5.09164 10.9182 5.23862 10.4596 5.5326C10.001 5.82657 9.63647 6.21853 9.36602 6.70849C9.09556 7.19845 8.96034 7.7374 8.96034 8.32534C8.96034 8.95249 9.09556 9.513 9.36602 10.0069C9.63647 10.5008 10.001 10.8927 10.4596 11.1828C10.9182 11.4728 11.4258 11.6179 11.9824 11.6179Z"
-                fill="black"
-                fill-opacity="0.85"
-              />
-            </g>
-            <defs>
-              <clipPath id="clip0_255_904">
-                <rect width="23.9883" height="24" fill="white" />
-              </clipPath>
-            </defs>
-          </svg>
+        <div className="flex flex-row items-center space-x-1">
+          <CircleUserRound className="h-5 w-5" />
 
-          <Link href={"/signin"}>Sign in</Link>
-          <div>/</div>
-          <Link href={"/signup"}>Sign up</Link>
-        </>
+          <Link
+            className="transition duration-150 ease-in-out hover:text-gray-600"
+            href={"/signin"}
+          >
+            Sign in
+          </Link>
+          <span className="text-gray-600">/</span>
+          <Link
+            className="transition duration-150 ease-in-out hover:text-gray-600"
+            href={"/signup"}
+          >
+            Sign up
+          </Link>
+        </div>
       ) : (
         <>
-          <Link href={"/settings"}>Settings</Link>
-          <div>/</div>
-          <div onClick={handleSignOut}>Sign out</div>
-          {/* <Link
-            href="/settings"
-            className="text-white mx-4 my-2 inline-flex items-center justify-center rounded-sm border border-transparent bg-purple-600 px-4 py-2 font-medium transition duration-150 ease-in-out hover:bg-purple-700"
+          <Link
+            className="transition duration-150 ease-in-out hover:text-gray-600"
+            href={"/settings"}
           >
             Settings
           </Link>
-          <form action={handleSignOut}>
-            <button className="text-white my-2 inline-flex items-center justify-center rounded-sm border border-transparent bg-gray-700 px-4 py-2 font-medium transition duration-150 ease-in-out hover:bg-gray-800">
-              Sign out
-            </button>
-          </form> */}
+          <span className="text-gray-600">/</span>
+          <button
+            className="transition duration-150 ease-in-out hover:text-gray-600"
+            onClick={handleSignOut}
+          >
+            Sign out
+          </button>
         </>
       )}
     </div>

diff --git a/components/ui/header.tsx b/components/ui/header.tsx
@@ -1,103 +1,36 @@
 import Link from "next/link";
 import MobileMenu from "./mobile-menu";
 import AuthButton from "./authbutton";
-import PearLightLogo from "./PearLight70x70.svg";
+import PearDarkLogo from "./PearDark26x24.svg";
 
 export default function Header() {
+  // navigation bar links
+  const navLinks = [
+    { label: "About", path: "/about" },
+    { label: "Discord", path: "https://discord.gg/AKy5FmqCkF" },
+    { label: "Github", path: "/~https://github.com/trypear/pearai-app" },
+  ];
   return (
-    <header className="animate-fadein-opacity fixed top-0 z-30 w-full bg-white-50 md:bg-transparent md:backdrop-blur-sm">
+    <header className="animate-fadein-opacity fixed top-0 z-30 w-full bg-white-50 md:from-white-50 md:bg-opacity-40 md:bg-gradient-to-b  md:backdrop-blur-[2px]">
       <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6">
-        <div className="roboto-medium flex h-20 items-center justify-between text-2xl text-black transition ease-in-out hover:text-gray-600 md:text-xl">
+        <div className="flex h-20 items-center justify-between text-xl text-black transition ease-in-out">
           {/* Site branding */}
-          <div className="mr-4 shrink-0">
+          <ul className="flex flex-row items-start space-x-2">
             {/* Logo */}
-            <ul className="flex grow flex-wrap items-center justify-end">
-              <div className="flex flex-row space-x-3">
-                <div className="flex flex-row">
-                  <Link href={"/"}>
-                    <svg
-                      width="26"
-                      height="24"
-                      viewBox="0 0 26 24"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                        d="M7 5.0337C7.00423 5.0337 7.00847 5.03369 7.01272 5.03369V5.0337C10.4094 5.03579 10.4457 5.17926 11.1134 7.82375L11.1134 7.82377C11.2686 8.43857 11.458 9.18856 11.7316 10.1034C12.5599 12.8723 12.7172 13.2765 12.8981 13.7417L12.8981 13.7417C13.0361 14.0964 13.1879 14.4866 13.6617 15.9884C14.7298 19.3737 13.4658 23.784 7.01272 23.999V23.9999C7.00848 23.9997 7.00424 23.9996 7 23.9994C6.99576 23.9996 6.99152 23.9997 6.98728 23.9999V23.999C0.534171 23.784 -0.729823 19.3737 0.338255 15.9884C0.812063 14.4866 0.96386 14.0964 1.10188 13.7417C1.28283 13.2765 1.4401 12.8723 2.26839 10.1034C2.54205 9.18855 2.73141 8.43856 2.88664 7.82375L2.88665 7.82375C3.55435 5.17926 3.59057 5.03579 6.98728 5.0337V5.03369C6.99153 5.03369 6.99577 5.0337 7 5.0337Z"
-                        fill="black"
-                      />
-                      <circle
-                        cx="23.8391"
-                        cy="22.2874"
-                        r="1.7122"
-                        fill="#FFFEFE"
-                      />
-                      <g filter="url(#filter0_d_757_1022)">
-                        <path
-                          fill-rule="evenodd"
-                          clip-rule="evenodd"
-                          d="M8.76512 4.54863L8.7436 4.56796C8.7429 4.56117 8.74206 4.55284 8.74115 4.54304C8.73549 4.54169 8.73049 4.54048 8.72618 4.53941L8.73971 4.52713C8.71027 4.19043 8.62726 2.57318 9.61139 1.47009C10.693 0.257741 13.0997 0.514699 13.1943 0.525314L13.1987 0.525432C13.1987 0.525432 13.1681 3.09028 11.8328 4.05459C10.6403 4.91577 9.08431 4.62144 8.76512 4.54863Z"
-                          fill="black"
-                        />
-                      </g>
-                      <path
-                        d="M12.1637 17.3877C12.1637 19.1766 9.75391 20.4879 9.75391 20.4879C9.75391 20.4879 11.131 19.1766 11.131 17.3877C11.131 15.5988 9.89161 14.889 10.7867 14.5651C11.6818 14.2412 12.1637 15.5988 12.1637 17.3877Z"
-                        fill="#FFFAFA"
-                      />
-                      <defs>
-                        <filter
-                          id="filter0_d_757_1022"
-                          x="7.67095"
-                          y="0.495605"
-                          width="6.58095"
-                          height="6.26796"
-                          filterUnits="userSpaceOnUse"
-                          color-interpolation-filters="sRGB"
-                        >
-                          <feFlood
-                            flood-opacity="0"
-                            result="BackgroundImageFix"
-                          />
-                          <feColorMatrix
-                            in="SourceAlpha"
-                            type="matrix"
-                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                            result="hardAlpha"
-                          />
-                          <feOffset dy="1.05366" />
-                          <feGaussianBlur stdDeviation="0.52683" />
-                          <feComposite in2="hardAlpha" operator="out" />
-                          <feColorMatrix
-                            type="matrix"
-                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-                          />
-                          <feBlend
-                            mode="normal"
-                            in2="BackgroundImageFix"
-                            result="effect1_dropShadow_757_1022"
-                          />
-                          <feBlend
-                            mode="normal"
-                            in="SourceGraphic"
-                            in2="effect1_dropShadow_757_1022"
-                            result="shape"
-                          />
-                        </filter>
-                      </defs>
-                    </svg>
-                  </Link>
-                  <Link href={"/about"}>About</Link>
-                </div>
-                <Link href={"https://discord.gg/AKy5FmqCkF"}>Discord</Link>
-                <Link href={"/~https://github.com/trypear/pearai-app"}>
-                  Github
-                </Link>
-              </div>
-            </ul>
-          </div>
-          {/* Desktop navigation */}
+            <Link className="-mr-2" href={"/"}>
+              <PearDarkLogo />
+            </Link>
+            {/* Nav titles */}
+            {navLinks.map((link, index) => (
+              <Link
+                key={index}
+                className="hover:text-gray-600"
+                href={link.path}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </ul>
           {process.env.NODE_ENV !== "production" && <AuthButton />}{" "}
           {/* AuthButton is hidden in production */}
           <MobileMenu />

diff --git a/components/ui/mobile-menu.tsx b/components/ui/mobile-menu.tsx
@@ -40,7 +40,7 @@ export default function MobileMenu() {
       {/* Hamburger button */}
       <button
         ref={trigger}
-        className={`hamburger ${mobileNavOpen && "active"}`}
+        className={`hamburger className="hover:text-gray-600" ${mobileNavOpen && "active"}`}
         aria-controls="mobile-nav"
         aria-expanded={mobileNavOpen}
         onClick={() => setMobileNavOpen(!mobileNavOpen)}
@@ -61,22 +61,22 @@ export default function MobileMenu() {
       <nav
         id="mobile-nav"
         ref={mobileNav}
-        className="animate-fadein-opacity absolute left-0 top-full z-20 flex w-full flex-col items-center justify-center space-y-6 overflow-hidden bg-white-50 px-4 text-2xl text-black transition-all duration-300 ease-in-out sm:px-6 md:bg-transparent md:backdrop-blur-sm"
+        className="animate-fadein-opacity absolute left-0 top-full z-20 flex w-full flex-col items-center justify-center space-y-6 overflow-hidden bg-white-50 px-4 text-xl text-black transition-all duration-300 ease-in-out sm:px-6 md:bg-transparent md:backdrop-blur-[2px]"
         style={mobileNavOpen ? { opacity: 1 } : { maxHeight: 0, opacity: 0.8 }}
       >
         <Link
-          className="h-full w-full rounded-md bg-primary-500 py-5 text-center backdrop-blur-3xl"
+          className="h-full w-full rounded-md bg-primary-500 py-3 text-center backdrop-blur-3xl"
           onClick={() => setMobileNavOpen(false)}
           href={"/"}
         >
           Sign In
         </Link>
         <Link
-          className="h-full w-full rounded-md bg-black py-5 text-center text-white-50 backdrop-blur-3xl"
+          className="h-full w-full rounded-md bg-black py-3 text-center text-white-50 backdrop-blur-3xl"
           onClick={() => setMobileNavOpen(false)}
           href={"/"}
         >
-          Sign Out
+          Sign Up
         </Link>
       </nav>
     </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -173,10 +173,15 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        "fadein-opacity": {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "fadein-opacity": "fadein-opacity 0.6s ease-in-out",
       },
     },
   },