@atproto/oauth-provider-ui 0.0.2 → 0.1.0

package/src/locales/km/messages.po

@@ -13,11 +13,11 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/views/authorize/accept/accept-form.tsx:76
+#: src/views/authorize/accept/accept-form.tsx:77
 msgid "<0/> is asking for permission to access your account (<1/>)."
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:219
+#: src/views/authorize/sign-in/sign-in-form.tsx:217
 msgid "2FA Confirmation"
 msgstr ""
 
@@ -25,23 +25,19 @@ msgstr ""
 msgid "A second authentication factor is required"
 msgstr ""
 
-#: src/views/authorize/accept/accept-form.tsx:144
+#: src/views/authorize/accept/accept-form.tsx:149
 msgid "Access your account data (except chat messages)"
 msgstr ""
 
-#: src/views/authorize/accept/accept-form.tsx:146
+#: src/views/authorize/accept/accept-form.tsx:151
 msgid "Access your chat messages"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:138
-msgid "Account"
-msgstr ""
-
 #: src/views/authorize/reset-password/reset-password-view.tsx:71
 msgid "Already have a code?"
 msgstr ""
 
-#: src/components/utils/client-name.tsx:35
+#: src/components/utils/client-name.tsx:43
 msgid "An application on your device"
 msgstr ""
 
@@ -58,7 +54,7 @@ msgid "Authenticate"
 msgstr ""
 
 #: src/views/authorize/accept/accept-view.tsx:55
-#: src/views/authorize/accept/accept-form.tsx:56
+#: src/views/authorize/accept/accept-form.tsx:57
 msgid "Authorize"
 msgstr ""
 
@@ -74,19 +70,23 @@ msgstr ""
 msgid "Between {minLength} and {maxLength} characters"
 msgstr ""
 
-#: src/views/authorize/accept/accept-form.tsx:89
+#: src/views/authorize/accept/accept-form.tsx:90
 msgid "By clicking <0>Authorize</0>, you allow this application to perform the following actions in accordance with their <1>terms of service</1> and <2>privacy policy</2>:"
 msgstr ""
 
+#. placeholder {0}: tosLink ? ( <LinkAnchor className="text-primary underline" link={tosLink}> <Trans>Terms of Service</Trans> </LinkAnchor> ) : ( <Trans>Terms of Service</Trans> )
+#. placeholder {1}: ppLink ? ( <LinkAnchor className="text-primary underline" link={ppLink}> <Trans>Privacy Policy</Trans> </LinkAnchor> ) : ( <Trans>Privacy Policy</Trans> )
 #: src/views/authorize/sign-up/sign-up-disclaimer.tsx:30
 msgid "By creating an account you agree to the {0} and the {1} of this service."
 msgstr ""
 
 #: src/views/authorize/welcome/welcome-view.tsx:51
+#: src/components/forms/form-card-async.tsx:85
 msgid "Cancel"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:232
+#. placeholder {0}: secondFactor.hint
+#: src/views/authorize/sign-in/sign-in-form.tsx:230
 msgid "Check your {0} email for a login code and enter it here."
 msgstr ""
 
@@ -106,7 +106,7 @@ msgstr ""
 msgid "Confirm your password to continue"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:223
+#: src/views/authorize/sign-in/sign-in-form.tsx:221
 msgid "Confirmation code"
 msgstr ""
 
@@ -118,7 +118,7 @@ msgstr ""
 msgid "Create Account"
 msgstr ""
 
-#: src/views/authorize/accept/accept-form.tsx:60
+#: src/views/authorize/accept/accept-form.tsx:61
 msgid "Deny access"
 msgstr ""
 
@@ -181,10 +181,11 @@ msgstr ""
 msgid "Forgot Password"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:178
+#: src/views/authorize/sign-in/sign-in-form.tsx:181
 msgid "Forgot?"
 msgstr ""
 
+#. placeholder {0}: account.preferred_username || account.email || account.sub
 #: src/views/authorize/accept/accept-view.tsx:40
 msgid "Grant access to your <0>{0}</0> account"
 msgstr ""
