Skip to content

Commit 84c5cf0

Browse files
PiterWebPiterWeb
committed
Completed dark-mode and better layout
1 parent 13ec17d commit 84c5cf0

File tree

12 files changed

+97
-82
lines changed

12 files changed

+97
-82
lines changed

‎frontend/src/lib/layout/Tooltip.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@
1919
children: import('svelte').Snippet,
2020
ref: string,
2121
placement?: UseFloatingOptions["placement"]
22+
dark?: boolean
2223
}
2324
24-
let { children, ref, placement }: TooltipProps = $props();
25+
let { children, ref, placement, dark = true }: TooltipProps = $props();
2526
2627
// State
2728
let open = $state(false);
@@ -76,7 +77,7 @@
7677
class="floating popover-neutral"
7778
transition:fade={{ duration: 200 }}
7879
>
79-
<div class="dark:bg-gray-800 dark:border-gray-700 border-2 rounded-lg p-4 text-white">
80+
<div class:bg-white={dark} class:text-gray-800={dark} class:bg-gray-800={!dark} class:text-white={!dark} class="border-2 rounded-lg p-4">
8081
{@render children?.()}
8182
</div>
8283
<FloatingArrow bind:ref={elemArrow} context={floating.context} fill="#575969" />

‎frontend/src/lib/layout/icons/GamepadIcon.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gamepad dark:stroke-white stroke-gray-900"><line x1="6" x2="10" y1="12" y2="12"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="15" x2="15.01" y1="13" y2="13"/><line x1="18" x2="18.01" y1="11" y2="11"/><rect width="20" height="12" x="2" y="6" rx="2"/></svg>
1+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gamepad stroke-white"><line x1="6" x2="10" y1="12" y2="12"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="15" x2="15.01" y1="13" y2="13"/><line x1="18" x2="18.01" y1="11" y2="11"/><rect width="20" height="12" x="2" y="6" rx="2"/></svg>

‎frontend/src/lib/layout/icons/KeyboardIcon.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-keyboard-icon lucide-keyboard dark:stroke-white stroke-gray-900"><path d="M10 8h.01"/><path d="M12 12h.01"/><path d="M14 8h.01"/><path d="M16 12h.01"/><path d="M18 8h.01"/><path d="M6 8h.01"/><path d="M7 16h10"/><path d="M8 12h.01"/><rect width="20" height="16" x="2" y="4" rx="2"/></svg>
1+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-keyboard-icon lucide-keyboard stroke-white "><path d="M10 8h.01"/><path d="M12 12h.01"/><path d="M14 8h.01"/><path d="M16 12h.01"/><path d="M18 8h.01"/><path d="M6 8h.01"/><path d="M7 16h10"/><path d="M8 12h.01"/><rect width="20" height="16" x="2" y="4" rx="2"/></svg>

‎frontend/src/lib/webrtc/ConnectionOptions.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<label
1313
id="label-lan-mode-checkbox"
1414
for="lan-mode-checkbox"
15-
class="font-semibold text-gray-900 dark:text-white">{$_('lan-mode')}</label
15+
class="font-semibold text-white">{$_('lan-mode')}</label
1616
>
1717
<input
1818
id="lan-mode-checkbox"

‎frontend/src/lib/webrtc/ICEServerManager.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
let newserverToAdd: string | undefined = $state();
103103
</script>
104104

