impr(account page): add icons to titles

also slightly cleans up the css

frontend/src/html/pages/account.html

@@ -372,7 +372,10 @@
 
     <div class="group presetFilterButtons hidden">
       <div class="buttonsAndTitle">
-        <div class="title">filter presets</div>
+        <div class="title">
+          <i class="fas fa-sliders-h"></i>
+          filter presets
+        </div>
         <div class="buttons filterBtns" style="grid-column: 1/3"></div>
       </div>
     </div>
@@ -385,7 +388,10 @@
         set filters to current settings
       </div> -->
       <div class="buttonsAndTitle" style="grid-column: 1/3">
-        <div class="title">filters</div>
+        <div class="title">
+          <i class="fas fa-filter"></i>
+          filters
+        </div>
         <div class="buttons">
           <button class="allFilters">all</button>
           <button class="currentConfigFilter">current settings</button>
@@ -409,13 +415,19 @@
     </div>
     <div class="group filterButtons" style="display: none">
       <div class="buttonsAndTitle" style="grid-column: 1/-1">
-        <div class="title">advanced filters</div>
+        <div class="title">
+          <i class="fas fa-tools"></i>
+          advanced filters
+        </div>
         <div class="buttons">
           <button class="noFilters">clear filters</button>
         </div>
       </div>
       <div class="buttonsAndTitle">
-        <div class="title">difficulty</div>
+        <div class="title">
+          <i class="fas fa-star"></i>
+          difficulty
+        </div>
         <div class="buttons filterGroup" group="difficulty">
           <button filter="normal">normal</button>
           <button filter="expert">expert</button>
@@ -423,14 +435,20 @@
         </div>
       </div>
       <div class="buttonsAndTitle">
-        <div class="title">personal best</div>
+        <div class="title">
+          <i class="fas fa-crown"></i>
+          personal best
+        </div>
         <div class="buttons filterGroup" group="pb">
           <button filter="no">no</button>
           <button filter="yes">yes</button>
         </div>
       </div>
       <div class="buttonsAndTitle">
-        <div class="title">mode</div>
+        <div class="title">
+          <i class="fas fa fa-bars"></i>
+          mode
+        </div>
         <div class="buttons filterGroup" group="mode">
           <button filter="words">words</button>
           <button filter="time">time</button>
@@ -440,7 +458,10 @@
         </div>
       </div>
       <div class="buttonsAndTitle">
-        <div class="title">quote length</div>
+        <div class="title">
+          <i class="fas fa-quote-right"></i>
+          quote length
+        </div>
         <div class="buttons filterGroup" group="quoteLength">
           <button filter="short">short</button>
           <button filter="medium">medium</button>
@@ -449,7 +470,10 @@
         </div>
       </div>
       <div class="buttonsAndTitle">
-        <div class="title">words</div>
+        <div class="title">
+          <i class="fas fa-font"></i>
+          words
+        </div>
         <div class="buttons filterGroup" group="words">
           <button filter="10">10</button>
           <button filter="25">25</button>
@@ -459,7 +483,10 @@
         </div>
       </div>
       <div class="buttonsAndTitle">
-        <div class="title">time</div>
+        <div class="title">
+          <i class="fas fa-clock"></i>
+          time
+        </div>
         <div class="buttons filterGroup" group="time">
           <button filter="15">15</button>
           <button filter="30">30</button>
@@ -469,14 +496,20 @@
         </div>
       </div>
       <div class="buttonsAndTitle">
-        <div class="title">punctuation</div>
+        <div class="title">
+          <i class="fas fa-at"></i>
+          punctuation
+        </div>
         <div class="buttons filterGroup" group="punctuation">
           <button filter="on">on</button>
           <button filter="off">off</button>
         </div>
       </div>
       <div class="buttonsAndTitle">
-        <div class="title">numbers</div>
+        <div class="title">
+          <i class="fas fa-hashtag"></i>
+          numbers
+        </div>
         <div class="buttons filterGroup" group="numbers">
           <button filter="on">on</button>
           <button filter="off">off</button>
