github/sub2api
4
0 Fork 0
mirror of https://github.com/Wei-Shaw/sub2api.git synced 2026-11-03 00:33:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(frontend): align dark-mode surfaces with the slate dark palette

Browse Source 
The project's dark theme uses the custom slate-based dark-* palette
(928 dark:bg-dark-* / 787 dark:border-dark-* occurrences), but a
minority of surfaces still used Tailwind's neutral gray-* scale, which
has a visibly cooler hue next to slate cards — most noticeably the
filter dropdown panels on the usage, accounts and subscriptions pages.

Migrate the remaining dark:bg-gray-* / dark:border-gray-* (and their
hover: variants) to the dark-* palette across 12 components: filter
dropdowns, chart card borders, menu separators, and small badges.
49 class-string substitutions, no structural or logic changes;
dark:text-gray-* is untouched since gray text on dark surfaces is the
established project-wide convention.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
AstrenixandClaude Fable 5 committed 2026-07-19 02:45:41 +08:00
1 parent d4b9797ff7
commit ed280b81fc
12 files changed
+49 -49
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/views/admin/SubscriptionsView.vue
+9 -9
View File
@@ -37,7 +37,7 @@
<!-- User Dropdown -->
<div
v-if="showFilterUserDropdown && (filterUserResults.length > 0 || filterUserKeyword)"
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-dark-700 dark:bg-dark-800"
>
<div
v-if="filterUserLoading"
@@ -56,7 +56,7 @@
:key="user.id"
type="button"
@click="selectFilterUser(user)"
class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-dark-700"
>
<span class="font-medium text-gray-900 dark:text-white">{{ user.email }}</span>
<span class="ml-2 text-gray-500 dark:text-gray-400">#{{ user.id }}</span>
@@ -116,24 +116,24 @@
<!-- Dropdown menu -->
<div
v-if="showColumnDropdown"
class="absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
class="absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-lg border border-gray-200 bg-white shadow-lg dark:border-dark-700 dark:bg-dark-800"
>
<div class="p-2">
<!-- User column mode selection -->
<div class="mb-2 border-b border-gray-200 pb-2 dark:border-gray-700">
<div class="mb-2 border-b border-gray-200 pb-2 dark:border-dark-700">
<div class="px-3 py-1 text-xs font-medium text-gray-500 dark:text-gray-400">
{{ t('admin.subscriptions.columns.user') }}
</div>
<button
@click="setUserColumnMode('email')"
class="flex w-full items-center justify-between rounded-md px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
class="flex w-full items-center justify-between rounded-md px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-dark-700"
>
<span>{{ t('admin.users.columns.email') }}</span>
<Icon v-if="userColumnMode === 'email'" name="check" size="sm" class="text-primary-500" />
</button>
<button
@click="setUserColumnMode('username')"
class="flex w-full items-center justify-between rounded-md px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
class="flex w-full items-center justify-between rounded-md px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-dark-700"
>
<span>{{ t('admin.users.columns.username') }}</span>
<Icon v-if="userColumnMode === 'username'" name="check" size="sm" class="text-primary-500" />
@@ -144,7 +144,7 @@
v-for="col in toggleableColumns"
:key="col.key"
@click="toggleColumn(col.key)"
class="flex w-full items-center justify-between rounded-md px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
class="flex w-full items-center justify-between rounded-md px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-dark-700"
>
<span>{{ col.label }}</span>
<Icon v-if="isColumnVisible(col.key)" name="check" size="sm" class="text-primary-500" />
@@ -473,7 +473,7 @@
<!-- User Dropdown -->
<div
v-if="showUserDropdown && (userSearchResults.length > 0 || userSearchKeyword)"
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-dark-700 dark:bg-dark-800"
>
<div
v-if="userSearchLoading"
@@ -492,7 +492,7 @@
:key="user.id"
type="button"
@click="selectUser(user)"
class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700"
class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-dark-700"
>
<span class="font-medium text-gray-900 dark:text-white">{{ user.email }}</span>
<span class="ml-2 text-gray-500 dark:text-gray-400">#{{ user.id }}</span>