From 05f5033c46141d280dde609287fc01a54a81302a Mon Sep 17 00:00:00 2001
From: Prachi Darshana <prachirai00@gmail.com>
Date: Fri, 7 Apr 2023 17:36:57 -0700
Subject: [PATCH 1/4] #4452 neo modal

---
 components/collection/HeroButtons.vue         | 12 ++++++--
 .../src/components/NeoModal/NeoModa.story.vue | 15 ++++++++++
 libs/ui/src/components/NeoModal/NeoModal.scss | 17 +++++++++++
 libs/ui/src/components/NeoModal/NeoModal.vue  | 28 +++++++++++++++++++
 libs/ui/src/index.ts                          |  1 +
 5 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 libs/ui/src/components/NeoModal/NeoModa.story.vue
 create mode 100644 libs/ui/src/components/NeoModal/NeoModal.scss
 create mode 100644 libs/ui/src/components/NeoModal/NeoModal.vue

diff --git a/components/collection/HeroButtons.vue b/components/collection/HeroButtons.vue
index 11ab858bdb..4c034e638f 100644
--- a/components/collection/HeroButtons.vue
+++ b/components/collection/HeroButtons.vue
@@ -81,7 +81,7 @@
         </NeoDropdown>
       </div>
     </div>
-    <b-modal v-model="QRModalActive">
+    <NeoModal v-model="QRModalActive" @close="QRModalActive = false">
       <div class="card">
         <header class="card-header">
           <p class="card-header-title">{{ collection?.name }}</p>
@@ -90,15 +90,21 @@
           <QRCode :text="currentURL" color="#db2980" bg-color="#000" />
         </div>
       </div>
-    </b-modal>
+    </NeoModal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
+import {
+  NeoButton,
+  NeoDropdown,
+  NeoDropdownItem,
+  NeoModal,
+} from '@kodadot1/brick'
 import { isOwner as checkOwner } from '@/utils/account'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
 import useIdentity from '@/components/identity/utils/useIdentity'
+import { OModal } from '@oruga-ui/oruga'
 
 const route = useRoute()
 const { accountId } = useAuth()
diff --git a/libs/ui/src/components/NeoModal/NeoModa.story.vue b/libs/ui/src/components/NeoModal/NeoModa.story.vue
new file mode 100644
index 0000000000..f8582370a1
--- /dev/null
+++ b/libs/ui/src/components/NeoModal/NeoModa.story.vue
@@ -0,0 +1,15 @@
+<template>
+  <Story title="NeoNftCard">
+    <Variant title="Nft Card">
+      <NeoModal v-model="modalActive" @close="modalActive = false">
+        Modal Content
+      </NeoModal>
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import NeoModal from './NeoModal.vue'
+
+const modalActive = ref(true)
+</script>
diff --git a/libs/ui/src/components/NeoModal/NeoModal.scss b/libs/ui/src/components/NeoModal/NeoModal.scss
new file mode 100644
index 0000000000..9d13fec45e
--- /dev/null
+++ b/libs/ui/src/components/NeoModal/NeoModal.scss
@@ -0,0 +1,17 @@
+@import '../../scss/variable.scss';
+@import '../../scss/animation.scss';
+
+.neo-modal {
+  .o-modal__content {
+    @include ktheme() {
+      box-shadow: theme('primary-shadow');
+      border: 1px solid theme('border-color');
+      color: theme('text-color');
+      background: theme('background-color');
+    }
+  }
+
+  .card {
+    border-radius: 0;
+  }
+}
diff --git a/libs/ui/src/components/NeoModal/NeoModal.vue b/libs/ui/src/components/NeoModal/NeoModal.vue
new file mode 100644
index 0000000000..32ac498d85
--- /dev/null
+++ b/libs/ui/src/components/NeoModal/NeoModal.vue
@@ -0,0 +1,28 @@
+<template>
+  <o-modal
+    class="neo-modal"
+    :active.sync="isImageModalActive"
+    @close="updateClose">
+    <slot />
+  </o-modal>
+</template>
+
+<script lang="ts" setup>
+import { OModal } from '@oruga-ui/oruga'
+
+const props = defineProps<{
+  value: boolean
+}>()
+
+const emit = defineEmits(['close'])
+
+let isImageModalActive = useVModel(props, 'value')
+
+const updateClose = () => {
+  emit('close', false)
+}
+</script>
+
+<style lang="scss">
+@import './NeoModal.scss';
+</style>
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index 79743d4c9c..d5e7b82585 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -19,5 +19,6 @@ export { default as NeoTab } from './components/NeoTab/NeoTab'
 export { default as NeoTabItem } from './components/NeoTab/NeoTabItem'
 export { default as NeoIcon } from './components/NeoIcon/NeoIcon'
 export { default as NeoCollapse } from './components/NeoCollapse/NeoCollapse'
