thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-11-12 15:52:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor modal styles to tokenized palette

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-10 22:26:19 -04:00
1 parent f24636ff7d
commit a8cb21d20c
16 files changed
+544 -548
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/profile-modal.html
+59 -67
View File
@@ -9,34 +9,26 @@
>
<div class="bv-modal-backdrop"></div>
<div
class="bv-modal__panel modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 flex flex-col overflow-hidden relative max-h-[90vh]"
tabindex="-1"
>
<div class="modal-sheet modal-content relative flex max-h-[90vh] flex-col overflow-hidden lg:max-w-6xl" tabindex="-1">
<!-- Modal Header -->
<div class="sticky top-0 p-4">
<div class="card flex items-center justify-between gap-4 p-4">
<h2 id="profileModalTitle" class="text-xl font-bold text-white">Profile</h2>
<button
id="closeProfileModal"
class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-gray-300 transition hover:bg-black/70"
<div class="modal-header">
<h2 id="profileModalTitle" class="text-xl font-bold text-text">Profile</h2>
<button id="closeProfileModal" class="modal-close">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<!-- Modal Body -->
@@ -120,8 +112,8 @@
<div id="profileSwitcherTray" class="card space-y-6 p-6">
<div class="flex flex-wrap items-start justify-between gap-4">
<div class="space-y-2">
<h3 class="text-lg font-semibold text-white">Switch profiles</h3>
<p class="text-sm text-gray-400">
<h3 class="text-lg font-semibold text-text">Switch profiles</h3>
<p class="text-sm text-muted">
Save multiple Nostr profiles so you can swap identities without leaving bitvid.
</p>
</div>
@@ -137,7 +129,7 @@
data-state="active"
>
<span
class="flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-blue-400/50 bg-slate-900"
class="flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-info/50 bg-surface"
>
<img
id="profileModalAvatar"
@@ -148,7 +140,7 @@
</span>
<div class="flex min-w-0 flex-1 flex-col gap-2">
<div class="flex flex-wrap items-center gap-3">
<span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-blue-200">
<span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-info">
Active profile
</span>
<a
@@ -159,8 +151,8 @@
View channel
</a>
</div>
<span id="profileModalName" class="truncate text-sm font-semibold text-white">Loading...</span>
<span id="profileModalNpub" class="break-all font-mono text-xs text-gray-400">npub1...</span>
<span id="profileModalName" class="truncate text-sm font-semibold text-text">Loading...</span>
<span id="profileModalNpub" class="break-all font-mono text-xs text-muted">npub1...</span>
</div>
</div>
@@ -180,7 +172,7 @@
aria-label="Add a new Nostr profile"
>
<span
class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/20 text-blue-400"
class="flex h-10 w-10 items-center justify-center rounded-full bg-info/20 text-info"
aria-hidden="true"
>
<svg
@@ -197,12 +189,12 @@
</svg>
</span>
<span class="flex flex-col text-left">
<span data-profile-add-title class="text-sm font-semibold text-white">Add profile</span>
<span data-profile-add-hint class="text-xs text-gray-300">Link another npub</span>
<span data-profile-add-title class="text-sm font-semibold text-text">Add profile</span>
<span data-profile-add-hint class="text-xs text-muted-strong">Link another npub</span>
</span>
</button>
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Profiles you add here will stay on this device so you can quickly switch before posting or moderating.
</p>
</div>
@@ -215,11 +207,11 @@
aria-labelledby="profileNavRelays"
>
<div class="space-y-4">
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Configure the relays bitvid will use to discover and publish your videos.
</p>
<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<label class="flex-1 text-sm text-gray-300" for="relayInput">
<label class="flex-1 text-sm text-muted-strong" for="relayInput">
<span class="mb-2 block font-medium">Add a relay</span>
<input
id="relayInput"
@@ -256,11 +248,11 @@
aria-labelledby="profileNavWallet"
>
<div class="space-y-4">
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Connect a Nostr Wallet Connect (NWC) compatible wallet to zap creators directly from bitvid.
</p>
<div class="space-y-4">
<label class="block text-sm text-gray-300" for="profileWalletUri">
<label class="block text-sm text-muted-strong" for="profileWalletUri">
<span class="mb-2 block font-medium">Wallet Connect URI</span>
<input
id="profileWalletUri"
@@ -269,7 +261,7 @@
class="input"
/>
</label>
<label class="block text-sm text-gray-300" for="profileWalletDefaultZap">
<label class="block text-sm text-muted-strong" for="profileWalletDefaultZap">
<span class="mb-2 block font-medium">Default zap amount (sats)</span>
<input
id="profileWalletDefaultZap"
@@ -308,7 +300,7 @@
</div>
<p
id="profileWalletStatus"
class="text-sm text-gray-400"
class="text-sm text-muted"
role="status"
aria-live="polite"
></p>
@@ -321,12 +313,12 @@
role="tabpanel"
aria-labelledby="profileNavBlocked"
>
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Creators you block are hidden from your bitvid experience. This
list is private to your account.
</p>
<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<label class="flex-1 text-sm text-gray-300" for="blockedInput">
<label class="flex-1 text-sm text-muted-strong" for="blockedInput">
<span class="mb-2 block font-medium">Creator npub</span>
<input
id="blockedInput"
@@ -347,7 +339,7 @@
</div>
<div
id="blockedEmpty"
class="card border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
class="card border border-dashed border-border/60 p-6 text-center text-sm text-muted"
>
You haven’t blocked any creators yet.
</div>
@@ -359,7 +351,7 @@
role="tabpanel"
aria-labelledby="profileNavHistory"
>
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Your recently watched videos appear here so you can jump back into favorites.
</p>
<div
@@ -394,13 +386,13 @@
<div class="flex flex-col">
<span
id="profileHistoryMetadataLabel"
class="text-sm font-medium text-gray-200"
class="text-sm font-medium text-text"
>
Store titles/thumbnails locally
</span>
<span
id="profileHistoryMetadataDescription"
class="text-xs text-gray-400"
class="text-xs text-muted"
>
When disabled, bitvid skips saving rich metadata to this device.
</span>
@@ -408,7 +400,7 @@
<button
id="profileHistoryMetadataToggle"
type="button"
class="focus-ring relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full border border-gray-600 bg-gray-700 transition"
class="focus-ring relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full border border-border bg-panel transition"
role="switch"
aria-checked="true"
aria-labelledby="profileHistoryMetadataLabel"
@@ -458,13 +450,13 @@
</div>
<div
id="profileHistoryError"
class="card hidden border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-100"
class="card hidden border border-critical/40 bg-critical/10 px-4 py-3 text-sm text-critical"
role="alert"
aria-live="assertive"
></div>
<div
id="profileHistoryEmpty"
class="card hidden border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
class="card hidden border border-dashed border-border/60 p-6 text-center text-sm text-muted"
>
You haven’t watched any videos yet.
</div>
@@ -487,24 +479,24 @@
aria-labelledby="profileNavAdmin"
>
<div class="space-y-2">
<h3 class="text-lg font-semibold text-white">Platform moderation</h3>
<p class="text-sm text-gray-400">
<h3 class="text-lg font-semibold text-text">Platform moderation</h3>
<p class="text-sm text-muted">
Manage bitvid’s moderator roles and creator allow/block lists. Changes apply instantly across the app.
</p>
</div>
<div id="adminModeratorsSection" class="space-y-4 hidden" aria-hidden="true">
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h4 class="text-base font-semibold text-white">Moderators</h4>
<p class="text-xs uppercase tracking-wide text-gray-400">
<h4 class="text-base font-semibold text-text">Moderators</h4>
<p class="text-xs uppercase tracking-wide text-muted">
Super Admin only
</p>
</div>
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Moderators can edit the whitelist and blacklist but cannot manage other moderators or whitelist mode.
</p>
<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<label class="flex-1 text-sm text-gray-300" for="adminModeratorInput">
<label class="flex-1 text-sm text-muted-strong" for="adminModeratorInput">
<span class="mb-2 block font-medium">Moderator npub</span>
<input
id="adminModeratorInput"
@@ -525,7 +517,7 @@
</div>
<div
id="adminModeratorsEmpty"
class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
class="card border border-dashed border-border/60 p-4 text-center text-sm text-muted"
>
No moderators configured yet.
</div>
@@ -534,13 +526,13 @@
<div id="adminWhitelistSection" class="space-y-4">
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h4 class="text-base font-semibold text-white">Whitelist</h4>
<h4 class="text-base font-semibold text-text">Whitelist</h4>
</div>
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Creators listed here remain visible when whitelist mode is enabled. Adding someone removes them from the blacklist.
</p>
<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<label class="flex-1 text-sm text-gray-300" for="adminWhitelistInput">
<label class="flex-1 text-sm text-muted-strong" for="adminWhitelistInput">
<span class="mb-2 block font-medium">Creator npub</span>
<input
id="adminWhitelistInput"
@@ -561,7 +553,7 @@
</div>
<div
id="adminWhitelistEmpty"
class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
class="card border border-dashed border-border/60 p-4 text-center text-sm text-muted"
>
No whitelisted creators yet.
</div>
@@ -570,13 +562,13 @@
<div id="adminBlacklistSection" class="space-y-4">
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h4 class="text-base font-semibold text-white">Blacklist</h4>
<h4 class="text-base font-semibold text-text">Blacklist</h4>
</div>
<p class="text-sm text-gray-400">
<p class="text-sm text-muted">
Creators on the blacklist are hidden from bitvid everywhere. Adding someone removes them from the whitelist.
</p>
<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<label class="flex-1 text-sm text-gray-300" for="adminBlacklistInput">
<label class="flex-1 text-sm text-muted-strong" for="adminBlacklistInput">
<span class="mb-2 block font-medium">Creator npub</span>
<input
id="adminBlacklistInput"
@@ -597,7 +589,7 @@
</div>
<div
id="adminBlacklistEmpty"
class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
class="card border border-dashed border-border/60 p-4 text-center text-sm text-muted"
>
No blacklisted creators yet.
</div>
@@ -609,7 +601,7 @@
</div>
<!-- Modal Footer -->
<div class="flex items-center justify-end gap-3 border-t border-gray-700 p-4">
<div class="flex items-center justify-end gap-3 border-t border-border/60 p-4">
<button id="profileLogoutBtn" class="btn focus-ring" data-variant="danger">
Logout
</button>