simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix/Beautify the menus in Settings

Browse source
This commit is contained in:
Lim Chee Aun 2023-02-28 17:12:17 +08:00
parent dd1cd56a87
commit ba2aa18843
3 changed files with 97 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/icon.jsx
View file

@ -62,6 +62,7 @@ const ICONS = {
history: 'mingcute:history-line', history: 'mingcute:history-line',
share: 'mingcute:share-2-line', share: 'mingcute:share-2-line',
sparkles: 'mingcute:sparkles-line', sparkles: 'mingcute:sparkles-line',
exit: 'mingcute:exit-line',
}; };
const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js'); const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');

20
src/pages/settings.css
View file

@ -12,7 +12,7 @@
margin-top: 2em; margin-top: 2em;
} }
#settings-container :is(section, .section) { #settings-container section {
background-color: var(--bg-color); background-color: var(--bg-color);
margin: 0; margin: 0;
padding: 8px 16px; padding: 8px 16px;
@ -20,16 +20,16 @@
border-bottom: var(--hairline-width) solid var(--outline-color); border-bottom: var(--hairline-width) solid var(--outline-color);
border-radius: 8px; border-radius: 8px;
} }
#settings-container :is(section, .section) > li:last-child { #settings-container section ul > li:last-child {
border-bottom: none; border-bottom: none;
} }
#settings-container ul { #settings-container section > ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
#settings-container ul:not([role='menu']) > li { #settings-container section > ul > li {
padding: 8px 0 16px; padding: 8px 0 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -37,26 +37,26 @@
flex-wrap: wrap; flex-wrap: wrap;
border-bottom: var(--hairline-width) solid var(--outline-color); border-bottom: var(--hairline-width) solid var(--outline-color);
} }
#settings-container ul:not([role='menu']) > li .current { #settings-container section > ul > li .current {
margin-right: 8px; margin-right: 8px;
color: var(--green-color); color: var(--green-color);
opacity: 0.1; opacity: 0.1;
} }
#settings-container ul:not([role='menu']) > li .current.is-current { #settings-container section > ul > li .current.is-current {
opacity: 1; opacity: 1;
} }
#settings-container ul:not([role='menu']) > li .current.is-current + .avatar { #settings-container section > ul > li .current.is-current + .avatar {
box-shadow: 0 0 0 1.5px var(--green-color), 0 0 8px var(--green-color); box-shadow: 0 0 0 1.5px var(--green-color), 0 0 8px var(--green-color);
} }
#settings-container ul:not([role='menu']) > li > div { #settings-container section > ul > li > div {
flex-grow: 1; flex-grow: 1;
max-width: 100%; max-width: 100%;
} }
#settings-container ul:not([role='menu']) > li > div.actions { #settings-container section > ul > li > div.actions {
flex-basis: fit-content; flex-basis: fit-content;
margin-top: 8px; margin-top: 8px;
} }
#settings-container ul:not([role='menu']) > li > div:last-child { #settings-container section > ul > li > div:last-child {
text-align: right; text-align: right;
} }
#settings-container div, #settings-container div,

10
src/pages/settings.jsx
View file

@ -119,7 +119,8 @@ function Settings({ onClose }) {
setCurrentDefault(i); setCurrentDefault(i);
}} }}
> >
Set as default <Icon icon="check-circle" />
<span>Set as default</span>
</MenuItem> </MenuItem>
)} )}
<MenuItem <MenuItem
@ -133,7 +134,8 @@ function Settings({ onClose }) {
location.href = '/'; location.href = '/';
}} }}
> >
Log out <Icon icon="exit" />
<span>Log out</span>
</MenuItem> </MenuItem>
</Menu> </Menu>
</div> </div>
@ -156,7 +158,8 @@ function Settings({ onClose }) {
</p> </p>
</section> </section>
<h2>Settings</h2> <h2>Settings</h2>
<ul class="section"> <section>
<ul>
<li> <li>
<div> <div>
<label>Appearance</label> <label>Appearance</label>
@ -238,6 +241,7 @@ function Settings({ onClose }) {
</label> </label>
</li> </li>
</ul> </ul>
</section>
<h2>Hidden features</h2> <h2>Hidden features</h2>
<section> <section>
<div> <div>