refactor: settings page + ui components

components/smart/AccentModePicker.vue

@@ -1,26 +1,23 @@
 <template>
-  <div class="flex flex-col">
-    <label>{{ $t("color") }}: {{ capitalized(active) }}</label>
-    <div>
-      <!-- text-blue-400 -->
-      <!-- text-green-400 -->
-      <!-- text-teal-400 -->
-      <!-- text-indigo-400 -->
-      <!-- text-purple-400 -->
-      <!-- text-orange-400 -->
-      <!-- text-pink-400 -->
-      <!-- text-red-400 -->
-      <!-- text-yellow-400 -->
-      <ButtonSecondary
-        v-for="(color, index) of accentColors"
-        :key="`color-${index}`"
-        v-tippy="{ theme: 'tooltip' }"
-        :title="capitalized(color)"
-        :class="[`text-${color}-400`, { 'bg-primary': color === active }]"
-        icon="lens"
-        @click.native="setActiveColor(color)"
-      />
-    </div>
+  <div class="flex">
+    <!-- text-blue-400 -->
+    <!-- text-green-400 -->
+    <!-- text-teal-400 -->
+    <!-- text-indigo-400 -->
+    <!-- text-purple-400 -->
+    <!-- text-orange-400 -->
+    <!-- text-pink-400 -->
+    <!-- text-red-400 -->
+    <!-- text-yellow-400 -->
+    <ButtonSecondary
+      v-for="(color, index) of accentColors"
+      :key="`color-${index}`"
+      v-tippy="{ theme: 'tooltip' }"
+      :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
+      :class="[`text-${color}-400`, { 'bg-primary': color === active }]"
+      icon="lens"
+      @click.native="setActiveColor(color)"
+    />
   </div>
 </template>
 
@@ -49,15 +46,11 @@ export default {
       setLocalConfig("THEME_COLOR", color)
     },
   },
-
   methods: {
     setActiveColor(color) {
       document.documentElement.setAttribute("data-accent", color)
       this.active = color
     },
-    capitalized(color) {
-      return `${color.charAt(0).toUpperCase()}${color.slice(1)}`
-    },
   },
 }
 </script>

components/smart/AceEditor.vue

