github/sub2api
4
0
Fork 0
mirror of https://github.com/Wei-Shaw/sub2api.git synced 2026-10-31 16:26:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): refine grok icon, palette and i18n

Browse Source
This commit is contained in:
shaw
2026-07-01 18:49:33 +08:00
parent 5eb9da9c93
commit 60da9ba178
9 changed files with 46 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/account/AccountUsageCell.vue
+1 -1
View File
@@ -348,7 +348,7 @@
</div>
<div v-else-if="usageInfo" class="space-y-1">
<div v-if="grokEntitlementLabel" class="mb-0.5">
<span class="inline-block rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-700 dark:bg-slate-800 dark:text-slate-300">
<span class="inline-block rounded bg-zinc-100 px-1.5 py-0.5 text-[10px] font-medium text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200">
{{ grokEntitlementLabel }}
</span>
</div>
frontend/src/components/account/CreateAccountModal.vue
+4 -4
View File
@@ -153,7 +153,7 @@
:class="[
'flex flex-1 items-center justify-center gap-2 rounded-md px-4 py-2.5 text-sm font-medium transition-all',
form.platform === 'grok'
? 'bg-white text-slate-700 shadow-sm dark:bg-dark-600 dark:text-slate-200'
? 'bg-white text-zinc-900 shadow-sm dark:bg-dark-600 dark:text-zinc-100'
: 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200'
]"
>
@@ -362,15 +362,15 @@
:class="[
'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
accountCategory === 'oauth-based'
? 'border-slate-500 bg-slate-50 dark:bg-slate-900/20'
: 'border-gray-200 hover:border-slate-300 dark:border-dark-600 dark:hover:border-slate-700'
? 'border-zinc-800 bg-zinc-50 dark:bg-zinc-900/30'
: 'border-gray-200 hover:border-zinc-400 dark:border-dark-600 dark:hover:border-zinc-600'
]"
>
<div
:class="[
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
accountCategory === 'oauth-based'
? 'bg-slate-700 text-white'
? 'bg-zinc-900 text-white'
: 'bg-gray-100 text-gray-500 dark:bg-dark-600 dark:text-gray-400'
]"
>
frontend/src/components/admin/account/ReAuthAccountModal.vue
+1 -1
View File
@@ -21,7 +21,7 @@
: isAntigravity
? 'from-purple-500 to-purple-600'
: isGrok
? 'from-slate-600 to-cyan-600'
? 'from-zinc-700 to-zinc-900'
: 'from-orange-500 to-orange-600'
]"
>
frontend/src/components/common/GroupBadge.vue
+16
View File
@@ -124,6 +124,12 @@ const labelClass = computed(() => {
if (props.platform === 'gemini') {
return `${base} bg-blue-200/60 text-blue-800 dark:bg-blue-800/40 dark:text-blue-300`
}
if (props.platform === 'antigravity') {
return `${base} bg-purple-200/60 text-purple-800 dark:bg-purple-800/40 dark:text-purple-300`
}
if (props.platform === 'grok') {
return `${base} bg-zinc-300/70 text-zinc-800 dark:bg-zinc-700/60 dark:text-zinc-200`
}
return `${base} bg-violet-200/60 text-violet-800 dark:bg-violet-800/40 dark:text-violet-300`
})
@@ -145,6 +151,16 @@ const badgeClass = computed(() => {
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
: 'bg-sky-50 text-sky-700 dark:bg-sky-900/20 dark:text-sky-400'
}
if (props.platform === 'antigravity') {
return isSubscription.value
? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
: 'bg-fuchsia-50 text-fuchsia-700 dark:bg-fuchsia-900/20 dark:text-fuchsia-400'
}
if (props.platform === 'grok') {
return isSubscription.value
? 'bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-100'
: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200'
}
// Fallback: original colors
return isSubscription.value
? 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400'
frontend/src/components/common/PlatformIcon.vue
+5 -5
View File
@@ -19,11 +19,11 @@
<svg v-else-if="platform === 'antigravity'" :class="sizeClass" viewBox="0 0 24 24" fill="currentColor">
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z" />
</svg>
<!-- Grok/xAI logo mark -->
<svg v-else-if="platform === 'grok'" :class="sizeClass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 18 18 4" />
<path stroke-linecap="round" stroke-linejoin="round" d="M8 5h11v11" />
<path stroke-linecap="round" stroke-linejoin="round" d="M5 6l13 13" />
<!-- Grok / xAI logo mark (stylized angular X) -->
<svg v-else-if="platform === 'grok'" :class="sizeClass" viewBox="0 0 24 24" fill="currentColor">
<path
d="M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815"
/>
</svg>
<!-- Fallback: generic platform icon -->
<svg v-else :class="sizeClass" fill="currentColor" viewBox="0 0 24 24">