mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Make the ThemeToggle look decent, unhide it

next-virtuoso-proof
Alex Gleason 2022-04-10 13:38:08 -05:00
rodzic 04e3b91c29
commit f9d01dab0a
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
3 zmienionych plików z 9 dodań i 8 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
app/soapbox/features/ui/components/navbar.tsx
Wyświetl plik

@ -68,9 +68,7 @@ const Navbar = () => {
</div> </div>
<div className='absolute inset-y-0 right-0 flex items-center pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0 space-x-3'> <div className='absolute inset-y-0 right-0 flex items-center pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0 space-x-3'>
{settings.get('isDeveloper') && (
<ThemeToggle /> <ThemeToggle />
)}
{account ? ( {account ? (
<div className='hidden relative lg:flex items-center'> <div className='hidden relative lg:flex items-center'>

4
app/soapbox/features/ui/components/theme_toggle.tsx
Wyświetl plik

@ -37,8 +37,8 @@ function ThemeToggle({ showLabel }: IThemeToggle) {
id={id} id={id}
checked={themeMode === 'light'} checked={themeMode === 'light'}
icons={{ icons={{
checked: <Icon src={require('@tabler/icons/icons/sun.svg')} />, checked: <Icon className='w-4 h-4' src={require('@tabler/icons/icons/sun.svg')} />,
unchecked: <Icon src={require('@tabler/icons/icons/moon.svg')} />, unchecked: <Icon className='w-4 h-4' src={require('@tabler/icons/icons/moon.svg')} />,
}} }}
onChange={onToggle} onChange={onToggle}
/> />

9
app/styles/components/theme-toggle.scss
Wyświetl plik

@ -27,8 +27,11 @@
} }
} }
.svg-icon { .react-toggle-track {
width: 18px; @apply dark:bg-slate-600;
height: 18px; }
.react-toggle-thumb {
@apply dark:bg-slate-900 dark:border-slate-800;
} }
} }