fix: Fixes assignee and inbox name spacing issues (#6589)

chatwoot · Mar 2, 2023 · a685e06 · a685e06
1 parent a4fc0ee
commit a685e06
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 24 deletions.
diff --git a/app/javascript/dashboard/assets/scss/_rtl.scss b/app/javascript/dashboard/assets/scss/_rtl.scss
@@ -240,6 +240,11 @@
         }
       }
 
+      .assignee-label {
+        margin-left: 0;
+        margin-right: var(--space-one);
+      }
+
       .show-more--button {
         margin: unset;
         transform: rotate(180deg);
@@ -311,11 +316,6 @@
     }
   }
 
-  // Labels
-  .label {
-    direction: initial;
-  }
-
   // Notification panel
   .notification-wrap {
     left: 0;

diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
@@ -56,7 +56,7 @@
 
   .conversation--user {
     font-size: var(--font-size-small);
-    margin: 0 var(--space-one);
+    margin: 0 var(--space-small);
     text-transform: capitalize;
 
     .label {
@@ -76,7 +76,7 @@
     font-weight: var(--font-weight-normal);
     height: var(--space-medium);
     line-height: var(--space-medium);
-    margin: 0 var(--space-one);
+    margin: 0 var(--space-small);
     max-width: 96%;
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
@@ -12,7 +12,7 @@
     <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
     <button
       v-if="showClose"
-      class="label-close--button "
+      class="label-close--button"
       :style="{ color: textColor }"
       @click="onClick"
     >
@@ -108,6 +108,7 @@ export default {
   display: inline-flex;
   align-items: center;
   font-weight: var(--font-weight-medium);
+  gap: var(--space-smaller);
   margin-right: var(--space-smaller);
   margin-bottom: var(--space-smaller);
   padding: var(--space-smaller);
@@ -126,9 +127,6 @@ export default {
   .label--icon {
     cursor: pointer;
   }
-  .label-color-dot {
-    margin-right: var(--space-smaller);
-  }
 
   &.small .label--icon,
   &.small .close--icon {
@@ -209,7 +207,6 @@ export default {
 .label-close--button {
   color: var(--s-800);
   margin-bottom: var(--space-minus-micro);
-  margin-left: var(--space-smaller);
   border-radius: var(--border-radius-small);
   cursor: pointer;
 
@@ -232,7 +229,6 @@ export default {
   width: var(--space-slab);
   height: var(--space-slab);
   border-radius: var(--border-radius-small);
-  margin-right: var(--space-smaller);
   box-shadow: var(--shadow-small);
 }
 .label.small .label-color-dot {

diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -431,6 +431,7 @@ export default {
 
   .assignee-label {
     display: inline-flex;
+    margin-left: var(--space-small);
     max-width: 50%;
   }
 }

diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -17,9 +17,7 @@
             @click.prevent="$emit('contact-panel-toggle')"
           >
             <h3 class="sub-block-title user--name text-truncate">
-              <span class="margin-right-smaller">{{
-                currentContact.name
-              }}</span>
+              <span>{{ currentContact.name }}</span>
               <fluent-icon
                 v-if="!isHMACVerified"
                 v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
@@ -30,16 +28,12 @@
             </h3>
           </woot-button>
           <div class="conversation--header--actions text-truncate">
-            <inbox-name
-              v-if="hasMultipleInboxes"
-              :inbox="inbox"
-              class="margin-right-1"
-            />
-            <span v-if="isSnoozed" class="snoozed--display-text margin-right-1">
+            <inbox-name v-if="hasMultipleInboxes" :inbox="inbox" />
+            <span v-if="isSnoozed" class="snoozed--display-text">
               {{ snoozedDisplayText }}
             </span>
             <woot-button
-              class="user--profile__button margin-right-1"
+              class="user--profile__button"
               size="small"
               variant="link"
               @click="$emit('contact-panel-toggle')"
@@ -220,6 +214,11 @@ export default {
   align-items: center;
   display: flex;
   font-size: var(--font-size-mini);
+  gap: var(--space-small);
+
+  ::v-deep .inbox--name {
+    margin: 0;
+  }
 
   .user--profile__button {
     padding: 0;
@@ -233,5 +232,6 @@ export default {
 
 .hmac-warning__icon {
   color: var(--y-600);
+  margin: 0 var(--space-micro);
 }
 </style>
diff --git a/...cript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue b/...cript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
@@ -97,7 +97,7 @@ export default {
 }
 
 .label-container {
-  margin: var(--space-micro) var(--space-one) 0;
+  margin: var(--space-micro) var(--space-small) 0;
 }
 
 .labels-wrap {