💫 Updating animations and transitions

components/history.vue

@@ -311,6 +311,10 @@ ol li {
   padding: 16px 0;
 }
 
+.bg-color {
+  background-color: var(--bg-color);
+}
+
 @media (max-width: 720px) {
   .virtual-list.filled {
     min-height: 320px;

components/modal.vue

@@ -45,11 +45,11 @@
   flex-grow: 1;
   flex-direction: column;
   margin: 8px;
-  padding: 12px;
+  padding: 16px;
   transition: all 0.2s ease;
   background-color: var(--bg-color);
   border-radius: 8px;
-  box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
+  box-shadow: 0px 16px 70px rgba(0, 0, 0, 0.5);
 }
 
 /*

components/settings/swatch.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="color" :data-color="color" :class="{ active: active }" v-tooltip="{ content: name || 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>
@@ -15,6 +20,7 @@
   border-radius: 100%;
   border: 3px solid var(--bg-dark-color);
   cursor: pointer;
+  transition: all 0.2s ease-in-out;
 
   &.fg {
     color: var(--act-color);