refactor(ui): faster animations + chore(deps): bump

components/layout/pw-header.vue

@@ -137,7 +137,7 @@ $responsiveWidth: 768px;
   @apply text-xl;
   @apply transition-colors;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 
   &:hover {
     @apply text-acColor;

components/layout/pw-section.vue

@@ -19,7 +19,7 @@ fieldset {
   @apply bg-bgDarkColor;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 
   legend {
     @apply px-4;
@@ -28,7 +28,7 @@ fieldset {
     @apply cursor-pointer;
     @apply transition;
     @apply ease-in-out;
-    @apply duration-200;
+    @apply duration-150;
   }
 
   &.blue legend {

components/layout/sidenav.vue

@@ -177,7 +177,7 @@ $responsiveWidth: 768px;
   @apply bg-bgDarkColor;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
   // @apply overflow-y-auto;
 }
 
@@ -206,7 +206,7 @@ nav.primary-nav {
     @apply outline-none;
     @apply transition;
     @apply ease-in-out;
-    @apply duration-200;
+    @apply duration-150;
 
     &:hover {
       @apply text-fgColor;
@@ -266,7 +266,7 @@ nav.secondary-nav {
         @apply outline-none;
         @apply transition;
         @apply ease-in-out;
-        @apply duration-200;
+        @apply duration-150;
 
         &:hover {
           @apply text-fgColor;

components/ui/accent-mode-picker.vue

@@ -6,7 +6,7 @@
         v-for="(color, index) of colors"
         :key="`color-${index}`"
         v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-        class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none"
+        class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none"
         :class="[{ 'bg-bgDarkColor': color === active }, `text-${color}-400`]"
         @click="setActiveColor(color)"
       >

components/ui/autocomplete.vue

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

components/ui/color-mode-picker.vue

@@ -14,7 +14,7 @@
         v-for="(color, index) of colors"
         :key="`color-${index}`"
         v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
-        class="inline-flex items-center justify-center p-3 m-2 transition duration-200 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
+        class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
         :class="[
           { 'bg-bgDarkColor': color === $colorMode.preference },
           { 'text-acColor hover:text-acColor': color === $colorMode.value },

components/ui/modal.vue

@@ -11,7 +11,7 @@
             <!-- <div class="fade top"></div>
             <div class="fade bottom"></div> -->
           </div>
-          <div class="modal-footer">
+          <div v-if="hasFooterSlot" class="modal-footer">
             <slot name="footer"></slot>
           </div>
         </div>
@@ -32,7 +32,7 @@
   @apply justify-center;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 
   background-color: rgba(0, 0, 0, 0.32);
 }
@@ -52,7 +52,7 @@
   @apply m-2;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
   @apply bg-bgColor;
   @apply rounded-lg;
   @apply shadow-2xl;
@@ -90,10 +90,10 @@
 .modal-enter .modal-container,
 .modal-leave-active .modal-container {
   @apply transform;
-  @apply scale-75;
+  @apply scale-90;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 }
 
 .fade {
@@ -101,7 +101,7 @@
   @apply block;
   @apply transition;
   @apply ease-in-out;
-  @apply duration-200;
+  @apply duration-150;
 
   left: 16px;
   right: 20px;
@@ -118,3 +118,13 @@
   }
 }
 </style>
+
+<script>
+export default {
+  computed: {
+    hasFooterSlot() {
+      return !!this.$slots.footer
+    },
+  },
+}
+</script>

components/ui/tabs.vue

@@ -59,7 +59,7 @@
         @apply cursor-pointer;
         @apply transition-colors;
         @apply ease-in-out;
-        @apply duration-200;
+        @apply duration-150;
 
         .material-icons {
           @apply m-4;