atmosphere explorer
0
fork

Configure Feed

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

move theme selection to settings page

Juliet 1253184c 7950db0e

+17 -11
+13 -8
src/components/theme.tsx
··· 24 24 else localStorage.theme = newTheme; 25 25 }; 26 26 27 - const ThemeButton = (props: { theme: string; icon: string }) => { 27 + const ThemeOption = (props: { theme: string; icon: string; label: string }) => { 28 28 return ( 29 29 <button 30 30 classList={{ 31 - "p-1.5 flex items-center rounded-full border-[0.5px]": true, 32 - "bg-neutral-200/60 border-neutral-300/60 dark:border-neutral-500/60 dark:bg-neutral-600": 31 + "flex items-center gap-2 rounded-xl border px-3 py-2": true, 32 + "bg-neutral-200/60 border-neutral-300 dark:border-neutral-500 dark:bg-neutral-700": 33 33 theme() === props.theme, 34 - "border-transparent": theme() !== props.theme, 34 + "border-neutral-200 dark:border-neutral-600 hover:bg-neutral-100 dark:hover:bg-neutral-800": 35 + theme() !== props.theme, 35 36 }} 36 37 onclick={() => updateTheme(props.theme)} 37 38 > 38 39 <span class={"iconify " + props.icon}></span> 40 + <span>{props.label}</span> 39 41 </button> 40 42 ); 41 43 }; 42 44 43 45 return ( 44 - <div class="dark:bg-dark-100 dark:inset-shadow-dark-200 mt-2 flex items-center justify-between gap-1 rounded-full border-[0.5px] border-neutral-200/60 bg-white p-1 text-base text-neutral-800 inset-shadow-sm dark:border-neutral-600 dark:text-neutral-300"> 45 - <ThemeButton theme="system" icon="lucide--monitor" /> 46 - <ThemeButton theme="light" icon="lucide--sun" /> 47 - <ThemeButton theme="dark" icon="lucide--moon" /> 46 + <div class="flex flex-col gap-0.5"> 47 + <label class="select-none">Theme</label> 48 + <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" /> 52 + </div> 48 53 </div> 49 54 ); 50 55 };
+1 -2
src/layout.tsx
··· 9 9 import { NavBar } from "./components/navbar.jsx"; 10 10 import { NotificationContainer } from "./components/notification.jsx"; 11 11 import { Search, SearchButton, showSearch } from "./components/search.jsx"; 12 - import { themeEvent, ThemeSelection } from "./components/theme.jsx"; 12 + import { themeEvent } from "./components/theme.jsx"; 13 13 import { resolveHandle } from "./utils/api.js"; 14 14 15 15 export const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1; ··· 161 161 newTab 162 162 external 163 163 /> 164 - <ThemeSelection /> 165 164 </DropdownMenu> 166 165 </MenuProvider> 167 166 </div>
+3 -1
src/views/settings.tsx
··· 1 1 import { createSignal } from "solid-js"; 2 2 import { TextInput } from "../components/text-input.jsx"; 3 + import { ThemeSelection } from "../components/theme.jsx"; 3 4 4 5 export const [hideMedia, setHideMedia] = createSignal(localStorage.hideMedia === "true"); 5 6 ··· 9 10 <div class="flex items-center gap-1 font-semibold"> 10 11 <span>Settings</span> 11 12 </div> 12 - <div class="flex flex-col gap-2"> 13 + <div class="flex flex-col gap-3"> 13 14 <div class="flex flex-col gap-0.5"> 14 15 <label for="plcDirectory" class="select-none"> 15 16 PLC Directory ··· 24 25 }} 25 26 /> 26 27 </div> 28 + <ThemeSelection /> 27 29 <div class="flex justify-between"> 28 30 <div class="flex items-center gap-1"> 29 31 <input