fix(auth): improve the last used badge style

Author: yahyafakhroji

app/modules/i18n/locales/en.po

@@ -165,7 +165,7 @@ msgid "Connected accounts"
 msgstr "Connected accounts"
 
 #: app/routes/device/index.tsx:72
-#: app/routes/login/index.tsx:355
+#: app/routes/login/index.tsx:364
 #: app/routes/signup/index.tsx:287
 msgid "Continue"
 msgstr "Continue"
@@ -186,7 +186,7 @@ msgstr "Couldn't sign in"
 msgid "Create a new account"
 msgstr "Create a new account"
 
-#: app/routes/login/index.tsx:386
+#: app/routes/login/index.tsx:395
 #: app/routes/signup/password.tsx:188
 msgid "Create account"
 msgstr "Create account"
@@ -200,7 +200,7 @@ msgid "Device code"
 msgstr "Device code"
 
 #: app/routes/login/index.tsx:182
-#: app/routes/login/index.tsx:320
+#: app/routes/login/index.tsx:326
 #: app/routes/signup/index.tsx:250
 #: app/routes/signup/index.tsx:273
 msgid "Email"
@@ -210,7 +210,7 @@ msgstr "Email"
 msgid "Email code"
 msgstr "Email code"
 
-#: app/routes/login/index.tsx:364
+#: app/routes/login/index.tsx:373
 #: app/routes/login/method.tsx:117
 #: app/routes/signup/method.tsx:256
 msgid "Email me a sign-in link"
@@ -293,9 +293,9 @@ msgstr "Get started"
 msgid "Incorrect credentials. Please try again."
 msgstr "Incorrect credentials. Please try again."
 
-#: app/routes/login/index.tsx:269
-#: app/routes/login/index.tsx:292
-#: app/routes/login/index.tsx:323
+#: app/routes/login/index.tsx:272
+#: app/routes/login/index.tsx:298
+#: app/routes/login/index.tsx:332
 msgid "Last used"
 msgstr "Last used"
 
@@ -332,7 +332,7 @@ msgstr "No account was found and sign-up is not available."
 msgid "No signed-in accounts."
 msgstr "No signed-in accounts."
 
-#: app/routes/login/index.tsx:384
+#: app/routes/login/index.tsx:393
 msgid "Not registered?"
 msgstr "Not registered?"
 
@@ -344,7 +344,7 @@ msgstr "Not you?"
 msgid "Open your authenticator app and enter the 6-digit code."
 msgstr "Open your authenticator app and enter the 6-digit code."
 
-#: app/routes/login/index.tsx:302
+#: app/routes/login/index.tsx:308
 #: app/routes/signup/index.tsx:232
 msgid "or"
 msgstr "or"
@@ -353,7 +353,7 @@ msgstr "or"
 msgid "Or import this URI in your authenticator app"
 msgstr "Or import this URI in your authenticator app"
 
-#: app/routes/login/index.tsx:289
+#: app/routes/login/index.tsx:292
 #: app/routes/login/method.tsx:101
 #: app/routes/setup/mfa.tsx:40
 msgid "Passkey"
@@ -523,7 +523,7 @@ msgstr "Sign in with LDAP"
 msgid "Sign out"
 msgstr "Sign out"
 
-#: app/routes/login/index.tsx:374
+#: app/routes/login/index.tsx:383
 msgid "Sign-in is currently unavailable for this account. Please contact your administrator."
 msgstr "Sign-in is currently unavailable for this account. Please contact your administrator."
 
@@ -619,7 +619,7 @@ msgstr "Unlink"
 msgid "Use a passkey"
 msgstr "Use a passkey"
 
-#: app/routes/login/passkey.tsx:73
+#: app/routes/login/passkey.tsx:78
 msgid "Use your passkey to verify your identity."
 msgstr "Use your passkey to verify your identity."
 
