🎨 Redesigned color swatches

assets/css/styles.scss

@@ -352,6 +352,8 @@ h3 {
       padding: 4px;
       border-radius: 8px;
       box-shadow: 0 5px 30px rgba(black, 0.1);
+      max-height: 256px;
+      overflow: auto;
     }
 
     .popover-arrow {

components/settings/swatch.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="color" :data-color="color">
+  <div class="color" :data-color="color" :class="{ active: active }" v-tooltip="{ content: name || color }">
     <span :style="{ backgroundColor: color }" class="preview">
       <i v-if="active" class="material-icons activeTick">done</i>
     </span>
-    {{ name || color }}
   </div>
 </template>
 
@@ -12,23 +11,27 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 16px 0 4px;
+  margin: 8px;
-  margin: 4px;
+  border-radius: 100%;
-  background-color: var(--bg-dark-color);
+  border: 3px solid var(--bg-dark-color);
-  color: var(--fg-color);
-  border-radius: 20px;
   cursor: pointer;
-  height: 40px;
+
+  &.fg {
+    color: var(--act-color);
+  }
 
   &.active {
-    background-color: var(--bg-dark-color);
+    border: 3px solid var(--ac-color);
+  }
+
+  &.fg.active {
+    border: 3px solid var(--fg-color);
   }
 
   .preview {
     vertical-align: middle;
     display: inline-block;
     border-radius: 100%;
-    margin-right: 8px;
     padding: 16px;
     position: relative;
 
@@ -37,16 +40,9 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      color: #ffffff;
     }
   }
 }
-
-.color.vibrant {
-  .preview .activeTick {
-    color: var(--act-color);
-  }
-}
 </style>
 
 <script>

pages/settings.vue

@@ -3,7 +3,7 @@
     <pw-section class="cyan" label="Theme" ref="theme">
       <ul>
         <li>
-          <h3 class="title">{{ $t("background") }}</h3>
+          <label>{{ $t("background") }}</label>
           <div class="backgrounds">
             <span
               :key="theme.class"
@@ -15,6 +15,7 @@
                 :class="{ vibrant: theme.vibrant }"
                 :color="theme.color"
                 :name="theme.name"
+                class="bg"
               ></swatch>
             </span>
           </div>
@@ -22,7 +23,7 @@
       </ul>
       <ul>
         <li>
-          <h3 class="title">{{ $t("color") }}</h3>
+          <label>{{ $t("color") }}</label>
           <div class="colors">
             <span
               :key="entry.color"
@@ -34,6 +35,7 @@
                 :class="{ vibrant: entry.vibrant }"
                 :color="entry.color"
                 :name="entry.name"
+                class="fg"
               />
             </span>
           </div>
@@ -41,7 +43,6 @@
       </ul>
       <ul>
         <li>
-          <h3 class="title">{{ $t("color") }}</h3>
           <span>
             <pw-toggle
               :on="settings.FRAME_COLORS_ENABLED"