@@ -202,6 +203,7 @@ msgid "Home"
 msgstr ""
 
 #: src/views/authorize/sign-in/sign-in-picker.tsx:86
+#: src/views/authorize/sign-in/sign-in-form.tsx:138
 msgid "Identifier"
 msgstr ""
 
@@ -222,7 +224,7 @@ msgstr ""
 msgid "Let's get your password reset!"
 msgstr ""
 
-#: src/views/authorize/authorize-view.tsx:172
+#: src/views/authorize/authorize-view.tsx:178
 msgid "Login complete"
 msgstr ""
 
@@ -230,6 +232,10 @@ msgstr ""
 msgid "Login to account that is not listed"
 msgstr ""
 
+#: src/components/layouts/layout-welcome.tsx:45
+msgid "Logo"
+msgstr ""
+
 #: src/components/forms/input-token.tsx:59
 msgid "Looks like {example}"
 msgstr ""
@@ -269,6 +275,7 @@ msgid "Only letters, numbers, and hyphens"
 msgstr ""
 
 #: src/views/authorize/sign-up/sign-up-account-form.tsx:128
+#: src/views/authorize/sign-in/sign-in-form.tsx:162
 #: src/components/forms/input-password.tsx:53
 msgid "Password"
 msgstr ""
@@ -293,7 +300,7 @@ msgstr ""
 msgid "Password with at least {MIN_PASSWORD_LENGTH} characters"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:192
+#: src/views/authorize/sign-in/sign-in-form.tsx:196
 msgid "Please verify the domain name of the website before entering your password. Never enter your password on a domain you do not trust."
 msgstr ""
 
@@ -303,12 +310,12 @@ msgstr ""
 msgid "Privacy Policy"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:206
-#: src/views/authorize/sign-in/sign-in-form.tsx:211
+#: src/views/authorize/sign-in/sign-in-form.tsx:205
+#: src/views/authorize/sign-in/sign-in-form.tsx:210
 msgid "Remember this account on this device"
 msgstr ""
 
-#: src/views/authorize/accept/accept-form.tsx:123
+#: src/views/authorize/accept/accept-form.tsx:124
 msgid "Requested permissions"
 msgstr ""
 
@@ -320,7 +327,7 @@ msgstr ""
 msgid "Reset Password"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:176
+#: src/views/authorize/sign-in/sign-in-form.tsx:179
 msgid "Reset your password"
 msgstr ""
 
@@ -332,14 +339,13 @@ msgstr ""
 msgid "Select from an existing account"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:202
-msgid "Session"
-msgstr ""
-
 #: src/views/authorize/welcome/welcome-view.tsx:45
+#: src/views/authorize/sign-in/sign-in-view.tsx:48
+#: src/views/authorize/sign-in/sign-in-form.tsx:135
 msgid "Sign in"
 msgstr ""
 
+#. placeholder {0}: account.name
 #: src/views/authorize/sign-in/sign-in-picker.tsx:75
 msgid "Sign in as {0}"
 msgstr ""
@@ -426,7 +432,7 @@ msgstr ""
 msgid "Unexpected server response"
 msgstr ""
 
-#: src/views/authorize/accept/accept-form.tsx:142
+#: src/views/authorize/accept/accept-form.tsx:147
 msgid "Uniquely identify you"
 msgstr ""
 
@@ -442,7 +448,7 @@ msgstr ""
 msgid "Verify you are human"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:189
+#: src/views/authorize/sign-in/sign-in-form.tsx:193
 msgid "Warning"
 msgstr ""
 
@@ -458,7 +464,7 @@ msgstr ""
 msgid "Wrong identifier or password"
 msgstr ""
 
-#: src/views/authorize/authorize-view.tsx:173
+#: src/views/authorize/authorize-view.tsx:179
 msgid "You are being redirected..."
 msgstr ""
 
@@ -478,6 +484,7 @@ msgstr ""
 msgid "Your account"
 msgstr ""
 