@@ -277,9 +277,6 @@ export default {
 
     .label {
       @apply p-2;
-
-      @apply ease-in-out;
-      @apply duration-150;
     }
 
     .siblings {

components/smart/AutoComplete.vue

@@ -200,9 +200,6 @@ export default {
     @apply mx-2;
     @apply left-0;
     @apply z-50;
-
-    @apply ease-in-out;
-    @apply duration-150;
     @apply shadow-lg;
 
     top: calc(100% - 8px);

components/smart/ChangeLanguage.vue

@@ -6,44 +6,26 @@
       trigger="click"
       theme="popover"
       arrow
-      interactive
       :animate-fill="false"
     >
       <template #trigger>
-        <ButtonSecondary
+        <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('choose_language')"
-          :label="$i18n.locales.find(({ code }) => code == $i18n.locale).name"
-        />
-        {{
-          $i18n.locales.find(({ code }) => code == $i18n.locale).country
+          :label="`${
+            $i18n.locales.find(({ code }) => code == $i18n.locale).country
             | formatCountry
-        }}
+          } ${$i18n.locales.find(({ code }) => code == $i18n.locale).name}`"
+        />
       </template>
-      <NuxtLink
+      <SmartItem
         v-for="locale in $i18n.locales.filter(
           ({ code }) => code !== $i18n.locale
         )"
         :key="locale.code"
-        class="
-          inline-flex
-          items-center
-          px-4
-          py-2
-          transition
-          rounded-lg
-          hover:bg-accentLight hover:text-secondaryDark
-          focus:bg-accentLight focus:text-secondaryDark focus:outline-none
-        "
-        :to="switchLocalePath(locale.code)"
-      >
-        <span class="mr-2 text-lg">
-          {{ locale.country | formatCountry }}
-        </span>
-        <span class="font-semibold">
-          {{ locale.name }}
-        </span>
-      </NuxtLink>
+        :to="switchLocalePath(locale.code).toString()"
+        :label="`${locale.country | formatCountry} ${locale.name}`"
+      />
     </tippy>
   </span>
 </template>

components/smart/ColorModePicker.vue

@@ -1,31 +1,17 @@
 <template>
-  <div class="flex flex-col">
-    <label>
-      <ColorScheme placeholder="..." tag="span">
-        {{ $t("background") }}:
-        {{
-          $colorMode.preference.charAt(0).toUpperCase() +
-          $colorMode.preference.slice(1)
-        }}
-        <span v-if="$colorMode.preference === 'system'">
-          ({{ $colorMode.value }} mode detected)
-        </span>
-      </ColorScheme>
-    </label>
-    <div>
-      <ButtonSecondary
-        v-for="(color, index) of colors"
-        :key="`color-${index}`"
-        v-tippy="{ theme: 'tooltip' }"
-        :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-        :class="[
-          { 'bg-primary': color === $colorMode.preference },
-          { 'text-accent hover:text-accent': color === $colorMode.value },
-        ]"
-        :icon="getIcon(color)"
-        @click.native="$colorMode.preference = color"
-      />
-    </div>
+  <div class="flex">
+    <ButtonSecondary
+      v-for="(color, index) of colors"
+      :key="`color-${index}`"
+      v-tippy="{ theme: 'tooltip' }"
+      :title="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
+      :class="[
+        { 'bg-primary': color === $colorMode.preference },
+        { 'text-accent hover:text-accent': color === $colorMode.value },
+      ]"
+      :icon="getIcon(color)"
+      @click.native="$colorMode.preference = color"
+    />
   </div>
 </template>
 

components/smart/DeletableChip.vue

@@ -21,8 +21,6 @@
   @apply text-secondary;
   @apply font-mono;
 
-  @apply ease-in-out;
-  @apply duration-150;
   @apply border border-divider;
 }
 

components/smart/Item.vue

@@ -16,24 +16,29 @@
     "
     :class="[
       { 'opacity-50 cursor-not-allowed': disabled },
+      { 'pointer-events-none': loading },
       { 'flex-1': label },
       { 'flex-row-reverse justify-end': reverse },
     ]"
     :disabled="disabled"
+    :tabindex="loading ? '-1' : '0'"
   >
-    <i
-      v-if="icon"
-      :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
-      class="material-icons"
-    >
-      {{ icon }}
-    </i>
-    <SmartIcon
-      v-if="svg"
-      :name="svg"
-      :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
-      class="svg-icons"
-    />
+    <span v-if="!loading" class="inline-flex items-center">
+      <i
+        v-if="icon"
+        :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
+        class="material-icons"
+      >
+        {{ icon }}
+      </i>
+      <SmartIcon
+        v-if="svg"
+        :name="svg"
+        :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
+        class="svg-icons"
+      />
+    </span>
+    <SmartSpinner v-else class="mr-4" />
     <div class="inline-flex items-start" :class="{ 'flex-col': description }">
       <div class="font-semibold">
         {{ label }}
@@ -42,6 +47,9 @@
         {{ description }}
       </p>
     </div>
+    <i v-if="infoIcon" class="ml-4 text-accent material-icons">
+      {{ infoIcon }}
+    </i>
   </SmartLink>
 </template>
 
@@ -80,14 +88,18 @@ export default {
       type: Boolean,
       default: false,
     },
-    infoIcon: {
-      type: String,
-      default: "",
+    loading: {
+      type: Boolean,
+      default: false,
     },
     reverse: {
       type: Boolean,
       default: false,
     },
+    infoIcon: {
+      type: String,
+      default: "",
+    },
   },
 }
 </script>

components/smart/Modal.vue

@@ -123,8 +123,8 @@ export default {
   @apply flex;
   @apply items-center;
   @apply justify-center;
-  @apply ease-in-out;
-  @apply duration-150;
+  @apply transition;
+
   @apply bg-primaryLight;
 }
 
@@ -133,13 +133,11 @@ export default {
   @apply flex flex-1 flex-col;
   @apply m-2;
   @apply p-4;
-  @apply ease-in-out;
-  @apply duration-150;
+  @apply transition;
   @apply bg-primary;
   @apply rounded-lg;
   @apply shadow-xl;
   @apply max-w-md;
-  @apply max-h-xl;
 }
 
 .modal-header {
@@ -149,6 +147,7 @@ export default {
 .modal-body {
   @apply my-4;
   @apply overflow-auto;
+  @apply max-h-xl;
 }
 
 .modal-footer {
@@ -164,7 +163,6 @@ export default {
 .modal-leave-active .modal-container {
   @apply transform;
   @apply scale-90;
-  @apply ease-in-out;
-  @apply duration-150;
+  @apply transition;
 }
 </style>

components/smart/Spinner.vue

@@ -1,7 +1,6 @@
 <template>
   <svg
-    class="animate-spin"
-    :class="`w-${size} h-${size}`"
+    class="animate-spin w-5 h-5"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"
@@ -21,14 +20,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  props: {
-    size: {
-      type: Number,
-      default: 6,
-    },
-  },
-}
-</script>

components/smart/Toggle.vue

@@ -45,7 +45,7 @@ $transition: all 0.2s ease-in-out;
   @apply align-middle;
   @apply rounded-full;
   @apply p-0;
-  @apply m-4;
+  @apply mr-4;
   @apply cursor-pointer;
   @apply flex-shrink-0;