starred/webmail
1
0
Fork 0
mirror of https://github.com/bulwarkmail/webmail.git synced 2026-10-31 16:13:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: mirror the login page's theme button and password toggle, and the rail badges, in right-to-left languages

Browse Source
This commit is contained in:
Linus Rath
2026-10-28 03:36:01 +01:00
parent 57c283e730
commit b5dcb04c53
3 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(main)/[locale]/login/page.tsx
+5 -5
View File
@@ -1017,7 +1017,7 @@ function LoginPageContent() {
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-background via-muted/10 to-muted/30 relative px-4">
{/* Theme toggle, hidden while the theme policy locks the mode (#1280) */}
<div className="absolute top-5 right-5" ref={themeMenuRef} hidden={colorModeLocked} suppressHydrationWarning>
<div className="absolute top-5 end-5" ref={themeMenuRef} hidden={colorModeLocked} suppressHydrationWarning>
<button
type="button"
ref={themeButtonRef}
@@ -1040,7 +1040,7 @@ function LoginPageContent() {
<div
ref={themeListRef}
onKeyDown={onThemeMenuKeyDown}
className="absolute right-0 top-full mt-2 w-40 rounded-xl border border-border bg-background shadow-lg overflow-hidden animate-fade-in z-50"
className="absolute end-0 top-full mt-2 w-40 rounded-xl border border-border bg-background shadow-lg overflow-hidden animate-fade-in z-50"
role="menu"
aria-label={tTheme("label")}
>
@@ -1177,7 +1177,7 @@ function LoginPageContent() {
}}
/>
{/* Theme toggle - top right, dropdown style; hidden while the theme policy locks the mode (#1280) */}
<div className="absolute top-5 right-5" ref={themeMenuRef} hidden={colorModeLocked} suppressHydrationWarning>
<div className="absolute top-5 end-5" ref={themeMenuRef} hidden={colorModeLocked} suppressHydrationWarning>
<button
type="button"
ref={themeButtonRef}
@@ -1200,7 +1200,7 @@ function LoginPageContent() {
<div
ref={themeListRef}
onKeyDown={onThemeMenuKeyDown}
className="absolute right-0 top-full mt-2 w-40 rounded-xl border border-border bg-background shadow-lg overflow-hidden animate-fade-in z-50"
className="absolute end-0 top-full mt-2 w-40 rounded-xl border border-border bg-background shadow-lg overflow-hidden animate-fade-in z-50"
role="menu"
aria-label={tTheme("label")}
>
@@ -1470,7 +1470,7 @@ function LoginPageContent() {
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
className="absolute end-3 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
aria-label={showPassword ? t("hide_password") : t("show_password")}
tabIndex={-1}
>
components/layout/account-switcher.tsx
+1 -1
View File
@@ -411,7 +411,7 @@ export function AccountSwitcher({
<div className="relative flex-shrink-0">
<AccountAvatar account={account} size="md" />
{isActive && (
<div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center">
<div className="absolute -bottom-0.5 -end-0.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center">
<Check className="w-2.5 h-2.5 text-primary-foreground" />
</div>
)}
components/layout/navigation-rail.tsx
+5 -5
View File
@@ -387,7 +387,7 @@ export function NavigationRail({
)}>
<Icon className="w-5 h-5" />
{item.badge != null && item.badge > 0 && (
<span aria-hidden="true" className="absolute -top-1.5 -right-2.5 flex items-center justify-center min-w-[16px] h-4 text-[10px] font-bold rounded-full bg-red-500 text-white px-1">
<span aria-hidden="true" className="absolute -top-1.5 -end-2.5 flex items-center justify-center min-w-[16px] h-4 text-[10px] font-bold rounded-full bg-red-500 text-white px-1">
{item.badge > 99 ? "99+" : item.badge}
</span>
)}
@@ -488,7 +488,7 @@ export function NavigationRail({
{hasUpdate && (
<span
className={cn(
"absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full ring-2 ring-background",
"absolute -top-0.5 -end-0.5 w-2 h-2 rounded-full ring-2 ring-background",
updateImportant ? "bg-red-500" : "bg-amber-500",
)}
aria-label={updateImportant ? "Important update available" : "Update available"}
@@ -602,7 +602,7 @@ export function NavigationRail({
{item.badge != null && item.badge > 0 && (
<span aria-hidden="true" className={cn(
"absolute flex items-center justify-center min-w-[16px] h-4 text-[10px] font-bold rounded-full bg-red-500 text-white px-1",
collapsed ? "-top-0.5 -right-0.5" : "right-1.5"
collapsed ? "-top-0.5 -end-0.5" : "end-1.5"
)}>
{item.badge > 99 ? "99+" : item.badge}
</span>
@@ -725,7 +725,7 @@ export function NavigationRail({
{hasUpdate && (
<span
className={cn(
"absolute top-2 right-2 w-2 h-2 rounded-full ring-2 ring-background",
"absolute top-2 end-2 w-2 h-2 rounded-full ring-2 ring-background",
updateImportant ? "bg-red-500" : "bg-amber-500",
)}
aria-label={updateImportant ? "Important update available" : "Update available"}
@@ -817,7 +817,7 @@ export function NavigationRail({
fallbackColor={account.avatarColor}
/>
{isActive && (
<span className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-primary flex items-center justify-center">
<span className="absolute -bottom-0.5 -end-0.5 w-3 h-3 rounded-full bg-primary flex items-center justify-center">
<Check className="w-2 h-2 text-primary-foreground" />
</span>
)}