refactor: enhance admin panel styling with better card patterns
- Dashboard: use admin-card for sections, refine progress bars and action badges - Applications: enhanced card styling with p-3 and better text hierarchy - Emulator: convert remaining 'card' classes to 'admin-card' - All changes eliminate inline styles and use consistent Tailwind patterns Co-authored-by: openhands <[email protected]>
This commit is contained in:
1 parent
928544100b
commit
72ef74fc87
4 files changed
+39
-43
No files matched your search
@@ -47,24 +47,23 @@ export default async function AdminEmulator() {
|
||||
</div>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2>Settings</h2>
|
||||
<h2 className="admin-section-title">Settings</h2>
|
||||
<p className="muted" style={{ marginTop: "-0.4rem" }}>
|
||||
{settings.length} keys.
|
||||
</p>
|
||||
|
||||
<form
|
||||
action={updateEmulatorSetting}
|
||||
className="card"
|
||||
style={{ marginBottom: "1.5rem" }}
|
||||
className="admin-card mb-6"
|
||||
>
|
||||
<h3 style={{ marginTop: 0 }}>Add / overwrite setting</h3>
|
||||
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
|
||||
<h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Add / overwrite setting</h3>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<input name="key" placeholder="key" maxLength={100} required />
|
||||
<input
|
||||
name="value"
|
||||
placeholder="value"
|
||||
maxLength={512}
|
||||
style={{ flex: 1, minWidth: 200 }}
|
||||
className="flex-1 min-w-[200px]"
|
||||
/>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Save
|
||||
@@ -112,24 +111,23 @@ export default async function AdminEmulator() {
|
||||
</section>
|
||||
|
||||
<section className="mt-6">
|
||||
<h2>Texts</h2>
|
||||
<h2 className="admin-section-title">Texts</h2>
|
||||
<p className="muted" style={{ marginTop: "-0.4rem" }}>
|
||||
{textsCount} keys{textsTruncated ? ` (showing first ${texts.length})` : ""}.
|
||||
</p>
|
||||
|
||||
<form
|
||||
action={updateEmulatorText}
|
||||
className="card"
|
||||
style={{ marginBottom: "1.5rem" }}
|
||||
className="admin-card mb-6"
|
||||
>
|
||||
<h3 style={{ marginTop: 0 }}>Add / overwrite text</h3>
|
||||
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
|
||||
<h3 className="text-sm font-bold text-[var(--color-text)] m-0 mb-3">Add / overwrite text</h3>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<input name="key" placeholder="key" maxLength={100} required />
|
||||
<input
|
||||
name="value"
|
||||
placeholder="value"
|
||||
maxLength={4096}
|
||||
style={{ flex: 1, minWidth: 200 }}
|
||||
className="flex-1 min-w-[200px]"
|
||||
/>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Save
|
||||
@@ -140,7 +138,7 @@ export default async function AdminEmulator() {
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: 320 }}>Key</th>
|
||||
<th className="w-[320px]">Key</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -153,14 +151,14 @@ export default async function AdminEmulator() {
|
||||
<td>
|
||||
<form
|
||||
action={updateEmulatorText}
|
||||
style={{ display: "flex", gap: "0.5rem" }}
|
||||
className="flex gap-2"
|
||||
>
|
||||
<input type="hidden" name="key" value={t.key} />
|
||||
<input
|
||||
name="value"
|
||||
defaultValue={t.value}
|
||||
maxLength={4096}
|
||||
style={{ flex: 1 }}
|
||||
className="flex-1"
|
||||
/>
|
||||
<button type="submit" className="btn btn-outline">
|
||||
Save
|
||||
@@ -172,7 +170,7 @@ export default async function AdminEmulator() {
|
||||
</tbody>
|
||||
</table>
|
||||
{texts.length === 0 ? (
|
||||
<p className="muted">No emulator texts found.</p>
|
||||
<div className="admin-empty">No emulator texts found.</div>
|
||||
) : null}
|
||||
{textsTruncated ? (
|
||||
<p className="muted">
|
||||
|
||||
Reference in new issue
Block a user