GRIN/eranos
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

Redesign the auth welcome step around the Agora brand

Browse Source 
Drop the 'Welcome to Agora' header and the Nostr-flavored subtext from
the welcome step. The Agora bolt mark and wordmark are now the focal
point — laid out inline with the same tight spacing and Bebas display
recipe as the top-nav wordmark, just larger — and the wordmark doubles
as the dialog's accessible title.

Retitle the two buttons to 'Create new account' / 'Log in with
existing' (no Nostr phrasing) and route them through new auth.* keys,
translated across all sixteen locales.
This commit is contained in:
lemon
2026-06-14 17:22:38 -07:00
parent 786938f9fc
commit d1e579dda3
17 changed files with 89 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/auth/AuthDialog.tsx
+41 -27
View File
@@ -27,6 +27,7 @@ import {
} from '@/hooks/useLoginActions';
import { useIsMobile } from '@/hooks/useIsMobile';
import { useOnboarding } from '@/contexts/onboardingContextDef';
import { useTranslation } from 'react-i18next';
interface AuthDialogProps {
isOpen: boolean;
@@ -92,6 +93,7 @@ const AuthDialog: React.FC<AuthDialogProps> = ({ isOpen, onClose }) => {
const login = useLoginActions();
const { config } = useAppContext();
const { startSignup } = useOnboarding();
const { t } = useTranslation();
// Stable refs so the nostrconnect listening effect below doesn't restart on
// every parent render. Parents typically pass inline arrow functions for
// onClose, and useLoginActions returns a fresh object each render — without
@@ -306,12 +308,12 @@ const AuthDialog: React.FC<AuthDialogProps> = ({ isOpen, onClose }) => {
const getTitle = () => {
switch (step) {
case 'welcome':
return `Welcome to ${config.appName}`;
case 'login':
return 'Log in';
case 'connect':
return 'Connect signer';
default:
return '';
}
};
@@ -330,6 +332,41 @@ const AuthDialog: React.FC<AuthDialogProps> = ({ isOpen, onClose }) => {
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-[95vw] sm:max-w-sm max-h-[90dvh] p-0 gap-0 overflow-hidden rounded-2xl overflow-y-auto">
{step === 'welcome' ? (
/* Welcome step — the unified entry point. The Agora logo and
wordmark are the focal point (and double as the dialog's
accessible title), so there's no separate header row or
subtext — just the brand and the two paths in. */
<div className="px-6 pb-8 pt-10 space-y-8 text-center">
<div className="flex items-center justify-center">
<AgoraBoltIcon className="size-20 drop-shadow-md" />
<DialogTitle
className="latin-display font-display font-normal tracking-wide leading-none uppercase text-6xl text-primary inline-block -ml-0.5"
style={{
WebkitTextStroke: '0.022em currentColor',
transform: 'skewX(-6deg) scaleX(1.1)',
transformOrigin: '0 100%',
}}
>
{config.appName}
</DialogTitle>
</div>
<div className="space-y-2">
<Button onClick={goToSignup} className="w-full h-12">
{t('auth.createNewAccount')}
</Button>
<Button
variant="outline"
onClick={() => setStep('login')}
className="w-full h-12"
>
{t('auth.loginExisting')}
</Button>
</div>
</div>
) : (
<>
<DialogHeader className="px-6 pt-6">
<DialogTitle className="text-lg font-semibold leading-none tracking-tight text-center">
{getTitle()}
@@ -337,31 +374,6 @@ const AuthDialog: React.FC<AuthDialogProps> = ({ isOpen, onClose }) => {
</DialogHeader>
<div className="px-6 pb-6 pt-4 space-y-5">
{/* Welcome step — the unified entry point. */}
{step === 'welcome' && (
<div className="space-y-5 text-center">
<div className="flex justify-center pt-2">
<AgoraBoltIcon className="size-20 drop-shadow-md" />
</div>
<p className="text-sm text-muted-foreground">
Join with a new Nostr account, or log in with one you already have.
</p>
<div className="space-y-2">
<Button onClick={goToSignup} className="w-full h-12">
Create a new Nostr account
</Button>
<Button
variant="outline"
onClick={() => setStep('login')}
className="w-full h-12"
>
Log in to an existing account
</Button>
</div>
</div>
)}
{/* Login step. */}
{step === 'login' && (
@@ -533,6 +545,8 @@ const AuthDialog: React.FC<AuthDialogProps> = ({ isOpen, onClose }) => {
</div>
)}
</div>
</>
)}
</DialogContent>
</Dialog>
);
src/locales/ar.json
+3 -1
View File
@@ -91,7 +91,9 @@
"login": "تسجيل الدخول",
"signup": "إنشاء حساب",
"logout": "تسجيل الخروج",
"addAccount": "إضافة حساب آخر"
"addAccount": "إضافة حساب آخر",
"createNewAccount": "إنشاء حساب جديد",
"loginExisting": "تسجيل الدخول بحساب موجود"
},
"onboarding": {
"ariaLabel": "إعداد الحساب",
src/locales/en.json
+3 -1
View File
@@ -96,7 +96,9 @@
"login": "Log in",
"signup": "Sign up",
"logout": "Log out",
"addAccount": "Add another account"
"addAccount": "Add another account",
"createNewAccount": "Create new account",
"loginExisting": "Log in with existing"
},
"onboarding": {
"ariaLabel": "Account setup",
src/locales/es.json
+3 -1
View File
@@ -95,7 +95,9 @@
"login": "Iniciar sesión",
"signup": "Registrarse",
"logout": "Cerrar sesión",
"addAccount": "Agregar otra cuenta"
"addAccount": "Agregar otra cuenta",
"createNewAccount": "Crear cuenta nueva",
"loginExisting": "Iniciar sesión con una existente"
},
"onboarding": {
"ariaLabel": "Configuración de la cuenta",
src/locales/fa.json
+3 -1
View File
@@ -95,7 +95,9 @@
"login": "ورود",
"signup": "ثبت‌نام",
"logout": "خروج",
"addAccount": "افزودن حساب دیگر"
"addAccount": "افزودن حساب دیگر",
"createNewAccount": "ایجاد حساب جدید",
"loginExisting": "ورود با حساب موجود"
},
"onboarding": {
"ariaLabel": "راه‌اندازی حساب",
src/locales/fr.json
+3 -1
View File
@@ -94,7 +94,9 @@
"login": "Se connecter",
"signup": "S'inscrire",
"logout": "Se déconnecter",
"addAccount": "Ajouter un autre compte"
"addAccount": "Ajouter un autre compte",
"createNewAccount": "Créer un compte",
"loginExisting": "Se connecter avec un compte existant"
},
"onboarding": {
"ariaLabel": "Configuration du compte",
src/locales/hi.json
+3 -1
View File
@@ -95,7 +95,9 @@
"login": "लॉग इन करें",
"signup": "साइन अप करें",
"logout": "लॉग आउट करें",
"addAccount": "एक और अकाउंट जोड़ें"
"addAccount": "एक और अकाउंट जोड़ें",
"createNewAccount": "नया खाता बनाएँ",
"loginExisting": "मौजूदा खाते से लॉग इन करें"
},
"onboarding": {
"ariaLabel": "अकाउंट सेटअप",
src/locales/id.json
+3 -1
View File
@@ -95,7 +95,9 @@
"login": "Masuk",
"signup": "Daftar",
"logout": "Keluar",
"addAccount": "Tambah akun lain"
"addAccount": "Tambah akun lain",
"createNewAccount": "Buat akun baru",
"loginExisting": "Masuk dengan akun yang ada"
},
"onboarding": {
"ariaLabel": "Penyiapan akun",
src/locales/km.json
+3 -1
View File
@@ -95,7 +95,9 @@
"login": "ចូលគណនី",
"signup": "ចុះឈ្មោះ",
"logout": "ចេញពីគណនី",
"addAccount": "បន្ថែមគណនីផ្សេងទៀត"
"addAccount": "បន្ថែមគណនីផ្សេងទៀត",
"createNewAccount": "បង្កើតគណនីថ្មី",
"loginExisting": "ចូលដោយគណនីដែលមានស្រាប់"
},
"onboarding": {
"ariaLabel": "ការរៀបចំគណនី",
src/locales/ps.json
+3 -1
View File
@@ -95,7 +95,9 @@
"login": "ننوتل",
"signup": "نوم لیکنه",
"logout": "وتل",
"addAccount": "بل حساب اضافه کول"
"addAccount": "بل حساب اضافه کول",
"createNewAccount": "نوی حساب جوړ کړئ",
"loginExisting": "د موجوده حساب سره ننوتل"
},
"onboarding": {
"ariaLabel": "د حساب جوړونه",
src/locales/pt.json
+3 -1
View File
@@ -95,7 +95,9 @@
"login": "Entrar",
"signup": "Cadastrar",
"logout": "Sair",
"addAccount": "Adicionar outra conta"
"addAccount": "Adicionar outra conta",
"createNewAccount": "Criar nova conta",
"loginExisting": "Entrar com uma conta existente"
},
"onboarding": {
"ariaLabel": "Configuração da conta",
src/locales/ru.json
+3 -1
View File
@@ -95,7 +95,9 @@
"login": "Войти",
"signup": "Зарегистрироваться",
"logout": "Выйти",
"addAccount": "Добавить ещё один аккаунт"
"addAccount": "Добавить ещё один аккаунт",
"createNewAccount": "Создать новый аккаунт",
"loginExisting": "Войти в существующий"
},
"onboarding": {
"ariaLabel": "Настройка аккаунта",
src/locales/sn.json
+3 -1
View File
@@ -95,7 +95,9 @@
"login": "Pinda",
"signup": "Nyoresa",
"logout": "Buda",
"addAccount": "Wedzera imwe akaunti"
"addAccount": "Wedzera imwe akaunti",
"createNewAccount": "Gadzira account itsva",
"loginExisting": "Pinda neyiripo"
},
"onboarding": {
"ariaLabel": "Kugadzira akaunti",
src/locales/sw.json
+3 -1
View File
@@ -94,7 +94,9 @@
"login": "Ingia",
"signup": "Jisajili",
"logout": "Toka",
"addAccount": "Ongeza akaunti nyingine"
"addAccount": "Ongeza akaunti nyingine",
"createNewAccount": "Fungua akaunti mpya",
"loginExisting": "Ingia kwa iliyopo"
},
"onboarding": {
"ariaLabel": "Usanidi wa akaunti",
src/locales/tr.json
+3 -1
View File
@@ -94,7 +94,9 @@
"login": "Giriş yap",
"signup": "Kaydol",
"logout": "Çıkış yap",
"addAccount": "Başka hesap ekle"
"addAccount": "Başka hesap ekle",
"createNewAccount": "Yeni hesap oluştur",
"loginExisting": "Mevcut hesapla giriş yap"
},
"onboarding": {
"ariaLabel": "Hesap kurulumu",
src/locales/zh-Hant.json
+3 -1
View File
@@ -95,7 +95,9 @@
"login": "登入",
"signup": "註冊",
"logout": "退出登入",
"addAccount": "新增其他賬戶"
"addAccount": "新增其他賬戶",
"createNewAccount": "建立新帳戶",
"loginExisting": "使用現有帳戶登入"
},
"onboarding": {
"ariaLabel": "帳號設定",
src/locales/zh.json
+3 -1
View File
@@ -95,7 +95,9 @@
"login": "登录",
"signup": "注册",
"logout": "退出登录",
"addAccount": "添加其他账户"
"addAccount": "添加其他账户",
"createNewAccount": "创建新账户",
"loginExisting": "使用现有账户登录"
},
"onboarding": {
"ariaLabel": "账户设置",