google icon on sign in button

Author: vuvincent

apps/desktop-v2/app/auth/page.tsx

@@ -6,8 +6,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { homeRoute } from "../meta";
-import { GlobeIcon } from "@radix-ui/react-icons";
-import { SupernovaGlobeLogoImage } from "@/components/icons";
+import { GoogleIcon, SupernovaGlobeLogoImage } from "@/components/icons";
 
 const AuthPage = () => {
   const router = useRouter();
@@ -32,9 +31,8 @@ const AuthPage = () => {
         <h1 className="text-xl text-white">Sign in</h1>
         <div className="h-1" />
         <Link href={supernovaAPI.getGoogleOAuthUrl()}>
-          {/* TODO: replace with Google logo */}
-          <Button bgVariant="white" className="gap-1">
-            <GlobeIcon /> Sign in with Google
+          <Button bgVariant="white" className="gap-2">
+            <GoogleIcon priority /> Sign in with Google
           </Button>
         </Link>
       </div>

apps/desktop-v2/components/icons.tsx

@@ -30,3 +30,15 @@ export const SupernovaGlobeLogoImage = (props: ImageProps) => (
     {...props}
   />
 );
+
+export const googleIconPath = "/icons/google-icon.png";
+
+export const GoogleIcon = (props: ImageProps) => (
+  <Image
+    src={googleIconPath}
+    width={20}
+    height={20}
+    alt="Google icon"
+    {...props}
+  />
+);