mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-08 09:00:38 +00:00
UI refinements (#2859)
## Description: UI Refinements requested by @evanpelle check https://ui.openfront.dev ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: w.o.n
This commit is contained in:
Ryan
+4
-128
@@ -72,7 +72,7 @@ export class AccountModal extends BaseModal {
|
||||
const content = this.isLoadingUser
|
||||
? html`
|
||||
<div
|
||||
class="flex flex-col items-center justify-center p-12 text-white bg-black/40 backdrop-blur-md rounded-2xl border border-white/10 h-full min-h-[400px]"
|
||||
class="flex flex-col items-center justify-center p-12 text-white bg-black/60 backdrop-blur-md rounded-2xl border border-white/10 h-full min-h-[400px]"
|
||||
>
|
||||
<div
|
||||
class="w-12 h-12 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin mb-4"
|
||||
@@ -107,7 +107,7 @@ export class AccountModal extends BaseModal {
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="h-full flex flex-col bg-black/40 backdrop-blur-md rounded-2xl border border-white/10 overflow-hidden"
|
||||
class="h-full flex flex-col bg-black/60 backdrop-blur-md rounded-2xl border border-white/10 overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="flex items-center mb-6 pb-2 border-b border-white/10 gap-2 shrink-0 p-6"
|
||||
@@ -173,11 +173,7 @@ export class AccountModal extends BaseModal {
|
||||
const isLinked = me?.discord ?? me?.email;
|
||||
|
||||
if (!isLinked) {
|
||||
return html`
|
||||
<div class="p-6 flex justify-center items-start min-h-full">
|
||||
<div class="w-full max-w-2xl">${this.renderLinkAccountSection()}</div>
|
||||
</div>
|
||||
`;
|
||||
return this.renderLoginOptions();
|
||||
}
|
||||
|
||||
return html`
|
||||
@@ -235,60 +231,6 @@ export class AccountModal extends BaseModal {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderLinkAccountSection(): TemplateResult {
|
||||
return html`
|
||||
<div class="bg-blue-500/10 rounded-xl border border-blue-500/20 p-6">
|
||||
<div class="flex items-start gap-4 mb-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-white uppercase tracking-wider">
|
||||
${translateText("account_modal.save_progress_title")}
|
||||
</h3>
|
||||
<p class="text-sm text-white/60 mt-1">
|
||||
${translateText("account_modal.save_progress_desc")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<button
|
||||
@click="${this.handleDiscordLogin}"
|
||||
class="w-full px-4 py-3 text-white bg-[#5865F2] hover:bg-[#4752C4] border border-transparent rounded-xl focus:outline-none transition-all duration-200 flex items-center justify-center gap-2 group relative overflow-hidden shadow-lg hover:shadow-xl"
|
||||
>
|
||||
<img
|
||||
src="/images/DiscordLogo.svg"
|
||||
alt="Discord"
|
||||
class="w-5 h-5 relative z-10"
|
||||
/>
|
||||
<span class="font-bold text-sm relative z-10 tracking-wide"
|
||||
>${translateText("main.login_discord") ||
|
||||
translateText("account_modal.link_discord")}</span
|
||||
>
|
||||
</button>
|
||||
|
||||
<div class="relative group w-full">
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
type="email"
|
||||
.value="${this.email}"
|
||||
@input="${this.handleEmailInput}"
|
||||
class="flex-1 min-w-0 px-4 py-2 bg-black/40 border border-white/10 rounded-lg text-white text-sm placeholder-white/30 focus:outline-none focus:border-blue-500 transition-all font-medium"
|
||||
placeholder="${translateText(
|
||||
"account_modal.link_via_email_placeholder",
|
||||
)}"
|
||||
/>
|
||||
<button
|
||||
@click="${this.handleSubmit}"
|
||||
class="px-5 py-2 text-sm font-bold text-white uppercase bg-blue-600 hover:bg-blue-500 rounded-lg transition-all border border-blue-500/50 hover:shadow-[0_0_15px_rgba(37,99,235,0.3)] shrink-0"
|
||||
>
|
||||
${translateText("account_modal.link_button")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderLoggedInAs(): TemplateResult {
|
||||
const me = this.userMeResponse?.user;
|
||||
if (me?.discord) {
|
||||
@@ -309,46 +251,7 @@ export class AccountModal extends BaseModal {
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// "Mini" Login Options for linking account
|
||||
return html`
|
||||
<div class="w-full space-y-3">
|
||||
<button
|
||||
@click="${this.handleDiscordLogin}"
|
||||
class="w-full px-4 py-3 text-white bg-[#5865F2] hover:bg-[#4752C4] border border-transparent rounded-xl focus:outline-none transition-colors duration-200 flex items-center justify-center gap-2 group relative overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src="/images/DiscordLogo.svg"
|
||||
alt="Discord"
|
||||
class="w-5 h-5 relative z-10"
|
||||
/>
|
||||
<span class="font-bold text-sm relative z-10 tracking-wide"
|
||||
>${translateText("main.login_discord") ||
|
||||
translateText("account_modal.link_discord")}</span
|
||||
>
|
||||
</button>
|
||||
|
||||
<div class="relative group">
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
type="email"
|
||||
.value="${this.email}"
|
||||
@input="${this.handleEmailInput}"
|
||||
class="w-full px-4 py-2 bg-black/40 border border-white/10 rounded-lg text-white text-sm placeholder-white/30 focus:outline-none focus:border-blue-500 transition-all font-medium"
|
||||
placeholder="${translateText(
|
||||
"account_modal.link_via_email_placeholder",
|
||||
)}"
|
||||
/>
|
||||
<button
|
||||
@click="${this.handleSubmit}"
|
||||
class="px-4 py-2 text-sm font-bold text-white uppercase bg-blue-600 hover:bg-blue-500 rounded-lg transition-all"
|
||||
>
|
||||
${translateText("account_modal.link_button")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
return html``;
|
||||
}
|
||||
|
||||
private viewGame(gameId: string): void {
|
||||
@@ -398,11 +301,6 @@ export class AccountModal extends BaseModal {
|
||||
<line x1="15" y1="12" x2="3" y2="12"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-bold text-white uppercase tracking-widest mb-2"
|
||||
>
|
||||
${translateText("account_modal.welcome_back")}
|
||||
</h3>
|
||||
<p class="text-white/50 text-sm font-medium">
|
||||
${translateText("account_modal.sign_in_desc")}
|
||||
</p>
|
||||
@@ -414,9 +312,6 @@ export class AccountModal extends BaseModal {
|
||||
@click="${this.handleDiscordLogin}"
|
||||
class="w-full px-6 py-4 text-white bg-[#5865F2] hover:bg-[#4752C4] border border-transparent rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#5865F2] transition-colors duration-200 flex items-center justify-center gap-3 group relative overflow-hidden shadow-lg hover:shadow-[#5865F2]/20"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-white/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300"
|
||||
></div>
|
||||
<img
|
||||
src="/images/DiscordLogo.svg"
|
||||
alt="Discord"
|
||||
@@ -454,25 +349,6 @@ export class AccountModal extends BaseModal {
|
||||
)}"
|
||||
required
|
||||
/>
|
||||
<div
|
||||
class="absolute right-4 top-1/2 -translate-y-1/2 text-white/20"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-5 h-5"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
|
||||
></path>
|
||||
<polyline points="22,6 12,13 2,6"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
@click="${this.handleSubmit}"
|
||||
|
||||
Reference in New Issue
Block a user