feat(ui): enhance header subtitles with badge styling
Refactor subtitle elements in accounts, dashboard, and models views to use styled badge containers with rounded backgrounds, borders, and improved typography for better visual consistency.
This commit is contained in:
@@ -2,14 +2,16 @@
|
|||||||
<!-- Compact Header -->
|
<!-- Compact Header -->
|
||||||
<div class="flex items-center justify-between gap-4 mb-6">
|
<div class="flex items-center justify-between gap-4 mb-6">
|
||||||
<!-- Title with inline subtitle -->
|
<!-- Title with inline subtitle -->
|
||||||
<div class="flex items-baseline gap-3">
|
<div class="flex flex-wrap items-center gap-4">
|
||||||
<h1 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('accountManagement')">
|
<h1 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('accountManagement')">
|
||||||
Account Management
|
Account Management
|
||||||
</h1>
|
</h1>
|
||||||
<span class="text-[10px] font-mono text-gray-600 uppercase tracking-[0.15em]"
|
<div class="flex items-center h-6 px-3 rounded-full bg-space-800/80 border border-space-border/50 shadow-sm backdrop-blur-sm">
|
||||||
x-text="$store.global.t('manageTokens')">
|
<span class="text-[10px] font-mono text-gray-400 uppercase tracking-wider"
|
||||||
Manage Google Account tokens and authorization states
|
x-text="$store.global.t('manageTokens')">
|
||||||
</span>
|
Manage Google Account tokens and authorization states
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Action Buttons -->
|
<!-- Action Buttons -->
|
||||||
|
|||||||
@@ -2,18 +2,20 @@
|
|||||||
<!-- Compact Header -->
|
<!-- Compact Header -->
|
||||||
<div class="flex items-center justify-between gap-4 mb-6">
|
<div class="flex items-center justify-between gap-4 mb-6">
|
||||||
<!-- Title with inline subtitle -->
|
<!-- Title with inline subtitle -->
|
||||||
<div class="flex items-baseline gap-3">
|
<div class="flex flex-wrap items-center gap-4">
|
||||||
<h1 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('dashboard')">
|
<h1 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('dashboard')">
|
||||||
Dashboard
|
Dashboard
|
||||||
</h1>
|
</h1>
|
||||||
<span class="text-[10px] font-mono text-gray-600 uppercase tracking-[0.15em]"
|
<div class="flex items-center h-6 px-3 rounded-full bg-space-800/80 border border-space-border/50 shadow-sm backdrop-blur-sm">
|
||||||
x-text="$store.global.t('systemDesc')">
|
<span class="text-[10px] font-mono text-gray-400 uppercase tracking-wider"
|
||||||
CLAUDE PROXY SYSTEM
|
x-text="$store.global.t('systemDesc')">
|
||||||
</span>
|
CLAUDE PROXY SYSTEM
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Compact Status Indicator -->
|
<!-- Compact Status Indicator -->
|
||||||
<div class="flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-space-900/60 border border-space-border/40">
|
<div class="flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-space-900/60 border border-space-border/40 whitespace-nowrap flex-shrink-0">
|
||||||
<div class="relative flex items-center justify-center">
|
<div class="relative flex items-center justify-center">
|
||||||
<span class="absolute w-1.5 h-1.5 bg-neon-green rounded-full animate-ping opacity-75"></span>
|
<span class="absolute w-1.5 h-1.5 bg-neon-green rounded-full animate-ping opacity-75"></span>
|
||||||
<span class="relative w-1.5 h-1.5 bg-neon-green rounded-full"></span>
|
<span class="relative w-1.5 h-1.5 bg-neon-green rounded-full"></span>
|
||||||
|
|||||||
@@ -2,14 +2,16 @@
|
|||||||
<!-- Compact Header -->
|
<!-- Compact Header -->
|
||||||
<div class="flex items-center justify-between gap-4 mb-6">
|
<div class="flex items-center justify-between gap-4 mb-6">
|
||||||
<!-- Title with inline subtitle -->
|
<!-- Title with inline subtitle -->
|
||||||
<div class="flex items-baseline gap-3">
|
<div class="flex flex-wrap items-center gap-4">
|
||||||
<h1 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('models')">
|
<h1 class="text-2xl font-bold text-white tracking-tight" x-text="$store.global.t('models')">
|
||||||
Models
|
Models
|
||||||
</h1>
|
</h1>
|
||||||
<span class="text-[10px] font-mono text-gray-600 uppercase tracking-[0.15em]"
|
<div class="flex items-center h-6 px-3 rounded-full bg-space-800/80 border border-space-border/50 shadow-sm backdrop-blur-sm">
|
||||||
x-text="$store.global.t('modelsPageDesc')">
|
<span class="text-[10px] font-mono text-gray-400 uppercase tracking-wider"
|
||||||
Real-time quota and status for all available models.
|
x-text="$store.global.t('modelsPageDesc')">
|
||||||
</span>
|
Real-time quota and status for all available models.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Search Bar -->
|
<!-- Search Bar -->
|
||||||
|
|||||||
Reference in New Issue
Block a user