+export { default as NeoModal } from './components/NeoModal/NeoModal'
 
 export { default as Neo } from '@oruga-ui/oruga'

From f404f866213a725648992f0d98fcf3cfc2d2342e Mon Sep 17 00:00:00 2001
From: Prachi Darshana <prachirai00@gmail.com>
Date: Fri, 7 Apr 2023 17:40:29 -0700
Subject: [PATCH 2/4] remove useless import

---
 components/collection/HeroButtons.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/collection/HeroButtons.vue b/components/collection/HeroButtons.vue
index 4c034e638f..64363e60e3 100644
--- a/components/collection/HeroButtons.vue
+++ b/components/collection/HeroButtons.vue
@@ -104,7 +104,6 @@ import {
 import { isOwner as checkOwner } from '@/utils/account'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
 import useIdentity from '@/components/identity/utils/useIdentity'
-import { OModal } from '@oruga-ui/oruga'
 
 const route = useRoute()
 const { accountId } = useAuth()

From c9007792b40d16d78a815301f16819a85c1c66f4 Mon Sep 17 00:00:00 2001
From: Prachi Darshana <prachirai00@gmail.com>
Date: Fri, 7 Apr 2023 17:43:20 -0700
Subject: [PATCH 3/4] refactor

---
 libs/ui/src/components/NeoModal/NeoModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/ui/src/components/NeoModal/NeoModal.vue b/libs/ui/src/components/NeoModal/NeoModal.vue
index 32ac498d85..927f764434 100644
--- a/libs/ui/src/components/NeoModal/NeoModal.vue
+++ b/libs/ui/src/components/NeoModal/NeoModal.vue
@@ -16,7 +16,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['close'])
 
-let isImageModalActive = useVModel(props, 'value')
+const isImageModalActive = useVModel(props, 'value')
 
 const updateClose = () => {
   emit('close', false)

From d4ce189b27296865353c0be9b9c3a71262a5d0fa Mon Sep 17 00:00:00 2001
From: Prachi Darshana <prachirai00@gmail.com>
Date: Sat, 8 Apr 2023 16:43:09 -0700
Subject: [PATCH 4/4] fixes

---
 libs/ui/src/components/NeoModal/NeoModal.scss | 4 ++++
 libs/ui/src/components/NeoModal/NeoModal.vue  | 7 ++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/libs/ui/src/components/NeoModal/NeoModal.scss b/libs/ui/src/components/NeoModal/NeoModal.scss
index 9d13fec45e..c04633e938 100644
--- a/libs/ui/src/components/NeoModal/NeoModal.scss
+++ b/libs/ui/src/components/NeoModal/NeoModal.scss
@@ -11,6 +11,10 @@
     }
   }
 
+  .o-modal__overlay {
+    background-color: rgba(0, 0, 0, 0.17);
+  }
+
   .card {
     border-radius: 0;
   }
diff --git a/libs/ui/src/components/NeoModal/NeoModal.vue b/libs/ui/src/components/NeoModal/NeoModal.vue
index 927f764434..87e0e8234d 100644
--- a/libs/ui/src/components/NeoModal/NeoModal.vue
+++ b/libs/ui/src/components/NeoModal/NeoModal.vue
@@ -1,8 +1,5 @@
 <template>
-  <o-modal
-    class="neo-modal"
-    :active.sync="isImageModalActive"
-    @close="updateClose">
+  <o-modal class="neo-modal" :active.sync="isModalActive" @close="updateClose">
     <slot />
   </o-modal>
 </template>
@@ -16,7 +13,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['close'])
 
-const isImageModalActive = useVModel(props, 'value')
+const isModalActive = useVModel(props, 'value')
 
 const updateClose = () => {
   emit('close', false)