105-
<h2 class="text-center text-primary text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
105+
<h2 class="text-center text-white text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
106106
{#if type === 'stun'}
107107
{$_('stun-servers-title')}
108108
{:else}

‎frontend/src/lib/webrtc/stream/CodecList.svelte‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,23 +20,23 @@
2020

2121
<section class="md:col-span-2 flex flex-col items-center gap-4 w-full">
2222

23-
<div class="flex flex-col bg-white border w-full border-gray-200 shadow-2xs rounded-xl dark:bg-neutral-900 dark:border-neutral-700 dark:shadow-neutral-700/70">
23+
<div class="flex flex-col border w-full shadow-2xs rounded-xl bg-neutral-900 border-neutral-700 shadow-neutral-700/70">
2424
<header class="p-4 md:p-5">
25-
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
25+
<h3 class="text-lg font-bold text-white">
2626
{$_("codec-list")}
2727
</h3>
28-
<p class="mt-2 text-gray-500 dark:text-neutral-400">
28+
<p class="mt-2 text-neutral-400">
2929
{$_("codec-list-preference")}
3030
</p>
3131

3232
</header>
33-
<footer class="bg-gray-100 border-t border-gray-200 rounded-b-xl py-3 px-4 md:py-4 md:px-5 dark:bg-neutral-900 dark:border-neutral-700">
33+
<footer class="border-t rounded-b-xl py-3 px-4 md:py-4 md:px-5 bg-neutral-900 border-neutral-700">
3434
<ul bind:this={sortable} class="max-w-xs flex flex-col">
3535
{#each preferedCodecsOrdered.value as codec}
3636
{#key codec}
37-
<li data-id={codec} class="inline-flex items-center gap-x-3 py-3 px-4 cursor-grab text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
37+
<li data-id={codec} class="inline-flex items-center gap-x-3 py-3 px-4 cursor-grab text-sm font-medium border -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg bg-neutral-900 border-neutral-700 text-neutral-200">
3838
{codec}
39-
<svg class="shrink-0 size-4 ms-auto text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
39+
<svg class="shrink-0 size-4 ms-auto text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
4040
<circle cx="9" cy="12" r="1"></circle>
4141
<circle cx="9" cy="5" r="1"></circle>
4242
<circle cx="9" cy="19" r="1"></circle>
@@ -52,7 +52,7 @@
5252

5353
</div>
5454

55-
<button onclick={restoreDefaultCodecs} class="btn btn-neutral">
55+
<button onclick={restoreDefaultCodecs} class="btn">
5656
{$_('restore-codecs')}
5757
</button>
5858
</section>

‎frontend/src/lib/webrtc/stream/stream_config.svelte.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ RESOLUTIONS.set(FIXED_RESOLUTIONS.resolution360p, {width: 640, height:360})
1818
export const DEFAULT_MAX_FRAMERATE = 60
1919
export const DEFAULT_IDEAL_FRAMERATE = 30
2020

21+
export const MIN_FRAMES = 25
22+
export const MAX_FRAMES = 145
23+
2124
const DEFAULT_PREFERED_CODECS = ["video/VP9","video/AV1","video/H264", "video/VP8"]
2225

2326
export const preferedCodecsOrdered = $state({value: getStoredPreferedCodecsOrdered()})

‎frontend/src/routes/+layout.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@
7070
<p>{$_('config_title')}</p>
7171
</Tooltip>
7272
73-
<PageTransition key={page.url.toString()} duration={750}>
73+
<PageTransition key={page.url.toString()} duration={500}>
7474
<div class="hero min-h-[calc(100vh-4rem)] bg-gray-900">
75-
<div class="hero-content flex-col">
75+
<div class="hero-content flex-col w-full">
7676
{@render children?.()}
7777
</div>
7878
</div>

‎frontend/src/routes/mode/client/+page.svelte‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,30 +36,30 @@
3636
}
3737
</script>
3838

39-
<h2 class="text-center text-primary text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
39+
<h2 class="text-center text-white text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
4040
{$_('client_card_title')}
4141
</h2>
4242

4343
<div
44-
class="mt-12 md:mt-4 card bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
44+
class="mt-12 md:mt-4 card border rounded-lg shadow-xl bg-gray-800 border-gray-700"
4545
>
4646
<div class="card-body">
4747
<ConnectionOptions/>
4848
<section class="flex flex-col md:flex-row [&>ol]:px-4">
4949
<ol>
5050
<li class="mb-10 me-4">
51-
<h3 class="text-2xl font-semibold text-gray-900 dark:text-white">
51+
<h3 class="text-2xl font-semibold text-white">
5252
{$_('easy-connect')}
5353
</h3>
54-
<p class="text-sm text-gray-400 dark:text-gray-500 mb-4">
54+
<p class="text-sm text-gray-500 mb-4">
5555
{$_('easy-connect-description')}
5656
</p>
5757

5858
<section class="flex flex-col gap-4">
5959
<div>
6060
<label
6161
for="ip-domain-easy-connect"
62-
class="mb-1 text-md font-normal leading-none text-gray-400 dark:text-gray-500"
62+
class="mb-1 text-md font-normal leading-none text-gray-500"
6363
>{$_('ip-domain-easy-connect')}</label
6464
>
6565

@@ -75,7 +75,7 @@
7575
<div class="flex flex-col">
7676
<label
7777
for="id-easy-connect"
78-
class="mb-1 text-md font-normal leading-none text-gray-400 dark:text-gray-500"
78+
class="mb-1 text-md font-normal leading-none text-gray-500"
7979
>{$_('id-easy-connect')}</label
8080
>
8181

@@ -96,31 +96,31 @@
9696
</section>
9797
</li>
9898
<li class="block md:hidden">
99-
<hr class="border-gray-200 dark:border-gray-700" />
99+
<hr class="border-gray-700" />
100100
</li>
101101
</ol>
102102
<ol>
103103
<li>
104-
<h3 class="text-2xl font-semibold text-gray-900 dark:text-white">
104+
<h3 class="text-2xl font-semibold text-white">
105105
{$_('manual-connection')}
106106
</h3>
107-
<p class="text-sm text-gray-400 dark:text-gray-500 mb-4">
107+
<p class="text-sm text-gray-500 mb-4">
108108
{$_('manual-connection-description')}
109109
</p>
110110
</li>
111111
<li>
112-
<ol class="relative border-s border-gray-200 dark:border-gray-700">
112+
<ol class="relative border-s border-gray-700">
113113
<li class="mb-10 ms-4">
114114
{#if !clientCreated}
115115
<div
116-
class="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"
116+
class="absolute w-3 h-3 rounded-full mt-1.5 -start-1.5 border border-gray-900 bg-gray-700"
117117
></div>
118118
{:else}
119119
<span
120-
class="absolute flex items-center justify-center rounded-full mt-1.5 w-3 h-3 -start-1.5 border border-white dark:border-gray-900"
120+
class="absolute flex items-center justify-center rounded-full mt-1.5 w-3 h-3 -start-1.5 border border-gray-900"
121121
>
122122
<svg
123-
class="w-2.5 h-2.5 text-green-500 dark:text-green-400 flex-shrink-0"
123+
class="w-2.5 h-2.5 text-green-400 flex-shrink-0"
124124
aria-hidden="true"
125125
xmlns="http://www.w3.org/2000/svg"
126126
fill="currentColor"
@@ -135,7 +135,7 @@
135135

136136
<label
137137
for="create-client"
138-
class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
138+
class="mb-1 text-sm font-normal leading-none text-gray-500"
139139
>{$_('first-step')}</label
140140
>
141141
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">

‎frontend/src/routes/mode/config/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import TurnServers from './TurnServers.svelte';
88
</script>
99

10-
<h2 class="text-center text-primary text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
10+
<h2 class="text-center text-white text-[clamp(2rem,6vw,4.2rem)] font-black leading-[1.1] xl:text-left">
1111
{$_('config_title')}
1212
</h2>
1313

0 commit comments

Comments
 (0)