Modal ze zmianami

src/components/ChangesModal.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="changes-modal">
+    <transition name="modal-anim">
+      <div class="content g-card" v-if="store.changesResponse.length > 0">
+        <h2>Wprowadzone zmiany</h2>
+        <div>
+          <ul class="changelog">
+            <li v-for="change in store.changesResponse">{{ change }}</li>
+          </ul>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+
+export default defineComponent({
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.content {
+  top: 0;
+  transform: translateX(-50%);
+
+  max-width: 450px;
+}
+
+ul.changelog {
+  list-style: square;
+}
+
+// Vue transition animations
+.modal-anim {
+  &-leave-active,
+  &-enter-active {
+    transition: all 100ms ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translate(-50%, -30px);
+    opacity: 0.25;
+  }
+}
+</style>