mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-22 03:43:48 +00:00
Abdallah Bahrawi
175d492b99
## Description: Fixes #2015 Improved the Player Panel UI for better usability and appearance. **Screenshots** <img width="334" height="523" alt="2" src="https://github.com/user-attachments/assets/bd0afaac-07df-4abc-a20f-208a0783e558" /> <img width="337" height="523" alt="3" src="https://github.com/user-attachments/assets/f712ad77-4546-487b-9a9c-2c535b8a45f7" /> **Future Plan** Add a modal for sending gold and troops to other players from the Player Panel. <img width="343" height="494" alt="sending troops" src="https://github.com/user-attachments/assets/9c9c21db-e13a-426f-93e9-b477a9db442a" /> ## 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: abodcraft1 --------- Co-authored-by: evanpelle <evanpelle@gmail.com>
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { html, TemplateResult } from "lit";
|
|
|
|
export type ButtonVariant =
|
|
| "normal"
|
|
| "red"
|
|
| "green"
|
|
| "indigo"
|
|
| "yellow"
|
|
| "sky";
|
|
export interface ActionButtonProps {
|
|
onClick: (e: MouseEvent) => void;
|
|
type?: ButtonVariant;
|
|
icon: string;
|
|
iconAlt: string;
|
|
title: string;
|
|
label: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const ICON_SIZE =
|
|
"h-5 w-5 shrink-0 transition-transform group-hover:scale-110 text-zinc-400";
|
|
const TEXT_SIZE =
|
|
"text-base sm:text-[14px] leading-5 font-semibold tracking-tight";
|
|
|
|
const getButtonStyles = () => {
|
|
const btnBase =
|
|
"group w-full min-w-[50px] select-none flex flex-col items-center justify-center " +
|
|
"gap-1 rounded-lg py-1.5 border border-white/10 bg-white/[0.04] shadow-sm " +
|
|
"transition-all duration-150 " +
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 " +
|
|
"active:translate-y-[1px]";
|
|
|
|
return {
|
|
normal: `${btnBase} text-white/90 hover:bg-white/10 hover:text-white`,
|
|
red: `${btnBase} text-red-400 hover:bg-red-500/10 hover:text-red-300 focus-visible:ring-red-400/30`,
|
|
green: `${btnBase} text-emerald-400 hover:bg-emerald-500/10 hover:text-emerald-300 focus-visible:ring-emerald-400/30`,
|
|
yellow: `${btnBase} text-[#f59e0b] hover:bg-[#f59e0b]/10 hover:text-[#fbbf24] focus-visible:ring-[#f59e0b]/30`,
|
|
indigo: `${btnBase} text-indigo-400 hover:bg-indigo-500/10 hover:text-indigo-300 focus-visible:ring-indigo-400/30`,
|
|
sky: `${btnBase} text-[#38bdf8] hover:bg-[#38bdf8]/10 hover:text-[#0ea5e9] focus-visible:ring-[#38bdf8]/30`,
|
|
};
|
|
};
|
|
|
|
export const actionButton = (props: ActionButtonProps): TemplateResult => {
|
|
const {
|
|
onClick,
|
|
type = "normal",
|
|
icon,
|
|
iconAlt,
|
|
title,
|
|
label,
|
|
disabled = false,
|
|
} = props;
|
|
const buttonStyles = getButtonStyles();
|
|
const buttonClass = buttonStyles[type];
|
|
|
|
return html`
|
|
<button
|
|
@click=${onClick}
|
|
class="${buttonClass}"
|
|
title="${title}"
|
|
type="button"
|
|
aria-label="${title}"
|
|
?disabled=${disabled}
|
|
>
|
|
<img src=${icon} alt=${iconAlt} aria-hidden="true" class="${ICON_SIZE}" />
|
|
<span class="${TEXT_SIZE}">${label}</span>
|
|
</button>
|
|
`;
|
|
};
|