fix: coin icon not displaying on ff extension

superhero-com · Mar 20, 2024 · 523c21f · 523c21f
1 parent 2d55175
commit 523c21f
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 35 deletions.
diff --git 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
@@ -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
@@ -112,35 +112,27 @@ 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%;
 
   &.bright {
     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
@@ -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
@@ -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>