@@ -652,7 +652,7 @@ msgid "Verify and enable"
 msgstr "Verify and enable"
 
 #: app/components/webauthn-button/webauthn-button.tsx:163
-#: app/routes/login/passkey.tsx:72
+#: app/routes/login/passkey.tsx:77
 msgid "Verify with passkey"
 msgstr "Verify with passkey"
 

app/routes/login/__tests__/last-used-login-loader.test.ts

@@ -4,8 +4,8 @@
 // last-used-login cookie into its returned data object.
 //
 // node env: happy-dom forbids setting the Cookie header (breaks CSRF round-trips).
-import { loader } from '@/routes/login/index';
 import { serializeLastUsedLogin } from '@/modules/auth/session/last-used-login';
+import { loader } from '@/routes/login/index';
 import { describe, it, expect } from 'vitest';
 
 const ORIGIN = 'http://localhost';

app/routes/login/index.tsx

@@ -246,7 +246,7 @@ export default function Login() {
               ) : null}
               <Button
                 size="large"
-                className="h-13 gap-3"
+                className="relative h-13 gap-3"
                 type="quaternary"
                 theme="outline"
                 block
@@ -265,7 +265,10 @@ export default function Login() {
                 }>
                 <Trans>{idp.name}</Trans>
                 {lastUsedLogin === `idp:${idp.id}` ? (
-                  <Badge type="secondary" theme="light" className="ml-auto text-xs">
+                  <Badge
+                    type="primary"
+                    theme="solid"
+                    className="absolute -top-3.5 -right-5 rounded-lg text-xs text-white">
                     <Trans>Last used</Trans>
                   </Badge>
                 ) : null}
@@ -278,7 +281,7 @@ export default function Login() {
       {view.showPasskeyPrompt ? (
         <LinkButton
           size="large"
-          className={cn('h-13 gap-3', view.showIdpButtons && 'mt-3')}
+          className={cn('relative h-13 gap-3', view.showIdpButtons && 'mt-3')}
           type="quaternary"
           theme="outline"
           block
@@ -288,7 +291,10 @@ export default function Login() {
           icon={<Icon icon={UserKey} />}>
           <Trans>Passkey</Trans>
           {lastUsedLogin === 'passkey' ? (
-            <Badge type="secondary" theme="light" className="ml-auto text-xs">
+            <Badge
+              type="primary"
+              theme="solid"
+              className="absolute -top-3.5 -right-5 rounded-lg text-xs text-white">
               <Trans>Last used</Trans>
             </Badge>
           ) : null}
@@ -310,7 +316,7 @@ export default function Login() {
           {!showEmailField ? (
             <Button
               size="large"
-              className="h-13 gap-3"
+              className="relative h-13 gap-3"
               type="quaternary"
               theme="outline"
               block
@@ -319,7 +325,10 @@ export default function Login() {
               onClick={() => setShowEmailField(true)}>
               <Trans>Email</Trans>
               {lastUsedLogin === 'email' ? (
-                <Badge type="secondary" theme="light" className="ml-auto text-xs">
+                <Badge
+                  type="primary"
+                  theme="solid"
+                  className="absolute -top-3.5 -right-5 rounded-lg text-xs text-white">
                   <Trans>Last used</Trans>
                 </Badge>
               ) : null}

app/routes/login/passkey.tsx

@@ -12,7 +12,12 @@ import {
 import { useAuthErrorMessage } from '@/utils/errors/auth-error-messages';
 import { Trans } from '@lingui/react/macro';
 import { useRef } from 'react';
-import { useActionData, useLoaderData, type MetaFunction, type ActionFunctionArgs } from 'react-router';
+import {
+  useActionData,
+  useLoaderData,
+  type MetaFunction,
+  type ActionFunctionArgs,
+} from 'react-router';
 import { Form as RRForm } from 'react-router';
 
 export const meta: MetaFunction = () => [{ title: 'Verify with passkey' }];