+#. placeholder {0}: segment.length ? ( <strong className="text-gray-800 dark:text-gray-200"> {preview} </strong> ) : ( <span aria-hidden className="w-24 rounded-md bg-gray-300 p-2 dark:bg-slate-600" /> )
 #: src/views/authorize/sign-up/sign-up-handle-form.tsx:217
 msgid "Your full username will be: {0}"
 msgstr ""

package/src/locales/ko/messages.po

@@ -13,11 +13,11 @@ msgstr ""
 "Language-Team: \n"
 "Plural-Forms: \n"
 
-#: src/views/authorize/accept/accept-form.tsx:76
+#: src/views/authorize/accept/accept-form.tsx:77
 msgid "<0/> is asking for permission to access your account (<1/>)."
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:219
+#: src/views/authorize/sign-in/sign-in-form.tsx:217
 msgid "2FA Confirmation"
 msgstr ""
 
@@ -25,23 +25,19 @@ msgstr ""
 msgid "A second authentication factor is required"
 msgstr ""
 
-#: src/views/authorize/accept/accept-form.tsx:144
+#: src/views/authorize/accept/accept-form.tsx:149
 msgid "Access your account data (except chat messages)"
 msgstr ""
 
-#: src/views/authorize/accept/accept-form.tsx:146
+#: src/views/authorize/accept/accept-form.tsx:151
 msgid "Access your chat messages"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:138
-msgid "Account"
-msgstr ""
-
 #: src/views/authorize/reset-password/reset-password-view.tsx:71
 msgid "Already have a code?"
 msgstr ""
 
-#: src/components/utils/client-name.tsx:35
+#: src/components/utils/client-name.tsx:43
 msgid "An application on your device"
 msgstr ""
 
@@ -58,7 +54,7 @@ msgid "Authenticate"
 msgstr ""
 
 #: src/views/authorize/accept/accept-view.tsx:55
-#: src/views/authorize/accept/accept-form.tsx:56
+#: src/views/authorize/accept/accept-form.tsx:57
 msgid "Authorize"
 msgstr ""
 
@@ -74,19 +70,23 @@ msgstr ""
 msgid "Between {minLength} and {maxLength} characters"
 msgstr ""
 
-#: src/views/authorize/accept/accept-form.tsx:89
+#: src/views/authorize/accept/accept-form.tsx:90
 msgid "By clicking <0>Authorize</0>, you allow this application to perform the following actions in accordance with their <1>terms of service</1> and <2>privacy policy</2>:"
 msgstr ""
 
+#. placeholder {0}: tosLink ? ( <LinkAnchor className="text-primary underline" link={tosLink}> <Trans>Terms of Service</Trans> </LinkAnchor> ) : ( <Trans>Terms of Service</Trans> )
+#. placeholder {1}: ppLink ? ( <LinkAnchor className="text-primary underline" link={ppLink}> <Trans>Privacy Policy</Trans> </LinkAnchor> ) : ( <Trans>Privacy Policy</Trans> )
 #: src/views/authorize/sign-up/sign-up-disclaimer.tsx:30
 msgid "By creating an account you agree to the {0} and the {1} of this service."
 msgstr ""
 
 #: src/views/authorize/welcome/welcome-view.tsx:51
+#: src/components/forms/form-card-async.tsx:85
 msgid "Cancel"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:232
+#. placeholder {0}: secondFactor.hint
+#: src/views/authorize/sign-in/sign-in-form.tsx:230
 msgid "Check your {0} email for a login code and enter it here."
 msgstr ""
 
@@ -106,7 +106,7 @@ msgstr ""
 msgid "Confirm your password to continue"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:223
+#: src/views/authorize/sign-in/sign-in-form.tsx:221
 msgid "Confirmation code"
 msgstr ""
 
@@ -118,7 +118,7 @@ msgstr ""
 msgid "Create Account"
 msgstr ""
 
-#: src/views/authorize/accept/accept-form.tsx:60
+#: src/views/authorize/accept/accept-form.tsx:61
 msgid "Deny access"
 msgstr ""
 
@@ -181,10 +181,11 @@ msgstr ""
 msgid "Forgot Password"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:178
+#: src/views/authorize/sign-in/sign-in-form.tsx:181
 msgid "Forgot?"
 msgstr ""
 
