1 files changed, 27 insertions, 15 deletions

diff --git a/src/components/Global/Popover.vue b/src/components/Global/Popover.vue
index b91aa08b..bae121c3 100644
--- a/src/components/Global/Popover.vue
+++ b/src/components/Global/Popover.vue
@@ -1,7 +1,22 @@
 <template>
   <div id="my-container">
+    <div v-if="isclear" :id="id" ref="button" variant="primary" class="pointer">
+      <img src="@/assets/images/clear-icon.svg" />
+      <span class="regular-12px red-font">{{ $t(description) }}</span>
+    </div>
+    <div
+      v-else-if="isMicrocode"
+      :id="id"
+      ref="button"
+      variant="primary"
+      class="pointer"
+    >
+      <img src="@/assets/images/icon-reload-red.svg" />
+      <span class="regular-12px red-font">{{ $t(description) }}</span>
+    </div>
+
     <span
-      v-if="!microcode"
+      v-else
       :id="id"
       ref="button"
       class="regular-12px underline pointer"
@@ -9,13 +24,6 @@
     >
       {{ $t(description) }}
     </span>
-    <div v-else :id="id" ref="button" variant="primary" class="pointer">
-      <img src="@/assets/images/icon-reload-red.svg" />
-      <span class="regular-12px microcode-reload-font">{{
-        $t(description)
-      }}</span>
-    </div>
-
     <!-- Our popover title and content render container -->
     <b-popover
       ref="popover"
@@ -92,7 +100,11 @@ export default {
       type: String,
       default: '',
     },
-    microcode: {
+    isMicrocode: {
+      type: Boolean,
+      default: false,
+    },
+    isclear: {
       type: Boolean,
       default: false,
     },
@@ -198,9 +210,6 @@ export default {
 .form-control {
   width: 341px;
   height: 52px;
-  background: rgba(26, 62, 91, 0.05);
-  border-radius: 8px;
-  border: none;
   margin: -25px auto;
   padding-top: 30px;
 }
@@ -211,7 +220,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: rgba(26, 62, 91, 0.05);
+  background: $faint-secondary-primary-5;
   border-radius: 8px;
   border: none;
   margin: 0 auto;
@@ -241,7 +250,10 @@ export default {
 }
 
 .popover-info {
-  background-color: #040a0f;
+  background-color: $on-surface-primary;
+  // border: 1px solid $text-primary;
+  // box-shadow: 0px 6px 16px -12px rgba(23, 40, 77, 0.06);
+  border-radius: 8px;
   width: 168px;
   height: 76px;
   &.arrow {
@@ -249,7 +261,7 @@ export default {
   }
 }
 
-.microcode-reload-font {
+.red-font {
   padding-left: 5px;
   color: $red-brand-primary;
 }