mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 11:20:45 +00:00
Enhance dark mode support (#1682)
## Description: Improved dark mode styling for #1681 Old: <img width="536" height="565" alt="image" src="https://github.com/user-attachments/assets/8b7b5cc5-aa74-4e9b-a814-635c4373d5ab" /> New Look: <img width="766" height="925" alt="image" src="https://github.com/user-attachments/assets/acd00f2b-7248-4b63-b5c4-a345195d4414" /> ## 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 - [x] I have read and accepted the CLA agreement (only required once). ## Please put your Discord username so you can be contacted if a bug or regression is found: DISCORD_USERNAME totalfailure
This commit is contained in:
Manan Lalwani
@@ -292,7 +292,7 @@ export class LangSelector extends LitElement {
|
||||
<button
|
||||
id="lang-selector"
|
||||
@click=${this.openModal}
|
||||
class="text-center appearance-none w-full bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md border-none cursor-pointer transition-colors duration-300 flex items-center gap-2 justify-center"
|
||||
class="text-center appearance-none w-full bg-blue-100 dark:bg-gray-700 hover:bg-blue-200 dark:hover:bg-gray-600 text-blue-900 dark:text-gray-100 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md border-none cursor-pointer transition-colors duration-300 flex items-center gap-2 justify-center"
|
||||
>
|
||||
<img
|
||||
id="lang-flag"
|
||||
|
||||
+40
-122
@@ -1,4 +1,4 @@
|
||||
import { LitElement, css, html } from "lit";
|
||||
import { LitElement, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { translateText } from "../client/Utils";
|
||||
|
||||
@@ -8,117 +8,9 @@ export class LanguageModal extends LitElement {
|
||||
@property({ type: Array }) languageList: any[] = [];
|
||||
@property({ type: String }) currentLang = "en";
|
||||
|
||||
static styles = css`
|
||||
.c-modal {
|
||||
position: fixed;
|
||||
padding: 1rem;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.c-modal__wrapper {
|
||||
background: #23232382;
|
||||
border-radius: 8px;
|
||||
min-width: 340px;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c-modal__header {
|
||||
position: relative;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
font-size: 18px;
|
||||
background: #000000a1;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 1rem 2.4rem 1rem 1.4rem;
|
||||
}
|
||||
|
||||
.c-modal__close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.c-modal__content {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
padding: 1.4rem;
|
||||
max-height: 60dvh;
|
||||
overflow-y: auto;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.lang-button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
transition: background-color 0.3s;
|
||||
border: 1px solid #aaa;
|
||||
background-color: #505050;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lang-button:hover {
|
||||
background-color: #969696;
|
||||
}
|
||||
|
||||
.lang-button.active {
|
||||
background-color: #aaaaaa;
|
||||
border-color: #bbb;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.flag-icon {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: #990033;
|
||||
}
|
||||
20% {
|
||||
background-color: #996600;
|
||||
}
|
||||
40% {
|
||||
background-color: #336600;
|
||||
}
|
||||
60% {
|
||||
background-color: #008080;
|
||||
}
|
||||
80% {
|
||||
background-color: #1c3f99;
|
||||
}
|
||||
100% {
|
||||
background-color: #5e0099;
|
||||
}
|
||||
}
|
||||
|
||||
.lang-button.debug {
|
||||
animation: rainbow 10s infinite;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
border: 2px dashed aqua;
|
||||
box-shadow: 0 0 4px aqua;
|
||||
}
|
||||
`;
|
||||
createRenderRoot() {
|
||||
return this; // Use Light DOM for TailwindCSS classes
|
||||
}
|
||||
|
||||
private close = () => {
|
||||
this.dispatchEvent(
|
||||
@@ -158,27 +50,53 @@ export class LanguageModal extends LitElement {
|
||||
if (!this.visible) return null;
|
||||
|
||||
return html`
|
||||
<aside class="c-modal">
|
||||
<div class="c-modal__wrapper">
|
||||
<header class="c-modal__header">
|
||||
<aside
|
||||
class="fixed p-4 z-[1000] inset-0 bg-black/50 overflow-y-auto flex items-center justify-center"
|
||||
>
|
||||
<div
|
||||
class="bg-gray-800/80 dark:bg-gray-900/90 backdrop-blur-md rounded-lg min-w-[340px] max-w-[480px] w-full"
|
||||
>
|
||||
<header
|
||||
class="relative rounded-t-md text-lg bg-black/60 dark:bg-black/80 text-center text-white px-6 py-4 pr-10"
|
||||
>
|
||||
${translateText("select_lang.title")}
|
||||
<div class="c-modal__close" @click=${this.close}>✕</div>
|
||||
<div
|
||||
class="cursor-pointer absolute right-4 top-4 font-bold hover:text-gray-300"
|
||||
@click=${this.close}
|
||||
>
|
||||
✕
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="c-modal__content">
|
||||
<section
|
||||
class="relative text-white dark:text-gray-100 p-6 max-h-[60dvh] overflow-y-auto"
|
||||
>
|
||||
${this.languageList.map((lang) => {
|
||||
const isActive = this.currentLang === lang.code;
|
||||
const isDebug = lang.code === "debug";
|
||||
|
||||
let buttonClasses =
|
||||
"w-full flex items-center gap-2 p-2 mb-2 rounded-md transition-colors duration-300 border";
|
||||
|
||||
if (isDebug) {
|
||||
buttonClasses +=
|
||||
" animate-pulse font-bold text-white border-2 border-dashed border-cyan-400 shadow-lg shadow-cyan-400/25 bg-gradient-to-r from-red-600 via-yellow-600 via-green-600 via-blue-600 to-purple-600";
|
||||
} else if (isActive) {
|
||||
buttonClasses +=
|
||||
" bg-gray-400 dark:bg-gray-500 border-gray-300 dark:border-gray-400 text-black dark:text-white";
|
||||
} else {
|
||||
buttonClasses +=
|
||||
" bg-gray-600 dark:bg-gray-700 border-gray-500 dark:border-gray-600 text-white dark:text-gray-100 hover:bg-gray-500 dark:hover:bg-gray-600";
|
||||
}
|
||||
|
||||
return html`
|
||||
<button
|
||||
class="lang-button ${isActive ? "active" : ""} ${lang.code ===
|
||||
"debug"
|
||||
? "debug"
|
||||
: ""}"
|
||||
class="${buttonClasses}"
|
||||
@click=${() => this.selectLanguage(lang.code)}
|
||||
>
|
||||
<img
|
||||
src="/flags/${lang.svg}.svg"
|
||||
class="flag-icon"
|
||||
class="w-6 h-4 object-contain"
|
||||
alt="${lang.code}"
|
||||
/>
|
||||
<span>${lang.native} (${lang.en})</span>
|
||||
|
||||
@@ -48,7 +48,7 @@ export class NewsButton extends LitElement {
|
||||
@click=${this.handleClick}
|
||||
>
|
||||
<img
|
||||
class="size-[48px]"
|
||||
class="size-[48px] dark:invert"
|
||||
src="${megaphone}"
|
||||
alt=${translateText("news.title")}
|
||||
/>
|
||||
|
||||
@@ -55,3 +55,30 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .c-button {
|
||||
background: var(--primaryColorDark);
|
||||
color: var(--fontColorLight);
|
||||
}
|
||||
|
||||
.dark .c-button:hover,
|
||||
.dark .c-button:active,
|
||||
.dark .c-button:focus {
|
||||
background: var(--primaryColorHoverDark);
|
||||
}
|
||||
|
||||
.dark .c-button:disabled {
|
||||
background: var(--primaryColorDisabledDark);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dark .c-button--secondary {
|
||||
background: var(--secondaryColorDark);
|
||||
color: var(--fontColorDark);
|
||||
}
|
||||
|
||||
.dark .c-button--secondary:hover,
|
||||
.dark .c-button--secondary:active,
|
||||
.dark .c-button--secondary:focus {
|
||||
background: var(--secondaryColorHoverDark);
|
||||
}
|
||||
|
||||
@@ -16,4 +16,11 @@
|
||||
--secondaryColor: #dbeafe;
|
||||
--secondaryColorHover: #bfdbfe;
|
||||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
--primaryColorDark: #3b82f6;
|
||||
--primaryColorHoverDark: #2563eb;
|
||||
--primaryColorDisabledDark: #4b5563;
|
||||
--secondaryColorDark: #374151;
|
||||
--secondaryColorHoverDark: #4b5563;
|
||||
--fontColorDark: #f3f4f6;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user