+#. placeholder {0}: account.preferred_username || account.email || account.sub
 #: src/views/authorize/accept/accept-view.tsx:40
 msgid "Grant access to your <0>{0}</0> account"
 msgstr ""
@@ -202,6 +203,7 @@ msgid "Home"
 msgstr ""
 
 #: src/views/authorize/sign-in/sign-in-picker.tsx:86
+#: src/views/authorize/sign-in/sign-in-form.tsx:138
 msgid "Identifier"
 msgstr ""
 
@@ -222,7 +224,7 @@ msgstr ""
 msgid "Let's get your password reset!"
 msgstr ""
 
-#: src/views/authorize/authorize-view.tsx:172
+#: src/views/authorize/authorize-view.tsx:178
 msgid "Login complete"
 msgstr ""
 
@@ -230,6 +232,10 @@ msgstr ""
 msgid "Login to account that is not listed"
 msgstr ""
 
+#: src/components/layouts/layout-welcome.tsx:45
+msgid "Logo"
+msgstr ""
+
 #: src/components/forms/input-token.tsx:59
 msgid "Looks like {example}"
 msgstr ""
@@ -269,6 +275,7 @@ msgid "Only letters, numbers, and hyphens"
 msgstr ""
 
 #: src/views/authorize/sign-up/sign-up-account-form.tsx:128
+#: src/views/authorize/sign-in/sign-in-form.tsx:162
 #: src/components/forms/input-password.tsx:53
 msgid "Password"
 msgstr ""
@@ -293,7 +300,7 @@ msgstr ""
 msgid "Password with at least {MIN_PASSWORD_LENGTH} characters"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:192
+#: src/views/authorize/sign-in/sign-in-form.tsx:196
 msgid "Please verify the domain name of the website before entering your password. Never enter your password on a domain you do not trust."
 msgstr ""
 
@@ -303,12 +310,12 @@ msgstr ""
 msgid "Privacy Policy"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:206
-#: src/views/authorize/sign-in/sign-in-form.tsx:211
+#: src/views/authorize/sign-in/sign-in-form.tsx:205
+#: src/views/authorize/sign-in/sign-in-form.tsx:210
 msgid "Remember this account on this device"
 msgstr ""
 
-#: src/views/authorize/accept/accept-form.tsx:123
+#: src/views/authorize/accept/accept-form.tsx:124
 msgid "Requested permissions"
 msgstr ""
 
@@ -320,7 +327,7 @@ msgstr ""
 msgid "Reset Password"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:176
+#: src/views/authorize/sign-in/sign-in-form.tsx:179
 msgid "Reset your password"
 msgstr ""
 
@@ -332,14 +339,13 @@ msgstr ""
 msgid "Select from an existing account"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:202
-msgid "Session"
-msgstr ""
-
 #: src/views/authorize/welcome/welcome-view.tsx:45
+#: src/views/authorize/sign-in/sign-in-view.tsx:48
+#: src/views/authorize/sign-in/sign-in-form.tsx:135
 msgid "Sign in"
 msgstr ""
 
+#. placeholder {0}: account.name
 #: src/views/authorize/sign-in/sign-in-picker.tsx:75
 msgid "Sign in as {0}"
 msgstr ""
@@ -426,7 +432,7 @@ msgstr ""
 msgid "Unexpected server response"
 msgstr ""
 
-#: src/views/authorize/accept/accept-form.tsx:142
+#: src/views/authorize/accept/accept-form.tsx:147
 msgid "Uniquely identify you"
 msgstr ""
 
@@ -442,7 +448,7 @@ msgstr ""
 msgid "Verify you are human"
 msgstr ""
 
-#: src/views/authorize/sign-in/sign-in-form.tsx:189
+#: src/views/authorize/sign-in/sign-in-form.tsx:193
 msgid "Warning"
 msgstr ""
 
@@ -458,7 +464,7 @@ msgstr ""
 msgid "Wrong identifier or password"
 msgstr ""
 
-#: src/views/authorize/authorize-view.tsx:173
+#: src/views/authorize/authorize-view.tsx:179
 msgid "You are being redirected..."
 msgstr ""
 
