From fea3fdfa29c5c9e57bc34f6dfc06323766555be2 Mon Sep 17 00:00:00 2001
From: snokpok <vinceny.fe@gmail.com>
Date: Fri, 22 Sep 2023 15:58:12 -0700
Subject: [PATCH] auth page changes + icons with potential fix for google oauth

---
 apps/api-v2/src/config.ts                     |  1 +
 apps/api-v2/src/db.ts                         |  4 +-
 apps/api-v2/src/index.ts                      |  2 +-
 apps/desktop-v2/.env.example                  |  3 +-
 apps/desktop-v2/app/auth/page.tsx             | 18 +++++-
 apps/desktop-v2/app/layout.tsx                |  5 +-
 apps/desktop-v2/app/page.tsx                  |  9 +--
 apps/desktop-v2/components/button.tsx         | 11 +++-
 apps/desktop-v2/components/command-center.tsx |  9 +--
 apps/desktop-v2/components/icons.tsx          | 29 ++++++++-
 .../components/task-builder-dialog.tsx        |  8 +--
 apps/desktop-v2/hooks/useSupernovaToast.tsx   | 61 +++++++++----------
 apps/desktop-v2/tailwind.config.ts            | 24 ++++++++
 package.json                                  |  3 +-
 14 files changed, 124 insertions(+), 63 deletions(-)

diff --git a/apps/api-v2/src/config.ts b/apps/api-v2/src/config.ts
index 4d69d16..de79072 100644
--- a/apps/api-v2/src/config.ts
+++ b/apps/api-v2/src/config.ts
@@ -14,6 +14,7 @@ const config = parseEnv(process.env, {
   REDIS_URL: z.string().min(1),
   AXIOM_TOKEN: z.string().min(1).optional(),
   AXIOM_DATASET: z.string().min(1).optional(),
+  THIS_URL: z.string().min(1),
 });
 
 export default config;
diff --git a/apps/api-v2/src/db.ts b/apps/api-v2/src/db.ts
index 3df8212..2263074 100644
--- a/apps/api-v2/src/db.ts
+++ b/apps/api-v2/src/db.ts
@@ -1,13 +1,15 @@
 import { PrismaClient } from "@prisma/client";
 import { createClient } from "redis";
 import config from "./config";
+import { logger } from "./logging";
 
 export const prisma = new PrismaClient();
 
+// TODO: use ioredis instead
 export const redis = createClient({
   url: config.REDIS_URL,
 });
 
 redis.on("error", (err) => {
-  console.error(err);
+  logger.error(err);
 });
