feat: Redesign signin page (#134)

.changeset/rich-carrots-bathe.md

@@ -0,0 +1,5 @@
+---
+"namesake": patch
+---
+
+Update signin page design

src/components/AppHeader/AppHeader.tsx

@@ -1,23 +1,25 @@
 import { useAuthActions } from "@convex-dev/auth/react";
 import { api } from "@convex/_generated/api";
 import { RiAccountCircleFill } from "@remixicon/react";
+import { useNavigate } from "@tanstack/react-router";
 import { Authenticated, useQuery } from "convex/react";
 import { Button } from "../Button";
 import { Link } from "../Link";
 import { Logo } from "../Logo";
-import { Menu, MenuItem, MenuSeparator, MenuTrigger } from "../Menu";
+import { Menu, MenuItem, MenuTrigger } from "../Menu";
 
 export const AppHeader = () => {
+  const navigate = useNavigate();
   const { signOut } = useAuthActions();
   const role = useQuery(api.users.getCurrentUserRole);
   const isAdmin = role === "admin";
 
-  const handleSignOut = () => {
-    signOut();
+  const handleSignOut = async () => {
+    await signOut().then(() => navigate({ to: "/signin" }));
   };
 
   return (
-    <div className="flex gap-4 bg-gray-app items-center w-screen h-14 px-4 border-b border-gray-dim sticky top-0 z-50">
+    <div className="flex gap-4 bg-gray-app items-center w-screen h-14 px-4 border-b border-gray-dim sticky top-0 z-20">
       <Link href={{ to: "/" }}>
         <Logo className="h-[1.25rem]" />
       </Link>
@@ -32,15 +34,13 @@ export const AppHeader = () => {
             />
             <Menu>
               <MenuItem href={{ to: "/settings" }}>Settings</MenuItem>
-              <MenuSeparator />
               <MenuItem
                 href="https://namesake.fyi/chat"
                 target="_blank"
                 rel="noreferrer"
               >
                 Support&hellip;
               </MenuItem>
-              <MenuSeparator />
               <MenuItem onAction={handleSignOut}>Sign out</MenuItem>
             </Menu>
           </MenuTrigger>

src/components/Button/Button.tsx

@@ -10,7 +10,7 @@ import { focusRing } from "../utils";
 export interface ButtonProps extends AriaButtonProps {
   children?: React.ReactNode;
   icon?: RemixiconComponentType;
-  variant?: "primary" | "secondary" | "destructive" | "icon";
+  variant?: "primary" | "secondary" | "destructive" | "icon" | "ghost";
   size?: "small" | "medium";
 }
 
@@ -19,10 +19,11 @@ export const buttonStyles = tv({
   base: "py-2 text-sm font-medium transition rounded-lg flex gap-1 items-center justify-center border border-black/10 dark:border-white/10 cursor-pointer",
   variants: {
     variant: {
-      primary: "bg-purple-solid",
+      primary: "bg-purple-solid text-white",
       secondary: "bg-gray-ghost text-gray-normal",
       destructive: "bg-red-solid",
       icon: "bg-gray-ghost text-gray-dim hover:text-gray-normal border-0 flex items-center justify-center rounded-full",
+      ghost: "bg-gray-ghost text-gray-dim hover:text-gray-normal border-0",
     },
     size: {
       small: "h-8 px-2",

src/components/Logo/Logo.tsx

@@ -7,7 +7,7 @@ export interface LogoProps {
 export const Logo = ({ className }: LogoProps) => (
   <svg
     aria-label="namesake"
-    className={twMerge("w-auto text-gray-normal", className)}
+    className={twMerge("w-auto text-gray-normal shrink-0", className)}
     fill="currentColor"
     height="30"
     role="img"

src/components/Tabs/Tabs.tsx

@@ -34,11 +34,11 @@ export function Tabs(props: TabsProps) {
 }
 
 const tabListStyles = tv({
-  base: "flex gap-1",
+  base: "grid bg-gray-3 dark:bg-gray-app rounded-lg p-1",
   variants: {
     orientation: {
-      horizontal: "flex-row",
-      vertical: "flex-col items-start",
+      horizontal: "grid-flow-col auto-cols-fr",
+      vertical: "grid-flow-row auto-rows-fr",
     },
   },
 });
@@ -56,11 +56,11 @@ export function TabList<T extends object>(props: TabListProps<T>) {
 
 const tabProps = tv({
   extend: focusRing,
-  base: "flex items-center cursor-pointer rounded-full px-4 py-1.5 text-sm transition forced-color-adjust-none",
+  base: "flex items-center justify-center cursor-pointer rounded-md px-4 py-2 text-sm transition forced-color-adjust-none",
   variants: {
     isSelected: {
-      false: "bg-gray-ghost text-gray-dim hover:text-gray-normal",
-      true: "bg-gray-12 text-gray-1 dark:bg-graydark-12 dark:text-graydark-1 forced-colors:text-[HighlightText] forced-colors:bg-[Highlight]",
+      false: "text-gray-dim hover:text-gray-normal",
+      true: "bg-white dark:bg-gray-12 shadow-sm forced-colors:text-[HighlightText] forced-colors:bg-[Highlight]",
     },
     isDisabled: {
       true: "opacity-50 cursor-default forced-colors:text-[GrayText] selected:text-gray-3 dark:selected:text-gray-5 forced-colors:selected:text-[HighlightText] selected:bg-gray-2 dark:selected:bg-gray-6 forced-colors:selected:bg-[GrayText]",

src/routeTree.gen.ts

@@ -14,7 +14,7 @@ import { Route as rootRoute } from './routes/__root'
 import { Route as UnauthenticatedImport } from './routes/_unauthenticated'
 import { Route as AuthenticatedImport } from './routes/_authenticated'
 import { Route as AuthenticatedIndexImport } from './routes/_authenticated/index'
-import { Route as UnauthenticatedLoginImport } from './routes/_unauthenticated/login'
+import { Route as UnauthenticatedSigninImport } from './routes/_unauthenticated/signin'
 import { Route as AuthenticatedSettingsRouteImport } from './routes/_authenticated/settings/route'
 import { Route as AuthenticatedQuestsRouteImport } from './routes/_authenticated/quests/route'
 import { Route as AuthenticatedAdminRouteImport } from './routes/_authenticated/admin/route'
@@ -47,8 +47,8 @@ const AuthenticatedIndexRoute = AuthenticatedIndexImport.update({
   getParentRoute: () => AuthenticatedRoute,
 } as any)
 
-const UnauthenticatedLoginRoute = UnauthenticatedLoginImport.update({
-  path: '/login',
+const UnauthenticatedSigninRoute = UnauthenticatedSigninImport.update({
+  path: '/signin',
   getParentRoute: () => UnauthenticatedRoute,
 } as any)
 
@@ -173,11 +173,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedSettingsRouteImport
       parentRoute: typeof AuthenticatedImport
     }
-    '/_unauthenticated/login': {
-      id: '/_unauthenticated/login'
-      path: '/login'
-      fullPath: '/login'
-      preLoaderRoute: typeof UnauthenticatedLoginImport
+    '/_unauthenticated/signin': {
+      id: '/_unauthenticated/signin'
+      path: '/signin'
+      fullPath: '/signin'
+      preLoaderRoute: typeof UnauthenticatedSigninImport
       parentRoute: typeof UnauthenticatedImport
     }
     '/_authenticated/': {
@@ -346,11 +346,11 @@ const AuthenticatedRouteWithChildren = AuthenticatedRoute._addFileChildren(
 )
 
 interface UnauthenticatedRouteChildren {
-  UnauthenticatedLoginRoute: typeof UnauthenticatedLoginRoute
+  UnauthenticatedSigninRoute: typeof UnauthenticatedSigninRoute
 }
 
 const UnauthenticatedRouteChildren: UnauthenticatedRouteChildren = {
-  UnauthenticatedLoginRoute: UnauthenticatedLoginRoute,
+  UnauthenticatedSigninRoute: UnauthenticatedSigninRoute,
 }
 
 const UnauthenticatedRouteWithChildren = UnauthenticatedRoute._addFileChildren(
@@ -362,7 +362,7 @@ export interface FileRoutesByFullPath {
   '/admin': typeof AuthenticatedAdminRouteRouteWithChildren
   '/quests': typeof AuthenticatedQuestsRouteRouteWithChildren
   '/settings': typeof AuthenticatedSettingsRouteRouteWithChildren
-  '/login': typeof UnauthenticatedLoginRoute
+  '/signin': typeof UnauthenticatedSigninRoute
   '/': typeof AuthenticatedIndexRoute
   '/quests/$questId': typeof AuthenticatedQuestsQuestIdRoute
   '/settings/data': typeof AuthenticatedSettingsDataRoute
@@ -379,7 +379,7 @@ export interface FileRoutesByFullPath {
 
 export interface FileRoutesByTo {
   '': typeof UnauthenticatedRouteWithChildren
-  '/login': typeof UnauthenticatedLoginRoute
+  '/signin': typeof UnauthenticatedSigninRoute
   '/': typeof AuthenticatedIndexRoute
   '/quests/$questId': typeof AuthenticatedQuestsQuestIdRoute
   '/settings/data': typeof AuthenticatedSettingsDataRoute
@@ -401,7 +401,7 @@ export interface FileRoutesById {
   '/_authenticated/admin': typeof AuthenticatedAdminRouteRouteWithChildren
   '/_authenticated/quests': typeof AuthenticatedQuestsRouteRouteWithChildren
   '/_authenticated/settings': typeof AuthenticatedSettingsRouteRouteWithChildren
-  '/_unauthenticated/login': typeof UnauthenticatedLoginRoute
+  '/_unauthenticated/signin': typeof UnauthenticatedSigninRoute
   '/_authenticated/': typeof AuthenticatedIndexRoute
   '/_authenticated/quests/$questId': typeof AuthenticatedQuestsQuestIdRoute
   '/_authenticated/settings/data': typeof AuthenticatedSettingsDataRoute
@@ -423,7 +423,7 @@ export interface FileRouteTypes {
     | '/admin'
     | '/quests'
     | '/settings'
-    | '/login'
+    | '/signin'
     | '/'
     | '/quests/$questId'
     | '/settings/data'
@@ -439,7 +439,7 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | ''
-    | '/login'
+    | '/signin'
     | '/'
     | '/quests/$questId'
     | '/settings/data'
@@ -459,7 +459,7 @@ export interface FileRouteTypes {
     | '/_authenticated/admin'
     | '/_authenticated/quests'
     | '/_authenticated/settings'
-    | '/_unauthenticated/login'
+    | '/_unauthenticated/signin'
     | '/_authenticated/'
     | '/_authenticated/quests/$questId'
     | '/_authenticated/settings/data'
@@ -513,7 +513,7 @@ export const routeTree = rootRoute
     "/_unauthenticated": {
       "filePath": "_unauthenticated.tsx",
       "children": [
-        "/_unauthenticated/login"
+        "/_unauthenticated/signin"
       ]
     },
     "/_authenticated/admin": {
@@ -545,8 +545,8 @@ export const routeTree = rootRoute
         "/_authenticated/settings/"
       ]
     },
-    "/_unauthenticated/login": {
-      "filePath": "_unauthenticated/login.tsx",
+    "/_unauthenticated/signin": {
+      "filePath": "_unauthenticated/signin.tsx",
       "parent": "/_unauthenticated"
     },
     "/_authenticated/": {

src/routes/_authenticated.tsx

@@ -4,7 +4,7 @@ import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
 export const Route = createFileRoute("/_authenticated")({
   beforeLoad: async ({ context }) => {
     const auth = await context.auth;
-    if (!auth.isAuthenticated) throw redirect({ to: "/login" });
+    if (!auth.isAuthenticated) throw redirect({ to: "/signin" });
   },
   component: AuthenticatedRoute,
 });

src/routes/_authenticated/settings/overview.tsx

@@ -111,7 +111,7 @@ function SettingsOverviewRoute() {
           />
           <Switch
             name="isMinor"
-            isSelected={user.isMinor}
+            isSelected={user.isMinor ?? false}
             onChange={() => updateIsMinor({ isMinor: !user.isMinor })}
           >
             Is minor