refactor: unify label text styling

superhero-com · Jul 15, 2024 · 833599d · 833599d
1 parent 812ba5e
commit 833599d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/src/popup/components/DetailsItem.vue b/src/popup/components/DetailsItem.vue
@@ -8,7 +8,7 @@
   >
     <Component
       :is="expandable ? 'BtnPlain' : 'div'"
-      class="label"
+      class="text-label label"
       @click="toggleExpanded()"
     >
       {{ label }}
@@ -89,13 +89,9 @@ export default defineComponent({
   margin-top: 12px;
 
   .label {
-    @extend %face-sans-15-medium;
-
     display: flex;
     align-items: center;
     margin-bottom: 4px;
-    line-height: 16px;
-    color: rgba($color-white, 0.5);
 
     .indent {
       margin-left: 8px;

diff --git a/src/popup/components/InputField.vue b/src/popup/components/InputField.vue
@@ -16,7 +16,7 @@
     >
       <label
         :for="inputId"
-        class="label-text"
+        class="text-label"
         @click="$emit('click', $event)"
       >
         <slot name="label">{{ label }}</slot>
@@ -283,6 +283,7 @@ export default defineComponent({
     display: flex;
     align-items: center;
     margin-top: 16px;
+    margin-bottom: 2px;
 
     &-text {
       margin: 4px 0;

diff --git a/src/popup/components/PayloadDetails.vue b/src/popup/components/PayloadDetails.vue
@@ -4,15 +4,17 @@
     class="payload"
   >
     <div class="payload-header">
-      <span class="label-text">
-        {{ $t('modals.send.payload') }}
-      </span>
+      <span
+        class="text-text"
+        v-text="$t('modals.send.payload')"
+      />
       <slot />
     </div>
 
-    <div class="payload-text">
-      {{ payload }}
-    </div>
+    <div
+      class="payload-text"
+      v-text="payload"
+    />
   </div>
 </template>
 

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -314,12 +314,13 @@ hr {
     margin-bottom: 1em;
     line-height: 24px;
   }
-}
 
-.label-text {
-  @extend %face-sans-15-medium;
+  &-label {
+    @extend %face-sans-15-medium;
 
-  color: $color-grey-dark;
+    line-height: 16px;
+    color: rgba($color-white, 0.5);
+  }
 }
 
 .relative {