fix: Fix schedule item transitions (#237)

components/schedule/scheduleDisplay.vue

@@ -1,9 +1,13 @@
 <template>
-  <div class="w-full p-4 overflow-hidden select-none">
+  <div class="flex flex-row justify-center w-full p-4 overflow-hidden select-none">
     <TransitionGroup
-      name="schedule-transition"
+      enter-active-class="transition duration-300 delay-150"
+      leave-active-class="absolute transition duration-300"
+      enter-class="translate-x-8 !opacity-0"
+      move-class="transition duration-300 delay-150"
+      leave-to-class="scale-90 opacity-0"
       tag="div"
-      class="relative flex flex-row justify-center flex-grow-0"
+      class="relative flex flex-row flex-grow-0 gap-2"
     >
       <ScheduleItem
         v-for="(item, i) in getSchedule"
@@ -28,23 +32,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.schedule-transition-enter-active,
-.schedule-transition-leave-active,
-.schedule-transition-move {
-  @apply transition-all duration-300;
-}
-
-.schedule-transition-enter {
-  @apply opacity-0 translate-x-8;
-}
-
-.schedule-transition-leave-active {
-  position: absolute;
-}
-
-.schedule-transition-leave-to {
-  @apply opacity-0 -translate-x-8;
-}
-</style>

components/schedule/scheduleItem.vue

@@ -1,9 +1,9 @@
 <template>
   <div
+    class="w-12 h-12 border rounded-lg"
     :class="[
-      'mr-2 inline-block w-12 h-12 relative border border-transparent rounded-lg p-0 last-of-type:mr-0',
       { 'border-gray-100 shadow': active },
-      { 'shadow-sm opacity-40': !active }
+      { 'shadow-sm opacity-40 border-transparent': !active }
     ]"
     :style="[
       { 'background-color': visuals[data.type].colour }