From 523c21fb3b36b9d8aa3c72b07a984c08a7bba942 Mon Sep 17 00:00:00 2001
From: Bartosz <bartosz@peronczyk.com>
Date: Tue, 19 Mar 2024 10:12:04 +0100
Subject: [PATCH] fix: coin icon not displaying on ff extension

---
 src/popup/components/AssetIcon.vue          |  1 +
 src/popup/components/Assets/DetailsRow.vue  | 15 ++++++-------
 src/popup/components/Tokens.vue             | 24 +++++++--------------
 src/popup/pages/Assets/AssetDetails.vue     |  6 +++---
 src/popup/pages/Assets/AssetDetailsInfo.vue |  8 +------
 5 files changed, 19 insertions(+), 35 deletions(-)

diff --git a/src/popup/components/AssetIcon.vue b/src/popup/components/AssetIcon.vue
index aba9eaba9..803b654c2 100644
--- a/src/popup/components/AssetIcon.vue
+++ b/src/popup/components/AssetIcon.vue
@@ -93,6 +93,7 @@ export default defineComponent({
 
   display: inline-block;
   flex-grow: 0;
+  flex-shrink: 0;
   width: var(--icon-size);
   height: var(--icon-size);
   border-radius: 50%;
diff --git a/src/popup/components/Assets/DetailsRow.vue b/src/popup/components/Assets/DetailsRow.vue
index 776a9fd86..2d7cfe280 100644
--- a/src/popup/components/Assets/DetailsRow.vue
+++ b/src/popup/components/Assets/DetailsRow.vue
@@ -5,11 +5,12 @@
         {{ label }}
       </slot>
     </div>
-    <span class="text">
+
+    <div class="text">
       <slot name="text">
         {{ text }}
       </slot>
-    </span>
+    </div>
   </div>
 </template>
 
@@ -24,14 +25,14 @@ export default {
 
 <style lang="scss" scoped>
 @use '../../../styles/variables';
-@use '../../../styles/mixins';
 @use '../../../styles/typography';
 
 .details-row {
-  @include mixins.flex(space-between, center);
-
   @extend %face-sans-15-medium;
 
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding: 8px var(--screen-padding-x);
 
   .title {
@@ -44,9 +45,5 @@ export default {
   .text {
     color: rgba(variables.$color-white, 0.75);
   }
-
-  .white {
-    color: variables.$color-white;
-  }
 }
 </style>
diff --git a/src/popup/components/Tokens.vue b/src/popup/components/Tokens.vue
index 4e199d7a4..424593e1e 100644
--- a/src/popup/components/Tokens.vue
+++ b/src/popup/components/Tokens.vue
@@ -112,6 +112,8 @@ export default defineComponent({
 .tokens {
   @extend %face-sans-16-semi-bold;
 
+  display: inline-flex;
+  align-items: center;
   color: rgba(variables.$color-white, 0.75);
   letter-spacing: -2%;
 
@@ -119,28 +121,18 @@ export default defineComponent({
     color: variables.$color-white;
   }
 
-  &,
-  .symbols,
-  .icon {
-    display: inline-flex;
-    align-items: center;
-    align-self: center;
-  }
-
   .icon {
     user-select: none;
-    width: max-content;
-    vertical-align: middle;
     margin-right: 4px;
   }
 
-  .symbol {
-    @extend %face-sans-16-regular;
+  .symbols {
+    .symbol {
+      @extend %face-sans-16-regular;
 
-    vertical-align: middle;
-    white-space: nowrap;
-    line-height: 20px;
-    letter-spacing: -0.02em;
+      white-space: nowrap;
+      letter-spacing: -0.02em;
+    }
   }
 
   .separator {
diff --git a/src/popup/pages/Assets/AssetDetails.vue b/src/popup/pages/Assets/AssetDetails.vue
index 877f5fd6c..8750e268d 100644
--- a/src/popup/pages/Assets/AssetDetails.vue
+++ b/src/popup/pages/Assets/AssetDetails.vue
@@ -434,16 +434,16 @@ export default defineComponent({
   }
 
   .top {
+    display: flex;
+    flex-direction: column;
     text-align: center;
   }
 
   .token-amount {
     @extend %face-sans-22-medium;
 
-    padding-top: 10px;
+    margin-top: 10px;
     margin-bottom: 20px;
-    display: block;
-    text-align: center;
   }
 
   .token-actions {
diff --git a/src/popup/pages/Assets/AssetDetailsInfo.vue b/src/popup/pages/Assets/AssetDetailsInfo.vue
index c8f95bfed..8e61256b9 100644
--- a/src/popup/pages/Assets/AssetDetailsInfo.vue
+++ b/src/popup/pages/Assets/AssetDetailsInfo.vue
@@ -12,6 +12,7 @@
               v-if="tokens"
               class="token-details-tokens"
               :tokens="tokens"
+              bright
             />
           </template>
         </DetailsRow>
@@ -268,7 +269,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '../../../styles/typography';
 @use '../../../styles/variables';
 
 .token-details {
@@ -305,11 +305,5 @@ export default defineComponent({
       color: variables.$color-white;
     }
   }
-
-  .token-details-tokens {
-    @extend %face-sans-15-medium;
-
-    color: variables.$color-white;
-  }
 }
 </style>