💄 Update create page

apps/web/public/locales/en/app.json

@@ -236,7 +236,6 @@
   "12months": "12 months",
   "savePercentage": "Save {percentage}%",
   "1month": "1 month",
-  "subscribe": "Subscribe",
   "cancelAnytime": "Cancel anytime from your <a>billing page</a>.",
   "unsubscribeToastTitle": "You have disabled notifications",
   "unsubscribeToastDescription": "You will no longer receive notifications for this poll",
@@ -303,5 +302,6 @@
   "addPaymentMethod": "Add Payment Method",
   "needToMakeChanges": "Need to make changes?",
   "billingPortalDescription": "Visit the billing portal to manage your subscription, update payment methods, or view billing history.",
-  "priceFree": "Free"
+  "priceFree": "Free",
+  "signUp": "Sign Up"
 }

apps/web/src/app/[locale]/(admin)/menu/menu-button.tsx

@@ -2,10 +2,12 @@
 
 import { Button } from "@rallly/ui/button";
 import { Icon } from "@rallly/ui/icon";
-import { MenuIcon, XIcon } from "lucide-react";
+import { ArrowLeftIcon, MenuIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
+import { Trans } from "@/components/trans";
+
 export function BackButton() {
   const router = useRouter();
   return (
@@ -15,7 +17,10 @@ export function BackButton() {
         router.back();
       }}
     >
-      <XIcon className="text-muted-foreground size-4" />
+      <ArrowLeftIcon className="text-muted-foreground size-4" />
+      <span className="hidden sm:block">
+        <Trans i18nKey="back" defaults="Back" />
+      </span>
     </Button>
   );
 }

apps/web/src/app/[locale]/new/page.tsx

@@ -1,3 +1,5 @@
+import { Button } from "@rallly/ui/button";
+import Link from "next/link";
 import { Trans } from "react-i18next/TransWithoutContext";
 
 import { GroupPollIcon } from "@/app/[locale]/(admin)/app-card";
@@ -6,14 +8,21 @@ import type { Params } from "@/app/[locale]/types";
 import { CreatePoll } from "@/components/create-poll";
 import { UserDropdown } from "@/components/user-dropdown";
 import { getTranslation } from "@/i18n/server";
+import { getLoggedIn } from "@/next-auth";
 
 export default async function Page({ params }: { params: Params }) {
   const { t } = await getTranslation(params.locale);
+  const isLoggedIn = await getLoggedIn();
+
   return (
     <div>
-      <div className="sticky top-0 z-20 flex items-center justify-between border-b bg-gray-100/90 p-3 backdrop-blur-md sm:grid-cols-3">
+      <div className="sticky top-0 z-20 border-b bg-gray-100/90 p-3 backdrop-blur-md sm:grid-cols-3">
-        <div className="flex items-center justify-center gap-x-4">
+        <div className="mx-auto flex max-w-4xl items-center justify-between gap-x-2 sm:px-6">
+          <div className="flex items-center gap-x-4 sm:flex-1">
             <BackButton />
+          </div>
+          <div className="flex flex-1 sm:justify-center">
+            <div className="flex items-center gap-x-2">
               <GroupPollIcon size="xs" />
               <div className="flex items-baseline gap-x-8">
                 <h1 className="text-sm font-semibold">
@@ -21,8 +30,29 @@ export default async function Page({ params }: { params: Params }) {
                 </h1>
               </div>
             </div>
-        <div className="flex justify-end">
+          </div>
+          <div className="flex flex-1 justify-end">
+            {isLoggedIn ? (
               <UserDropdown />
+            ) : (
+              <div className="flex items-center gap-x-2">
+                <Button variant="ghost" asChild>
+                  <Link
+                    href={`/login?redirectTo=${encodeURIComponent("/new")}`}
+                  >
+                    <Trans i18nKey="login" />
+                  </Link>
+                </Button>
+                <Button variant="primary" asChild>
+                  <Link
+                    href={`/register?redirectTo=${encodeURIComponent("/new")}`}
+                  >
+                    <Trans i18nKey="signUp" defaults="Sign up" />
+                  </Link>
+                </Button>
+              </div>
+            )}
+          </div>
         </div>
       </div>
       <div className="mx-auto max-w-4xl p-3 sm:px-6 sm:py-5">

apps/web/src/next-auth.ts

@@ -221,4 +221,9 @@ export const getUserId = async () => {
   return session?.user?.email ? session.user.id : null;
 };
 
+export const getLoggedIn = async () => {
+  const session = await auth();
+  return !!session?.user?.email;
+};
+
 export { auth, handlers, requireUser, signIn, signOut };

packages/ui/src/button.tsx

@@ -16,7 +16,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          "focus:ring-offset-1 border-primary bg-primary hover:bg-primary-500 disabled:bg-gray-400 disabled:border-transparent text-primary-foreground shadow-sm",
+          "focus:ring-offset-1 border-primary bg-primary hover:bg-primary-500 disabled:bg-gray-400 disabled:border-transparent text-white shadow-sm",
         destructive:
           "focus:ring-offset-1 bg-destructive shadow-sm text-destructive-foreground active:bg-destructive border-destructive hover:bg-destructive/90",
         default: