chore(refactor): modern UI

components/ui/accent-mode-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <li>
+  <div>
     <label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
     <div class="space-x-2">
       <span
@@ -13,7 +13,7 @@
         <i class="material-icons">lens</i>
       </span>
     </div>
-  </li>
+  </div>
 </template>
 
 <script>

components/ui/ace-editor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="show-if-initialized" :class="{ initialized }">
-    <pre ref="editor"></pre>
+    <pre ref="editor" :class="styles"></pre>
   </div>
 </template>
 
@@ -48,6 +48,10 @@ export default {
       type: Object,
       default: {},
     },
+    styles: {
+      type: String,
+      default: "",
+    },
   },
 
   data() {

components/ui/autocomplete.vue

@@ -12,6 +12,7 @@
       :spellcheck="spellcheck"
       :autocapitalize="autocapitalize"
       :autocorrect="spellcheck"
+      :class="styles"
     />
     <ul
       class="suggestions"
@@ -108,6 +109,11 @@ export default {
       default: "",
       required: false,
     },
+
+    styles: {
+      type: String,
+      default: "",
+    },
   },
 
   watch: {

components/ui/color-mode-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <li>
+  <div>
     <label>
       <ColorScheme placeholder="..." tag="span">
         {{ $t("background") }}:
@@ -24,7 +24,7 @@
         <i class="material-icons">{{ getIcon(color) }}</i>
       </span>
     </div>
-  </li>
+  </div>
 </template>
 
 <script>

components/ui/js-editor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="show-if-initialized" :class="{ initialized }">
-    <pre ref="editor"></pre>
+    <pre ref="editor" :class="styles"></pre>
   </div>
 </template>
 
@@ -40,6 +40,10 @@ export default {
       type: Object,
       default: {},
     },
+    styles: {
+      type: String,
+      default: "",
+    },
   },
 
   data() {

components/ui/modal.vue

@@ -49,7 +49,6 @@
   @apply flex-1;
   @apply flex-col;
   @apply m-2;
-  @apply p-2;
   @apply transition;
   @apply ease-in-out;
   @apply duration-200;
@@ -58,13 +57,21 @@
   @apply shadow-2xl;
 
   max-height: calc(100vh - 128px);
-  max-width: 720px;
+  max-width: 640px;
+}
+
+.modal-header {
+  @apply pl-2;
 }
 
 .modal-body {
   @apply overflow-auto;
 }
 
+.modal-footer {
+  @apply p-2;
+}
+
 /*
   * The following styles are auto-applied to elements with
   * transition="modal" when their visibility is toggled

components/ui/pw-toggle.vue

@@ -1,9 +1,9 @@
 <template>
-  <div @click="toggle()">
+  <div @click="toggle()" class="inline-block cursor-pointer">
     <label class="toggle" :class="{ on: on }" ref="toggle">
       <span class="handle"></span>
     </label>
-    <label class="caption">
+    <label class="pl-0 align-middle cursor-pointer">
       <slot />
     </label>
   </div>
@@ -21,24 +21,13 @@ $height: 16px;
 $handleSpacing: 4px;
 $transition: all 0.2s ease-in-out;
 
-div {
-  @apply inline-block;
-  @apply cursor-pointer;
-}
-
-label.caption {
-  @apply align-middle;
-  @apply cursor-pointer;
-}
-
-label.toggle {
+.toggle {
   @apply relative;
   @apply inline-block;
   @apply align-middle;
   @apply rounded-full;
   @apply p-0;
-  @apply my-4;
-  @apply mx-2;
+  @apply m-4;
   @apply cursor-pointer;
 
   width: $width;

components/ui/tabs.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tabs-wrapper">
     <div class="tabs">
-      <ul>
+      <ul :class="styles">
         <li
           v-for="(tab, index) in tabs"
           :class="{ 'is-active': tab.isActive }"
@@ -90,6 +90,13 @@
 
 <script>
 export default {
+  props: {
+    styles: {
+      type: String,
+      default: "",
+    },
+  },
+
   data() {
     return {
       tabs: [],