@@ -484,15 +517,24 @@
       </div>
       <div class="tripleSelectsColumn">
         <div class="buttonsAndTitle tags">
-          <div class="title">tags</div>
+          <div class="title">
+            <i class="fas fa-tag"></i>
+            tags
+          </div>
           <div class="select filterGroup" group="tags"></div>
         </div>
         <div class="buttonsAndTitle funbox">
-          <div class="title">funbox</div>
+          <div class="title">
+            <i class="fas fa-gamepad"></i>
+            funbox
+          </div>
           <div class="select filterGroup" group="funbox"></div>
         </div>
         <div class="buttonsAndTitle languages">
-          <div class="title">language</div>
+          <div class="title">
+            <i class="fas fa-globe-americas"></i>
+            language
+          </div>
           <div class="select filterGroup" group="language"></div>
         </div>
       </div>

frontend/src/styles/account.scss

@@ -60,21 +60,6 @@
     margin-top: 1rem;
   }
 
-  .topFilters .buttons {
-    display: flex;
-    justify-content: space-evenly;
-    gap: 1rem;
-    button {
-      width: 100%;
-    }
-  }
-
-  .presetFilterButtons .buttons {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-    gap: 1rem;
-  }
-
   .miniResultChartWrapper {
     z-index: 999;
     display: none;
@@ -395,45 +380,71 @@
   .group.history .resultEditTagsButton {
     animation: none;
   }
-}
-
-.pageAccount {
-  .group.presetFilterButtons {
-    .buttons.filterBtns {
-      .filterPresets {
-        display: grid;
-        grid-auto-columns: 1fr;
-        grid-auto-flow: column;
-        grid-template-columns: 1fr auto;
-        width: 100%;
-        gap: 0.5rem;
-      }
-    }
-  }
-
-  .group.filterButtons {
-    gap: 1rem;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-
-    .tripleSelectsColumn {
-      grid-column: 1/-1;
-      display: flex;
-      gap: 1rem;
-      flex-wrap: wrap;
-      .buttonsAndTitle {
-        flex-grow: 1;
-        min-width: 20rem;
-      }
-    }
 
+  .group {
     .buttonsAndTitle {
       height: fit-content;
-      height: -moz-fit-content;
       display: grid;
-      gap: 0.25rem;
+      gap: 0.5rem;
       color: var(--sub-color);
-      font-size: 1rem;
+
+      .title {
+        display: flex;
+        align-items: baseline;
+        .fab,
+        .fas,
+        .far {
+          margin-right: 0.5em;
+        }
+      }
+    }
+
+    &.presetFilterButtons {
+      .buttons {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+        gap: 1rem;
+        .filterPresets {
+          display: grid;
+          grid-template-columns: 1fr auto;
+          gap: 0.5rem;
+        }
+      }
+    }
+
+    &.topFilters {
+      .buttons {
+        display: flex;
+        justify-content: space-evenly;
+        gap: 1rem;
+        button {
+          width: 100%;
+        }
+      }
+    }
+
+    //advanced filters
+    &.filterButtons {
+      gap: 1rem;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+
+      .buttons {
+        display: grid;
+        grid-auto-flow: column;
+        gap: 0.5rem;
+      }
+
+      .tripleSelectsColumn {
+        grid-column: 1/-1;
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+        .buttonsAndTitle {
+          flex-grow: 1;
+          min-width: 20rem;
+        }
+      }
 
       &.testDate .buttons,
       &.languages .buttons,
@@ -444,22 +455,6 @@
         grid-auto-flow: unset;
       }
     }
-
-    .buttons {
-      display: grid;
-      grid-auto-flow: column;
-      gap: 1rem;
-    }
-  }
-
-  .profile {
-    .details {
-      padding-right: 3rem;
-    }
-    .pbsTime,
-    .pbsWords {
-      padding-right: 2rem;
-    }
   }
 }
 

frontend/src/styles/media-queries-blue.scss

@@ -80,6 +80,9 @@
     .group.history table tbody td:nth-child(7) {
       display: none;
     }
+    .group.filterButtons {
+      grid-template-columns: 1fr;
+    }
   }
   .pageSettings {
     .section {