Fix/Beautify the menus in Settings

src/components/icon.jsx

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

src/pages/settings.css

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

src/pages/settings.jsx

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