Cleanup UI

bring-shrubbery · Aug 3, 2024 · 466f46b · 466f46b
1 parent 084db95
commit 466f46b
Showing 1 changed file with 20 additions and 14 deletions.
diff --git a/apps/nextjs/src/components/Navbar.tsx b/apps/nextjs/src/components/Navbar.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
-import { buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { StarIcon } from "lucide-react";
+import { HeartIcon, StarIcon } from "lucide-react";
 import { IoLogoGithub } from "react-icons/io5";
 
 import CountingNumbers from "./counting-numbers";
@@ -17,7 +17,7 @@ export function Navbar({ githubStars }: { githubStars?: number }) {
       <div className="flex h-full items-center">
         <SVGtoSwiftUILogo width={64} height={64} className="h-16 w-16" />
 
-        <div className="relative hidden sm:block ">
+        <div className="relative hidden sm:block">
           <h1
             className="bg-gradient-to-r from-[#F5E338] to-[#F05137] bg-clip-text pl-3 pt-1 text-4xl font-bold"
             style={{
@@ -41,15 +41,21 @@ export function Navbar({ githubStars }: { githubStars?: number }) {
 
       {/* Right side content */}
       <div className="flex items-center">
-        <div className="mx-4 hidden overflow-hidden rounded-lg border-2 border-transparent md:block">
-          <iframe
-            src="https://github.com/sponsors/bring-shrubbery/button"
-            title="Sponsor bring-shrubbery"
-            height="32"
-            width="120"
-            className="block rounded-md"
-          ></iframe>
-        </div>
+        <Link
+          href="https://github.com/sponsors/bring-shrubbery"
+          className="mx-4 hidden overflow-hidden rounded-lg border-2 border-transparent md:block"
+        >
+          <Button
+            variant="secondary"
+            className="group flex gap-2 border border-zinc-200 dark:border-zinc-700"
+          >
+            <HeartIcon
+              size={20}
+              className="h-5 w-5 min-w-5 text-pink-500 transition-transform group-hover:scale-110"
+            />
+            Sponsor
+          </Button>
+        </Link>
 
         {githubStars && <StarOnGithubButton githubStars={githubStars} />}
 
@@ -73,13 +79,13 @@ export const StarOnGithubButton = ({
       <Link
         className={cn(
           buttonVariants({ variant: "outline" }),
-          "h-[34px] gap-2 overflow-hidden whitespace-pre md:flex",
+          "h-[38px] gap-2 overflow-hidden whitespace-pre md:flex",
           "group relative justify-center transition-all duration-300 ease-out",
         )}
         href={"https://github.com/bring-shrubbery/SVG-to-SwiftUI"}
       >
         <span className="absolute -right-10 -mt-12 h-32 w-8 translate-x-16 rotate-45 transform bg-white opacity-10 blur-lg transition-all duration-1000 ease-out group-hover:-translate-x-40" />
-        <IoLogoGithub className="h-4 w-4" />
+        <IoLogoGithub className="h-5 w-5 min-w-5" />
         Star on GitHub
         <div className="hidden w-[54px] items-center gap-1 text-sm text-zinc-50 lg:flex">
           <StarIcon className="h-4 w-4 transition-all duration-300 group-hover:text-yellow-300" />