Feature/UI modals (#4)

* updated basic-modal

* added invalid-network-modal

* added withdraw-modal

* added claim-modal

* added deposit-modal

* fix invalid-network-modal

---------

Co-authored-by: Yehor Podporinov <[email protected]>

.env.example

@@ -2,3 +2,4 @@ VITE_ENVIRONMENT=development
 VITE_PORT=8095
 VITE_API_URL='http://localhost:1337'
 VITE_APP_NAME='Morpheus Dashboard'
+VITE_APP_IS_TESTNET='true'

src/App.vue

@@ -9,11 +9,15 @@
         </transition>
       </router-view>
     </div>
+    <invalid-network-modal
+      v-model:is-shown="isShownInvalidNetworkModal"
+      is-close-by-click-outside
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { AppNavbar, AppNavbarMobile } from '@/common'
+import { AppNavbar, AppNavbarMobile, InvalidNetworkModal } from '@/common'
 
 import { ref } from 'vue'
 import { useNotifications } from '@/composables'
@@ -22,6 +26,7 @@ import { bus, BUS_EVENTS, ErrorHandler } from '@/helpers'
 import { NotificationPayload } from '@/types'
 
 const isAppInitialized = ref(false)
+const isShownInvalidNetworkModal = ref(true)
 
 const { showToast } = useNotifications()
 

src/common/Modal.vue

@@ -1,6 +1,6 @@
 <template>
   <teleport to="#modal">
-    <transition name="modal">
+    <transition name="fade">
       <div v-show="isShown" class="modal" v-bind="$attrs">
         <div class="modal__pane" ref="modalPane">
           <slot :modal="{ close: closeModal }" :key="String(isShown)" />
@@ -47,7 +47,7 @@ const closeModal = () => {
 </script>
 
 <style lang="scss" scoped>
-$z-index-local: 100;
+$z-index: 1000;
 
 .modal {
   --max-width: #{toRem(600)};
@@ -61,7 +61,7 @@ $z-index-local: 100;
   width: 100vw;
   height: vh(100);
   background: rgba(var(--black-rgb), 0.5);
-  z-index: $z-index-local;
+  z-index: $z-index;
 }
 
 .modal__pane {
@@ -72,16 +72,4 @@ $z-index-local: 100;
   height: auto;
   max-width: var(--max-width);
 }
-
-.modal-enter-active,
-.modal-leave-active {
-  transition: 0.25s ease;
-  transition-property: opacity, transform;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-  transform: scale(1.1);
-}
 </style>

src/common/modals/BasicModal.vue

@@ -1,39 +1,36 @@
 <template>
   <modal
-    v-model:is-shown="isModalShown"
+    :is-shown="isShown"
     :is-close-by-click-outside="isCloseByClickOutside"
+    @update:is-shown="emit('update:is-shown', $event)"
   >
     <template #default="{ modal }">
       <div class="basic-modal__pane">
         <div class="basic-modal__header">
-          <div class="basic-modal__header-titles">
-            <h5 v-if="title" class="basic-modal__title">
-              {{ title }}
-            </h5>
-            <span v-if="subtitle" class="basic-modal__subtitle">
-              {{ subtitle }}
-            </span>
+          <h3 v-if="title" class="basic-modal__title">
+            {{ title }}
+          </h3>
+          <div v-if="$slots.subtitle" class="basic-modal__subtitle-slot-wrp">
+            <slot name="subtitle" />
           </div>
-          <app-button
-            class="basic-modal__close-btn"
-            scheme="none"
-            :icon-right="ICON_NAMES.x"
-            @click="modal.close"
-          />
+          <p v-else-if="subtitle" class="basic-modal__subtitle">
+            {{ subtitle }}
+          </p>
+          <button class="basic-modal__close-btn" @click="modal.close">
+            <icon class="basic-modal__close-btn-icon" :name="$icons.x" />
+          </button>
         </div>
-        <slot />
+        <slot :modal="{ close: modal.close }" />
       </div>
     </template>
   </modal>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import Icon from '../Icon.vue'
+import Modal from '../Modal.vue'
 
-import { AppButton, Modal } from '@/common'
-import { ICON_NAMES } from '@/enums'
-
-const props = withDefaults(
+withDefaults(
   defineProps<{
     isShown: boolean
     isCloseByClickOutside?: boolean
@@ -50,53 +47,72 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: 'update:is-shown', v: boolean): void
 }>()
-
-const isModalShown = ref(false)
-
-watch(
-  () => props.isShown,
-  value => {
-    isModalShown.value = value
-  },
-)
-
-watch(isModalShown, value => {
-  emit('update:is-shown', value)
-})
 </script>
 
 <style lang="scss">
 .basic-modal__pane {
-  --basic-modal-max-width: #{toRem(400)};
+  padding: toRem(40) toRem(38) toRem(28);
+  width: toRem(584);
+  border: toRem(1) solid;
+  border-image-slice: 1;
+  border-image-source: linear-gradient(180deg, #7c7c7d 0%, #cacaca 100%);
+  background: linear-gradient(180deg, #222322 0%, #1d201c 100%),
+    linear-gradient(180deg, #7c7c7d 0%, #cacaca 100%);
 
-  background: var(--background-primary-main);
-  padding: toRem(24);
-  border-radius: toRem(28);
-  max-width: var(--basic-modal-max-width);
+  @include respond-to(medium) {
+    padding: toRem(36) toRem(20) toRem(24);
+    width: toRem(344);
+  }
 }
 
 .basic-modal__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: toRem(32);
-}
-
-.basic-modal__header-titles {
   display: flex;
   flex-direction: column;
-  gap: toRem(8);
+  align-items: center;
 }
 
 .basic-modal__title {
-  font-size: toRem(28);
-  line-height: 1.3;
-  color: var(--text-primary-main);
+  background: linear-gradient(90deg, #06f684, #1ab479);
+  background-clip: text;
+  color: transparent;
+  text-align: center;
 }
 
+.basic-modal__subtitle-slot-wrp,
 .basic-modal__subtitle {
-  font-size: toRem(14);
-  line-height: 1.45;
-  color: var(--text-secondary-main);
+  margin-top: toRem(32);
+  text-align: center;
+
+  @include respond-to(medium) {
+    margin-top: toRem(20);
+  }
+
+  @include body-1-regular;
+}
+
+.basic-modal__close-btn {
+  position: absolute;
+  top: toRem(36);
+  right: toRem(48);
+
+  @include respond-to(medium) {
+    top: toRem(16);
+    right: toRem(16);
+  }
+}
+
+.basic-modal__close-btn-icon {
+  height: toRem(24);
+  width: toRem(24);
+  color: var(--text-secondary-light);
+  transition: var(--transition-duration-fast) var(--transition-timing-default);
+
+  .basic-modal__close-btn:not([disabled]):hover &,
+  .basic-modal__close-btn:not([disabled]):focus &,
+  .basic-modal__close-btn:not([disabled]):active & {
+    $color: #1ab479;
+
+    color: $color;
+  }
 }
 </style>

src/common/modals/compositions/ClaimModal.vue

@@ -0,0 +1,88 @@
+<template>
+  <basic-modal
+    class="claim-modal"
+    :is-shown="isShown"
+    :is-close-by-click-outside="isCloseByClickOutside"
+    :title="$t('claim-modal.title')"
+    @update:is-shown="emit('update:is-shown', $event)"
+  >
+    <template #subtitle>
+      <i18n-t
+        class="claim-modal__subtitle"
+        keypath="claim-modal.subtitle"
+        tag="p"
+      >
+        <template #reward>
+          <span class="claim-modal__reward">
+            {{ $t('claim-modal.reward', { amount }) }}
+          </span>
+        </template>
+      </i18n-t>
+    </template>
+    <template #default="{ modal }">
+      <div class="claim-modal__buttons-wrp">
+        <app-button
+          class="claim-modal__btn"
+          color="secondary"
+          :text="$t('claim-modal.close-btn')"
+          @click="modal.close"
+        />
+        <app-button
+          class="claim-modal__btn"
+          :text="$t('claim-modal.claim-btn')"
+        />
+      </div>
+    </template>
+  </basic-modal>
+</template>
+
+<script lang="ts" setup>
+import BasicModal from '../BasicModal.vue'
+import { AppButton } from '@/common'
+
+const emit = defineEmits<{
+  (e: 'update:is-shown', v: boolean): void
+}>()
+
+withDefaults(
+  defineProps<{
+    isShown: boolean
+    amount: string
+    isCloseByClickOutside?: boolean
+  }>(),
+  {
+    isCloseByClickOutside: true,
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+.claim-modal__subtitle {
+  font: inherit;
+}
+
+.claim-modal__reward {
+  @include body-1-semi-bold;
+}
+
+.claim-modal__buttons-wrp {
+  margin-top: toRem(40);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: toRem(16);
+
+  @include respond-to(medium) {
+    margin-top: toRem(36);
+  }
+}
+
+.claim-modal .claim-modal__btn {
+  min-width: toRem(200);
+
+  @include respond-to(medium) {
+    min-width: min-content;
+    width: 100%;
+  }
+}
+</style>