appview-less bluesky client
feat: refactor and improve post composer styling
+52
-25
+26
-4
src/components/PostComposer.svelte
+26
-4
src/components/PostComposer.svelte
···
102
102
};
103
103
104
104
$effect(() => {
105
+
document.documentElement.style.setProperty('--acc-color', color);
105
106
if (isFocused && textareaEl) textareaEl.focus();
106
107
if (quoting || replying) isFocused = true;
107
108
});
···
155
156
}}
156
157
placeholder="what's on your mind?"
157
158
rows="4"
158
-
class="field-sizing-content single-line-input resize-none bg-(--nucleus-bg)/40 focus:scale-100"
159
-
style="border-color: color-mix(in srgb, {color} 27%, transparent);"
159
+
class="field-sizing-content resize-none"
160
160
></textarea>
161
161
{#if quoting}
162
162
{@render renderPost(quoting)}
···
202
202
onfocus={() => (isFocused = true)}
203
203
type="text"
204
204
placeholder="what's on your mind?"
205
-
class="single-line-input flex-1 bg-(--nucleus-bg)/40 p-1 px-2"
206
-
style="border-color: color-mix(in srgb, {color} 27%, transparent);"
205
+
class="flex-1"
207
206
/>
208
207
{/if}
209
208
</div>
···
211
210
</div>
212
211
</div>
213
212
</div>
213
+
214
+
<style>
215
+
@reference "../app.css";
216
+
217
+
input,
218
+
textarea {
219
+
@apply single-line-input bg-(--nucleus-bg)/35;
220
+
border-color: color-mix(in srgb, var(--acc-color) 30%, transparent);
221
+
}
222
+
223
+
input {
224
+
@apply p-1 px-2;
225
+
}
226
+
227
+
textarea {
228
+
@apply focus:scale-100;
229
+
}
230
+
231
+
input::placeholder,
232
+
textarea::placeholder {
233
+
color: color-mix(in srgb, var(--acc-color) 45%, var(--nucleus-bg));
234
+
}
235
+
</style>
+26
-21
src/routes/+page.svelte
+26
-21
src/routes/+page.svelte
···
256
256
});
257
257
</script>
258
258
259
+
{#snippet appButton(onClick: () => void, icon: string, ariaLabel: string, iconHover?: string)}
260
+
<button
261
+
onclick={onClick}
262
+
class="group rounded-sm bg-(--nucleus-accent)/15 p-2 text-(--nucleus-accent) transition-all hover:scale-110 hover:shadow-lg"
263
+
aria-label={ariaLabel}
264
+
>
265
+
<Icon class="group-hover:hidden" {icon} width={28} />
266
+
<Icon class="hidden group-hover:block" icon={iconHover ?? icon} width={28} />
267
+
</button>
268
+
{/snippet}
269
+
259
270
<div class="mx-auto max-w-2xl">
260
271
<!-- thread list (page scrolls as a whole) -->
261
272
<div
···
334
345
{/if}
335
346
336
347
{#if showScrollToTop}
337
-
<button
338
-
onclick={scrollToTop}
339
-
class="group shrink-0 rounded-sm bg-(--nucleus-accent)/15 p-2 text-(--nucleus-accent) transition-all hover:scale-110 hover:shadow-lg"
340
-
aria-label="scroll to top"
341
-
title="scroll to top"
342
-
>
343
-
<Icon
344
-
class="transition-transform group-hover:-translate-y-0.5"
345
-
icon="heroicons:arrow-up-16-solid"
346
-
width={28}
347
-
/>
348
-
</button>
348
+
{@render appButton(scrollToTop, 'heroicons:arrow-up-16-solid', 'scroll to top')}
349
349
{/if}
350
350
</div>
351
351
···
354
354
style="background: linear-gradient(to right, var(--nucleus-accent), var(--nucleus-accent2));"
355
355
></div>
356
356
357
-
<div class="flex items-center justify-between px-2 py-1">
357
+
<div class="flex items-center gap-1.5 px-2 py-1">
358
358
<div class="mb-2">
359
359
<h1 class="text-3xl font-bold tracking-tight">nucleus</h1>
360
360
<div class="mt-1 flex gap-2">
···
362
362
<div class="h-1 w-8 rounded-full bg-(--nucleus-accent2)"></div>
363
363
</div>
364
364
</div>
365
-
<button
366
-
onclick={() => (isSettingsOpen = true)}
367
-
class="group rounded-sm bg-(--nucleus-accent)/15 p-2 text-(--nucleus-accent) transition-all hover:scale-110 hover:shadow-lg"
368
-
aria-label="settings"
369
-
>
370
-
<Icon class="group-hover:hidden" icon="heroicons:cog-6-tooth" width={28} />
371
-
<Icon class="hidden group-hover:block" icon="heroicons:cog-6-tooth-solid" width={28} />
372
-
</button>
365
+
<div class="grow"></div>
366
+
{@render appButton(
367
+
() => (isSettingsOpen = true),
368
+
'heroicons:bell',
369
+
'notifications',
370
+
'heroicons:bell-solid'
371
+
)}
372
+
{@render appButton(
373
+
() => (isSettingsOpen = true),
374
+
'heroicons:cog-6-tooth',
375
+
'settings',
376
+
'heroicons:cog-6-tooth-solid'
377
+
)}
373
378
</div>
374
379
375
380
<!-- <hr