@@ -478,6 +484,7 @@ msgstr ""
 msgid "Your account"
 msgstr ""
 
+#. placeholder {0}: segment.length ? ( <strong className="text-gray-800 dark:text-gray-200"> {preview} </strong> ) : ( <span aria-hidden className="w-24 rounded-md bg-gray-300 p-2 dark:bg-slate-600" /> )
 #: src/views/authorize/sign-up/sign-up-handle-form.tsx:217
 msgid "Your full username will be: {0}"
 msgstr ""

package/src/locales/locale-provider.tsx

@@ -1,48 +1,73 @@
 import { I18n } from '@lingui/core'
 import { I18nProvider } from '@lingui/react'
-import { ReactNode, useEffect, useMemo, useState } from 'react'
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 // @NOTE run "pnpm run po:compile" to compile the messages from the PO files
 import { messages as en } from './en/messages.ts'
 import { loadMessages } from './load.ts'
-import { LocaleContext, LocaleContextValue } from './locale-context.ts'
-import { KnownLocale, knownLocales, locales, resolveLocale } from './locales.ts'
+import { Locale, detectLocale, isLocale, locales } from './locales.ts'
 
-export type LocaleProviderProps = {
-  availableLocales?: readonly string[]
-  children?: ReactNode
+export type LocaleContextValue = {
+  locale: string
+  locales: Partial<Record<Locale, { name: string; flag?: string }>>
+  setLocale: (locale: Locale) => void
+}
+
+const LocaleContext = createContext<LocaleContextValue | null>(null)
+
+export function useLocaleContext(): LocaleContextValue {
+  const context = useContext(LocaleContext)
+  if (!context) {
+    throw new Error('useLocaleContext must be used within a LocaleProvider')
+  }
+  return context
 }
 
 export function LocaleProvider({
-  availableLocales,
+  userLocales = [],
   children,
-}: LocaleProviderProps) {
+}: {
+  userLocales?: readonly string[]
+  children?: ReactNode
+}) {
   // Bundle "en" messages with the app
-  const [i18n] = useState(() => new I18n({ locale: 'en', messages: { en } }))
+  const i18n = useMemo(() => new I18n({ locale: 'en', messages: { en } }), [])
 
-  const [desiredLocale, setDesiredLocale] = useState<KnownLocale>(() =>
-    detectLocale(
-      knownLocales.filter(
-        (l) => !availableLocales || availableLocales.includes(l),
-      ),
-    ),
-  )
   const [currentLocale, setCurrentLocale] = useState<string>(() => i18n.locale)
+  const [desiredLocale, setDesiredLocale] = useState<Locale>(() => {
+    return detectLocale(userLocales)
+  })
 
-  const [loaded, setLoaded] = useState(desiredLocale === currentLocale)
+  // A boolean that is used to avoid flickering of "en" content during initial
+  // load.
+  const [initialized, setInitialized] = useState(
+    desiredLocale === currentLocale,
+  )
 
-  // Keep currentLocale in sync with i18n
+  // Protect against illegal change of the locale directly through the i18n object
   useEffect(() => {
-    const onChange = () => {
-      setCurrentLocale(i18n.locale)
-      document.documentElement.setAttribute('lang', i18n.locale)
+    if (!isLocale(currentLocale)) {
+      setDesiredLocale('en')
     }
+  }, [locales, currentLocale])
+
+  // Keep currentLocale in sync with i18n's locale prop
+  useEffect(() => {
+    const onChange = () => setCurrentLocale(i18n.locale)
     i18n.on('change', onChange)
     return () => i18n.removeListener('change', onChange)
   }, [i18n])
 
+  // Trigger loading of `desiredLocale`
   useEffect(() => {
     if (currentLocale === desiredLocale) {
-      setLoaded(true)
+      setInitialized(true)
       return
     }
 
@@ -56,7 +81,7 @@ export function LocaleProvider({
         console.error(`Failed to load locale "${desiredLocale}":`, err)
       })
       .finally(() => {
-        if (!canceled) setLoaded(true)
+        if (!canceled) setInitialized(true)
       })
     return () => {
       canceled = true
@@ -66,47 +91,18 @@ export function LocaleProvider({
   const value = useMemo<LocaleContextValue>(
     () => ({
       locale: currentLocale,
-      locales: Object.fromEntries(
-        knownLocales
-          .filter((l) => !availableLocales || availableLocales.includes(l))
-          .map((l) => [l, locales[l]]),
-      ),
-      setLocale: setDesiredLocale,
+      locales,
+      setLocale: (locale) => {
+        if (isLocale(locale)) setDesiredLocale(locale)
+        else throw new TypeError(`"${locale}" is not an available locale`)
+      },
     }),
-    [currentLocale, availableLocales, locales, setDesiredLocale],
+    [locales, currentLocale],
   )
 
   return (
     <LocaleContext value={value}>
-      <I18nProvider i18n={i18n}>{loaded && children}</I18nProvider>
+      <I18nProvider i18n={i18n}>{initialized && children}</I18nProvider>
     </LocaleContext>
   )
 }
-
-function detectLocale<L extends string>(
-  availableLocales: readonly L[],
-  fallbackLocale: L | 'en' = 'en',
-): L {
-  // Use, in priority, the locale that was set by the backend
-  if (typeof document === 'object') {
-    const htmlLang = document.documentElement.getAttribute('lang')
-    const resolved = htmlLang && resolveLocale(htmlLang, availableLocales)
-    if (resolved) return resolved
-  }
-
-  // Should that fail (though it should probably never), negotiate with the browser
-  if (typeof navigator === 'object' && navigator.languages) {
-    for (const locale of navigator.languages) {
-      const resolved = resolveLocale(locale, availableLocales)
-      if (resolved) return resolved
-    }
-  }
-
-  const fallback = resolveLocale(fallbackLocale, availableLocales)
-  if (fallback) return fallback
-
-  // Type-safety
-  throw new TypeError(
-    `Available locales should always contain "${fallbackLocale}"`,
-  )
-}

package/src/locales/locale-selector.tsx

@@ -1,7 +1,7 @@
 import { useLingui } from '@lingui/react/macro'
+import { clsx } from 'clsx'
 import { JSX } from 'react'
-import { clsx } from '../lib/clsx.ts'
-import { useLocaleContext } from './locale-context.ts'
+import { useLocaleContext } from './locale-provider.tsx'
 
 export type LocaleSelectorProps = Omit<
   JSX.IntrinsicElements['select'],
@@ -20,22 +20,22 @@ export function LocaleSelector({
     <select
       {...props}
       className={clsx(
-        'accent-brand',
+        'accent-primary',
         // Background
-        'bg-gray-100 focus:bg-slate-200 has-[:focus]:bg-slate-200',
-        'dark:bg-slate-800 dark:focus:bg-slate-700 dark:has-[:focus]:bg-slate-700',
+        'bg-contrast-25',
+        'hover:bg-contrast-0 focus:bg-contrast-0 dark:hover:bg-contrast-0',
+        'focus:bg-contrast-0 dark:focus:bg-contrast-0',
         // Border
-        'outline-none',
-        'border-solid border-2 border-transparent',
-        'focus:border-brand has-[:focus]:border-brand',
-        'hover:border-gray-400 hover:focus:border-gray-400',
-        'dark:hover:border-gray-500 dark:hover:focus:border-gray-500',
+        'outline-hidden',
+        'border-contrast-100 border',
         // Border
-        'rounded-lg',
+        'rounded-full',
         // Font
         'text-slate-600 dark:text-slate-300',
         // Layout
-        'py-1 px-2',
+        'px-2 py-1',
+        // Misc
+        'cursor-pointer',
         className,
       )}
       value={locale}
@@ -49,8 +49,7 @@ export function LocaleSelector({
     >
       {Object.entries(locales).map(([key, { name, flag }]) => (
         <option key={key} value={key}>
-          {name}
-          {flag ? ` ${flag}` : ''}
+          {flag ? `${flag} ${name}` : name}
         </option>
       ))}
     </select>