appview-less bluesky client
27
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: refactor and improve post composer styling

dusk 5eb5dcce 46b29c37

+52 -25
+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
··· 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