atmosphere explorer
0
fork

Configure Feed

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

restyle settings

Juliet 56893382 65432b4c

+45 -29
+10 -11
src/components/theme.tsx
··· 8 8 9 9 export const ThemeSelection = () => { 10 10 const [theme, setTheme] = createSignal( 11 - localStorage.getItem("theme") === null ? "system" 11 + localStorage.getItem("theme") === null ? "auto" 12 12 : localStorage.theme === "dark" ? "dark" 13 13 : "light", 14 14 ); ··· 18 18 document.documentElement.classList.toggle( 19 19 "dark", 20 20 newTheme === "dark" || 21 - (newTheme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches), 21 + (newTheme === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches), 22 22 ); 23 - if (newTheme === "system") localStorage.removeItem("theme"); 23 + if (newTheme === "auto") localStorage.removeItem("theme"); 24 24 else localStorage.theme = newTheme; 25 25 }; 26 26 27 - const ThemeOption = (props: { theme: string; icon: string; label: string }) => { 27 + const ThemeOption = (props: { theme: string; label: string }) => { 28 28 return ( 29 29 <button 30 30 classList={{ 31 - "flex items-center gap-2 rounded-xl border px-3 py-2": true, 31 + "flex items-center min-w-21 justify-center rounded-xl border px-3 py-2": true, 32 32 "bg-neutral-200/60 border-neutral-300 dark:border-neutral-500 dark:bg-neutral-700": 33 33 theme() === props.theme, 34 34 "border-neutral-200 dark:border-neutral-600 hover:bg-neutral-200/30 dark:hover:bg-neutral-800": ··· 36 36 }} 37 37 onclick={() => updateTheme(props.theme)} 38 38 > 39 - <span class={"iconify " + props.icon}></span> 40 - <span>{props.label}</span> 39 + {props.label} 41 40 </button> 42 41 ); 43 42 }; 44 43 45 44 return ( 46 - <div class="flex flex-col gap-0.5"> 45 + <div class="flex flex-col gap-1"> 47 46 <label class="select-none">Theme</label> 48 47 <div class="flex gap-2"> 49 - <ThemeOption theme="system" icon="lucide--monitor" label="System" /> 50 - <ThemeOption theme="light" icon="lucide--sun" label="Light" /> 51 - <ThemeOption theme="dark" icon="lucide--moon" label="Dark" /> 48 + <ThemeOption theme="auto" label="Auto" /> 49 + <ThemeOption theme="light" label="Light" /> 50 + <ThemeOption theme="dark" label="Dark" /> 52 51 </div> 53 52 </div> 54 53 );
+35 -18
src/views/settings.tsx
··· 6 6 7 7 const Settings = () => { 8 8 return ( 9 - <div class="flex w-full flex-col gap-3 px-2"> 10 - <div class="flex items-center gap-1 font-semibold"> 11 - <span>Settings</span> 12 - </div> 9 + <div class="flex w-full flex-col gap-2 px-2"> 10 + <div class="text-lg font-semibold">Settings</div> 13 11 <div class="flex flex-col gap-3"> 14 - <div class="flex flex-col gap-0.5"> 12 + <div class="flex flex-col gap-1"> 15 13 <label for="plcDirectory" class="select-none"> 16 14 PLC Directory 17 15 </label> ··· 26 24 /> 27 25 </div> 28 26 <ThemeSelection /> 29 - <div class="flex justify-between"> 30 - <div class="flex items-center gap-1"> 31 - <input 32 - id="disableMedia" 33 - type="checkbox" 34 - checked={localStorage.hideMedia === "true"} 35 - onChange={(e) => { 36 - localStorage.hideMedia = e.currentTarget.checked; 37 - setHideMedia(e.currentTarget.checked); 27 + <div class="flex flex-col gap-1"> 28 + <label class="select-none">Blob media preview</label> 29 + <div class="flex gap-2"> 30 + <button 31 + classList={{ 32 + "flex min-w-21 items-center justify-center gap-1 rounded-xl border px-3 py-2": true, 33 + "border-neutral-300 bg-neutral-200/60 dark:border-neutral-500 dark:bg-neutral-700": 34 + !hideMedia(), 35 + "border-neutral-200 hover:bg-neutral-200/30 dark:border-neutral-600 dark:hover:bg-neutral-800": 36 + hideMedia(), 37 + }} 38 + onClick={() => { 39 + localStorage.hideMedia = "false"; 40 + setHideMedia(false); 41 + }} 42 + > 43 + Show 44 + </button> 45 + <button 46 + classList={{ 47 + "flex min-w-21 items-center justify-center gap-1 rounded-xl border px-3 py-2": true, 48 + "border-neutral-300 bg-neutral-200/60 dark:border-neutral-500 dark:bg-neutral-700": 49 + hideMedia(), 50 + "border-neutral-200 hover:bg-neutral-200/30 dark:border-neutral-600 dark:hover:bg-neutral-800": 51 + !hideMedia(), 38 52 }} 39 - /> 40 - <label for="disableMedia" class="select-none"> 41 - Hide media embeds 42 - </label> 53 + onClick={() => { 54 + localStorage.hideMedia = "true"; 55 + setHideMedia(true); 56 + }} 57 + > 58 + Hide 59 + </button> 43 60 </div> 44 61 </div> 45 62 </div>