mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-12-18 10:41:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

Restyle settings sheet

Browse source
This commit is contained in:
Lim Chee Aun 2023-01-17 17:58:04 +08:00
parent d0880f5c56
commit a87b95ed18
2 changed files with 228 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/pages/settings.css
View file

@ -1,12 +1,28 @@
#settings-container {
background-color: var(--bg-faded-color);
}
#settings-container h2 { #settings-container h2 {
font-size: 0.9em; font-size: 85%;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-insignificant-color); color: var(--text-insignificant-color);
font-weight: normal;
} }
#settings-container h2 ~ h2 { #settings-container h2 ~ h2 {
margin-top: 2em; margin-top: 2em;
} }
#settings-container :is(section, .section) {
background-color: var(--bg-color);
margin: 0 -16px;
padding: 8px 16px;
border-top: var(--hairline-width) solid var(--outline-color);
border-bottom: var(--hairline-width) solid var(--outline-color);
}
#settings-container :is(section, .section) > li + li {
border-top: var(--hairline-width) solid var(--outline-color);
}
#settings-container ul { #settings-container ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -82,3 +98,10 @@
#settings-container .radio-group label:has(input:checked) input:checked + span { #settings-container .radio-group label:has(input:checked) input:checked + span {
color: inherit; color: inherit;
} }
@media (min-width: 40em) {
#settings-container :is(section, .section) {
margin-inline: 0;
border-radius: 8px;
}
}

24
src/pages/settings.jsx
View file

@ -33,6 +33,7 @@ function Settings({ onClose }) {
<Icon icon="x" alt="Close" /> <Icon icon="x" alt="Close" />
</button> */} </button> */}
<h2>Accounts</h2> <h2>Accounts</h2>
<section>
<ul class="accounts-list"> <ul class="accounts-list">
{accounts.map((account, i) => { {accounts.map((account, i) => {
const isCurrent = account.info.id === currentAccount; const isCurrent = account.info.id === currentAccount;
@ -127,7 +128,14 @@ function Settings({ onClose }) {
Add new account Add new account
</a> </a>
</p> </p>
<h2>Theme</h2> </section>
<h2>Settings</h2>
<ul class="section">
<li>
<div>
<label>Appearance</label>
</div>
<div>
<form <form
ref={themeFormRef} ref={themeFormRef}
onInput={(e) => { onInput={(e) => {
@ -186,7 +194,9 @@ function Settings({ onClose }) {
</label> </label>
</div> </div>
</form> </form>
<h2>Settings</h2> </div>
</li>
<li>
<label> <label>
<input <input
type="checkbox" type="checkbox"
@ -197,8 +207,11 @@ function Settings({ onClose }) {
/>{' '} />{' '}
Boosts carousel (experimental) Boosts carousel (experimental)
</label> </label>
</li>
</ul>
<h2>Hidden features</h2> <h2>Hidden features</h2>
<p> <section>
<div>
<button <button
type="button" type="button"
class="light" class="light"
@ -209,8 +222,10 @@ function Settings({ onClose }) {
> >
Unsent drafts Unsent drafts
</button> </button>
</p> </div>
</section>
<h2>About</h2> <h2>About</h2>
<section>
<p> <p>
<a href="https://github.com/cheeaun/phanpy" target="_blank"> <a href="https://github.com/cheeaun/phanpy" target="_blank">
Built Built
@ -245,6 +260,7 @@ function Settings({ onClose }) {
)} )}
</p> </p>
)} )}
</section>
</main> </main>
</div> </div>
); );