diff --git a/apps/api-v2/src/index.ts b/apps/api-v2/src/index.ts
index 182a379..b5128e7 100644
--- a/apps/api-v2/src/index.ts
+++ b/apps/api-v2/src/index.ts
@@ -31,7 +31,7 @@ export const createApp = () => {
       {
         clientID: config.GOOGLE_CLIENT_ID,
         clientSecret: config.GOOGLE_CLIENT_SECRET,
-        callbackURL: "/auth/google/callback",
+        callbackURL: `${config.THIS_URL}/auth/google/callback`,
       },
       (_accessToken, _refreshToken, profile, cb) => {
         // generate a JWT that encodes the user's OAuth profile
diff --git a/apps/desktop-v2/.env.example b/apps/desktop-v2/.env.example
index ad20239..632dcce 100644
--- a/apps/desktop-v2/.env.example
+++ b/apps/desktop-v2/.env.example
@@ -1 +1,2 @@
-NEXT_PUBLIC_API_BASE_URL=""
\ No newline at end of file
+NEXT_PUBLIC_API_BASE_URL= # the API's base URL; prod should be https://api.trysupernova.one
+ENV= # the platform to build for. Either "desktop" or "web"; optional
\ No newline at end of file
diff --git a/apps/desktop-v2/app/auth/page.tsx b/apps/desktop-v2/app/auth/page.tsx
index b5d01f6..c8c7151 100644
--- a/apps/desktop-v2/app/auth/page.tsx
+++ b/apps/desktop-v2/app/auth/page.tsx
@@ -6,6 +6,8 @@ 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";
 
 const AuthPage = () => {
   const router = useRouter();
@@ -20,10 +22,20 @@ const AuthPage = () => {
   }, []);
 
   return (
-    <main className="flex flex-col items-center justify-center max-h-screen">
-      <div className="flex flex-col">
+    <main className="flex flex-col items-center justify-center h-screen max-h-screen bg-dark-teal-gradient">
+      <div className="flex flex-col items-center gap-2">
+        <SupernovaGlobeLogoImage
+          priority
+          className="animate-slideInFromTopFast"
+        />
+        <div className="h-1" />
+        <h1 className="text-xl text-white">Sign in</h1>
+        <div className="h-1" />
         <Link href={supernovaAPI.getGoogleOAuthUrl()}>
-          <Button>Login with Google</Button>
+          {/* TODO: replace with Google logo */}
+          <Button bgVariant="white" className="gap-1">
+            <GlobeIcon /> Sign in with Google
+          </Button>
         </Link>
       </div>
     </main>
diff --git a/apps/desktop-v2/app/layout.tsx b/apps/desktop-v2/app/layout.tsx
index b52c3a4..c48ac66 100644
--- a/apps/desktop-v2/app/layout.tsx
+++ b/apps/desktop-v2/app/layout.tsx
@@ -16,7 +16,10 @@ function RootLayout({ children }: RootLayoutProps) {
     <html lang="en">
       <body className={manrope.className}>
         {/* drag region because titlebar is overlay */}
-        <div data-tauri-drag-region="self" className="h-5" />
+        <div
+          data-tauri-drag-region="self"
+          className="h-5 bg-transparent z-10 absolute top-0"
+        />
         <ToastClientWrapper>{children}</ToastClientWrapper>
       </body>
     </html>
diff --git a/apps/desktop-v2/app/page.tsx b/apps/desktop-v2/app/page.tsx
index acec1a6..1e1f939 100644
--- a/apps/desktop-v2/app/page.tsx
+++ b/apps/desktop-v2/app/page.tsx
@@ -24,6 +24,7 @@ import { CreateTaskPlaceholder } from "@/components/create-task-placeholder";
 import { useAtom } from "jotai";
 import { chosenTaskIndexGlobal } from "@/store/ui";
 import useOutsideClick from "@/hooks/useOutsideClick";
+import { SupernovaGlobeLogoImage } from "@/components/icons";
 
 function Home() {
   // get today's date in this format: Tue, 26th Aug
@@ -368,13 +369,7 @@ function Home() {
         />
       )}
       <div>
-        <Image
-          src="/supernova-globe.svg"
-          width={30}
-          height={30}
-          alt="Supernova's icon"
-          priority
-        />
+        <SupernovaGlobeLogoImage width={30} height={30} priority />
       </div>
       <div className="flex items-center gap-[10px]">
         <h4 className="text-[20px] font-semibold">Today</h4>
diff --git a/apps/desktop-v2/components/button.tsx b/apps/desktop-v2/components/button.tsx
index 27985d0..0e7ff7f 100644
--- a/apps/desktop-v2/components/button.tsx
+++ b/apps/desktop-v2/components/button.tsx
@@ -1,13 +1,20 @@
 import { ButtonHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
-export const Button = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
+type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
+  bgVariant?: "black" | "white";
+};
+
+export const Button = ({ bgVariant = "black", ...props }: Props) => {
   return (
     <button
       {...props}
       className={twMerge(
-        "px-[7px] py-[5px] bg-slate-900 hover:bg-slate-700 transition-colors rounded-[5px] justify-center items-center inline-flex text-white text-sm font-medium leading-[14px]",
+        "px-[7px] py-[5px] transition-colors rounded-[5px] justify-center items-center inline-flex text-sm font-medium leading-[14px]",
         props.disabled && "opacity-50 cursor-not-allowed",
+        bgVariant === "white"
+          ? "bg-white text-black hover:bg-slate-300"
+          : "bg-slate-900 hover:bg-slate-700 text-white",
         props.className
       )}
     >
diff --git a/apps/desktop-v2/components/command-center.tsx b/apps/desktop-v2/components/command-center.tsx
index 806ec44..2d143af 100644
--- a/apps/desktop-v2/components/command-center.tsx
+++ b/apps/desktop-v2/components/command-center.tsx
@@ -8,6 +8,7 @@ import { SupernovaCommand } from "../types/command";
 import { ISupernovaTask } from "../types/supernova-task";
 import { twMerge } from "tailwind-merge";
 import { ibmPlexMono } from "./fonts";
+import { SupernovaGlobeLogoImage } from "./icons";
 
 export const SupernovaCommandCenter = ({
   commands,
@@ -57,13 +58,7 @@ export const SupernovaCommandCenter = ({
               </div>
             )}
             <div className="flex items-center gap-2">
-              <Image
-                src={"/supernova-globe.svg"}
-                width={20}
-                height={20}
-                alt="Supernova's logo"
-                priority
-              />
+              <SupernovaGlobeLogoImage width={20} height={20} priority />
               <Command.Input
                 placeholder="Find a command..."
                 className="outline-none"
diff --git a/apps/desktop-v2/components/icons.tsx b/apps/desktop-v2/components/icons.tsx
index 1fa101b..14b88ae 100644
--- a/apps/desktop-v2/components/icons.tsx
+++ b/apps/desktop-v2/components/icons.tsx
@@ -1,7 +1,32 @@
 import Image from "next/image";
 
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+  width?: number;
+  height?: number;
+  priority?: boolean;
+  placeholder?: "blur" | "empty";
+};
+
 export const arrowRightPath = "icons/arrow-right.svg";
 
-export const ArrowRightIcon = () => (
-  <Image src={arrowRightPath} width={20} height={20} alt="Arrow Right" />
+export const ArrowRightIcon = (props: ImageProps) => (
+  <Image
+    src={arrowRightPath}
+    width={20}
+    height={20}
+    alt="Arrow Right"
+    {...props}
+  />
+);
+
+export const supernovaGlobePath = "/supernova-globe.svg";
+
+export const SupernovaGlobeLogoImage = (props: ImageProps) => (
+  <Image
+    src={supernovaGlobePath}
+    width={40}
+    height={40}
+    alt="Supernova's logo--a gradient globe with cyan/bright teal colors on the left, and pinkish color on the right"
+    {...props}
+  />
 );
diff --git a/apps/desktop-v2/components/task-builder-dialog.tsx b/apps/desktop-v2/components/task-builder-dialog.tsx
index 148787d..e31c2b8 100644
--- a/apps/desktop-v2/components/task-builder-dialog.tsx
+++ b/apps/desktop-v2/components/task-builder-dialog.tsx
@@ -34,6 +34,7 @@ import { Kbd } from "./kbd";
 import { Button } from "./button";
 import { twMerge } from "tailwind-merge";
 import { ibmPlexMono } from "./fonts";
+import { SupernovaGlobeLogoImage } from "./icons";
 
 type CustomElement = { type: "paragraph" | string; children: CustomText[] };
 type CustomText = { text: string };
@@ -183,12 +184,7 @@ export const TaskBuilderDialog = (props: {
         >
           <div className="w-full h-full px-3 py-2.5 bg-white rounded-[10px] shadow border border-gray-300 justify-start items-start gap-2.5 flex">
             <div className="w-[25px] h-[25px] relative">
-              <Image
-                src="/supernova-globe.svg"
-                width={25}
-                height={25}
-                alt="Supernova's icon"
-              />
+              <SupernovaGlobeLogoImage width={25} height={25} />
             </div>
             <div className="grow shrink basis-0 overflow-x-clip flex flex-col gap-1">
               <p
diff --git a/apps/desktop-v2/hooks/useSupernovaToast.tsx b/apps/desktop-v2/hooks/useSupernovaToast.tsx
index 7d1c375..aedca9f 100644
--- a/apps/desktop-v2/hooks/useSupernovaToast.tsx
+++ b/apps/desktop-v2/hooks/useSupernovaToast.tsx
@@ -1,39 +1,38 @@
 import { manrope } from "@/components/fonts";
-import { ReactNode } from "react";
+import { ReactNode, useCallback } from "react";
 import { ExternalToast, toast } from "sonner";
 import { twMerge } from "tailwind-merge";
 
 const useSupernovaToast = () => {
-  const makeToast = (
-    message: ReactNode,
-    type?: "success" | "error",
-    data?: ExternalToast
-  ) => {
-    if (type === "success") {
-      // toast.custom((t) => (
-      //   <div className="flex flex-col p-2 shadow bg-white w-full rounded-md border border-gray-300">
-      //     <p className={twMerge("font-medium inline-flex items-center gap-2", manrope.className)}>
-      //       {data?.icon}
-      //       {message}</p>
-      //   </div>
-      // ));
-      toast.success(
-        <p
-          className={twMerge(
-            "font-medium inline-flex items-center gap-2",
-            manrope.className
-          )}
-        >
-          {data?.icon} {message}
-        </p>,
-        data
-      );
-    } else if (type === "error") {
-      toast.error(message, data);
-    } else {
-      toast(message, data);
-    }
-  };
+  const makeToast = useCallback(
+    (message: ReactNode, type?: "success" | "error", data?: ExternalToast) => {
+      if (type === "success") {
+        // toast.custom((t) => (
+        //   <div className="flex flex-col p-2 shadow bg-white w-full rounded-md border border-gray-300">
+        //     <p className={twMerge("font-medium inline-flex items-center gap-2", manrope.className)}>
+        //       {data?.icon}
+        //       {message}</p>
+        //   </div>
+        // ));
+        toast.success(
+          <p
+            className={twMerge(
+              "font-medium inline-flex items-center gap-2",
+              manrope.className
+            )}
+          >
+            {data?.icon} {message}
+          </p>,
+          data
+        );
+      } else if (type === "error") {
+        toast.error(message, data);
+      } else {
+        toast(message, data);
+      }
+    },
+    []
+  );
 
   return { makeToast };
 };
diff --git a/apps/desktop-v2/tailwind.config.ts b/apps/desktop-v2/tailwind.config.ts
index 1f12278..f571482 100644
--- a/apps/desktop-v2/tailwind.config.ts
+++ b/apps/desktop-v2/tailwind.config.ts
@@ -12,8 +12,30 @@ const config: Config = {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        "dark-teal-gradient":
+          "linear-gradient(180deg, #000 17.19%, #0A3631 100%)",
       },
       keyframes: {
+        slideInFromTop: {
+          from: {
+            opacity: "0",
+            transform: "translateY(-20%)",
+          },
+          to: {
+            opacity: "1",
+            transform: "translateY(0)",
+          },
+        },
+        slideInFromBottom: {
+          from: {
+            opacity: "0",
+            transform: "translateY(10%)",
+          },
+          to: {
+            opacity: "1",
+            transform: "translateY(0)",
+          },
+        },
         overlayShow: {
           from: { opacity: "0" },
           to: { opacity: "0.3" },
@@ -29,6 +51,8 @@ const config: Config = {
       animation: {
         overlayShow: "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
         contentShow: "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        slideInFromBottomSlow: "slideInFromBottom 1.5s ease-in",
+        slideInFromTopFast: "slideInFromTop 0.4s ease-in",
       },
     },
   },
diff --git a/package.json b/package.json
index f33f6e7..e2fc82d 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "prepare": "husky install",
-    "dockerize:api": "docker build -f apps/api-v2/Dockerfile -t supernova-api-v2:latest ."
+    "dockerize:api": "docker build -f apps/api-v2/Dockerfile -t supernova-api-v2:latest .",
+    "prisma-studio": "cd apps/api-v2 && npx prisma studio"
   },
   "devDependencies": {
     "@turbo/gen": "^1.9.7",