mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-24 02:05:39 +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 {
font-size: 0.9em;
font-size: 85%;
text-transform: uppercase;
color: var(--text-insignificant-color);
font-weight: normal;
}
#settings-container h2 ~ h2 {
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 {
margin: 0;
padding: 0;
@ -82,3 +98,10 @@
#settings-container .radio-group label:has(input:checked) input:checked + span {
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" />
</button> */}
<h2>Accounts</h2>
<section>
<ul class="accounts-list">
{accounts.map((account, i) => {
const isCurrent = account.info.id === currentAccount;
@ -127,7 +128,14 @@ function Settings({ onClose }) {
Add new account
</a>
</p>
<h2>Theme</h2>
</section>
<h2>Settings</h2>
<ul class="section">
<li>
<div>
<label>Appearance</label>
</div>
<div>
<form
ref={themeFormRef}
onInput={(e) => {
@ -186,7 +194,9 @@ function Settings({ onClose }) {
</label>
</div>
</form>
<h2>Settings</h2>
</div>
</li>
<li>
<label>
<input
type="checkbox"
@ -197,8 +207,11 @@ function Settings({ onClose }) {
/>{' '}
Boosts carousel (experimental)
</label>
</li>
</ul>
<h2>Hidden features</h2>
<p>
<section>
<div>
<button
type="button"
class="light"
@ -209,8 +222,10 @@ function Settings({ onClose }) {
>
Unsent drafts
</button>
</p>
</div>
</section>
<h2>About</h2>
<section>
<p>
<a href="https://github.com/cheeaun/phanpy" target="_blank">
Built
@ -245,6 +260,7 @@ function Settings({ onClose }) {
)}
</p>
)}
</section>
</main>
</div>
);