diff --git a/src/pages/settings.css b/src/pages/settings.css index f83787b0..9bf450ba 100644 --- a/src/pages/settings.css +++ b/src/pages/settings.css @@ -4,18 +4,23 @@ animation: fade-in 0.2s ease-out; max-height: 100vh; overflow: auto; + position: relative; } #settings-container .close-button { - float: right; + position: absolute; + top: 0; + right: 0; } #settings-container h2 { - margin: 3em 0 1em; font-size: .9em; text-transform: uppercase; color: var(--text-insignificant-color); } +#settings-container h2 ~ h2 { + margin-top: 2em; +} #settings-container ul { margin: 0; diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx index 7a6aa3a0..3205b842 100644 --- a/src/pages/settings.jsx +++ b/src/pages/settings.jsx @@ -24,163 +24,168 @@ export default ({ onClose }) => { return (
-
- -
-
-

Accounts

-
+ + ); + })} + + {moreThanOneAccount && ( +

+ + Note: Default account will always be used for first load. + Switched accounts will persist during the session. +

-
-
-

Theme

-
{ - console.log(e); - e.preventDefault(); - const formData = new FormData(themeFormRef.current); - const theme = formData.get('theme'); - const html = document.documentElement; + )} +

+ + Add new account + +

+

Theme

+ { + console.log(e); + e.preventDefault(); + const formData = new FormData(themeFormRef.current); + const theme = formData.get('theme'); + const html = document.documentElement; - if (theme === 'auto') { - html.classList.remove('is-light', 'is-dark'); - } else { - html.classList.toggle('is-light', theme === 'light'); - html.classList.toggle('is-dark', theme === 'dark'); - } - document - .querySelector('meta[name="color-scheme"]') - .setAttribute('content', theme); + if (theme === 'auto') { + html.classList.remove('is-light', 'is-dark'); + } else { + html.classList.toggle('is-light', theme === 'light'); + html.classList.toggle('is-dark', theme === 'dark'); + } + document + .querySelector('meta[name="color-scheme"]') + .setAttribute('content', theme); - if (theme === 'auto') { - store.local.del('theme'); - } else { - store.local.set('theme', theme); - } - }} - > -
- - - -
-
-
+ if (theme === 'auto') { + store.local.del('theme'); + } else { + store.local.set('theme', theme); + } + }} + > +
+ + + +
+ +

About

+

+ + Built + {' '} + by{' '} + + @cheeaun + + . +

); };