🎨 Various UI tweaks

pages/index.vue

@@ -728,14 +728,17 @@
           </ul>
         </div>
         <div slot="footer">
-          <ul>
-            <li>
-              <button class="icon" @click="handleImport">
-                <i class="material-icons">get_app</i>
-                <span>{{ $t("import") }}</span>
+          <div class="flex-wrap">
+            <span></span>
+            <span>
+              <button class="icon" @click="showModal = false">
+                Cancel
               </button>
-            </li>
-          </ul>
+              <button class="icon primary" @click="handleImport">
+                {{ $t("import") }}
+              </button>
+            </span>
+          </div>
         </div>
       </pw-modal>
 

pages/settings.vue

@@ -156,7 +156,7 @@ export default {
       //        set the relevant values.
       themes: [
         {
-          color: "#121212",
+          color: "#202124",
           name: "Kinda Dark",
           class: "",
           aceEditor: "twilight"
@@ -273,7 +273,7 @@ export default {
       document.documentElement.style.setProperty("--ac-color", color);
       document.documentElement.style.setProperty(
         "--act-color",
-        vibrant ? "rgba(18, 18, 18, 1)" : "rgba(255, 255, 255, 1)"
+        vibrant ? "rgba(32, 33, 36, 1)" : "rgba(255, 255, 255, 1)"
       );
       this.applySetting("THEME_COLOR", color.toUpperCase());
       this.applySetting("THEME_COLOR_VIBRANT", vibrant);