Chore: Refactors sidebar styles (#2416)

* Chore: Refactors sidebar styles

* Removes unused i18n

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -131,7 +131,7 @@ $header-text-rendering: optimizeLegibility;
 $small-font-size: 80%;
 $header-small-font-color: $medium-gray;
 $paragraph-lineheight: 1.45;
-$paragraph-margin-bottom: 1rem;
+$paragraph-margin-bottom: var(--space-small);
 $paragraph-text-rendering: optimizeLegibility;
 $code-color: $black;
 $code-font-family: $font-family-monospace;
@@ -345,21 +345,21 @@ $fieldset-padding: $space-two;
 $fieldset-margin: $space-one $zero;
 $legend-padding: rem-calc(0 3);
 $form-spacing: $space-normal;
-$helptext-color: $header-color;
+$helptext-color: $color-body;
 $helptext-font-size: $font-size-small;
 $helptext-font-style: italic;
-$input-prefix-color: $header-color;
+$input-prefix-color: $color-body;
 $input-prefix-background: var(--b-100);
 $input-prefix-border: 1px solid $color-border;
 $input-prefix-padding: 1rem;
-$form-label-color: $header-color;
+$form-label-color: $color-body;
 $form-label-font-size: rem-calc(14);
 $form-label-font-weight: $font-weight-medium;
 $form-label-line-height: 1.8;
 $select-background: $white;
 $select-triangle-color: $dark-gray;
 $select-radius: var(--border-radius-normal);
-$input-color: $header-color;
+$input-color: $color-body;
 $input-placeholder-color: $light-gray;
 $input-font-family: inherit;
 $input-font-size: $font-size-default;

app/javascript/dashboard/assets/scss/_typography.scss

@@ -19,7 +19,7 @@
 }
 
 .text-muted {
-  color: $color-gray;
+  color: var(--s-300);
 }
 
 a {

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -121,6 +121,7 @@ export default {
     width: 100%;
     height: 100%;
     max-width: 100%;
+    padding: var(--space-normal) var(--space-two);
   }
 }
 </style>

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -108,7 +108,6 @@
     }
   },
   "CONVERSATION_SIDEBAR": {
-    "DETAILS_TITLE": "Conversations Details",
     "ASSIGNEE_LABEL": "Assigned Agent",
     "SELF_ASSIGN": "Assign to me",
     "TEAM_LABEL": "Assigned Team",

app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue

@@ -47,18 +47,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
-
+::v-deep {
+  .contact--profile {
+    padding-bottom: var(--space-slab);
+    margin-bottom: var(--space-normal);
+  }
+}
 .contact--panel {
-  @include border-normal-left;
-
   background: white;
   font-size: var(--font-size-small);
   overflow-y: auto;
   overflow: auto;
   position: relative;
-  padding: var(--space-one);
+  border-left: 1px solid var(--color-border);
+  padding: var(--space-medium) var(--space-two);
 }
 
 .close-button {

app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue

@@ -77,13 +77,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
-
-.contact-conversation--panel {
-  padding: 0 var(--space-slab) var(--space-two);
-}
-
 .contact-conversation__wrap {
   margin-left: var(--space-medium);
 }

app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue

@@ -46,7 +46,7 @@ export default {
 
 <style scoped>
 .custom-attributes--panel {
-  padding: 0 var(--space-slab) var(--space-slab);
+  margin-bottom: var(--space-normal);
 }
 
 .conv-details--item {

app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue

@@ -1,17 +1,11 @@
 <template>
   <div class="conv-details--item">
     <h4 class="conv-details--item__label text-block-title">
-      <div class="title--icon">
+      <span class="title--icon">
         <emoji-or-icon :icon="icon" :emoji="emoji" />
-        {{ title }}
-      </div>
-      <button
-        v-if="showEdit"
-        class="button clear small edit-button"
-        @click="onEdit"
-      >
-        {{ $t('CONTACT_PANEL.EDIT_LABEL') }}
-      </button>
+        <span>{{ title }}</span>
+      </span>
+      <slot name="button"></slot>
     </h4>
     <div v-if="value" class="conv-details--item__value">
       <slot>
@@ -33,28 +27,17 @@ export default {
     icon: { type: String, default: '' },
     emoji: { type: String, default: '' },
     value: { type: [String, Number], default: '' },
-    showEdit: { type: Boolean, default: false },
-  },
-  methods: {
-    onEdit() {
-      this.$emit('edit');
-    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
-
 .conv-details--item {
-  padding-bottom: var(--space-normal);
-
+  overflow: auto;
   .conv-details--item__label {
     align-items: center;
     display: flex;
     justify-content: space-between;
-    margin-bottom: var(--space-smaller);
 
     .edit-button {
       padding: 0;
@@ -64,11 +47,13 @@ export default {
   .conv-details--item__value {
     word-break: break-all;
     margin-left: var(--space-medium);
+    margin-bottom: var(--space-normal);
   }
 
   .title--icon .icon--emoji,
   .title--icon .icon--font {
-    margin-right: var(--space-small);
+    display: inline-block;
+    width: var(--space-medium);
   }
 
   .title--icon {

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -5,24 +5,25 @@
     </span>
     <contact-info :contact="contact" :channel-type="channelType" />
     <div class="conversation--actions">
-      <h4 class="sub-block-title">
-        {{ $t('CONVERSATION_SIDEBAR.DETAILS_TITLE') }}
-      </h4>
       <div class="multiselect-wrap--small">
-        <div class="self-assign">
-          <label class="multiselect__label">
-            {{ $t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL') }}
-          </label>
-          <woot-button
-            v-if="showSelfAssign"
-            icon="ion-arrow-right-c"
-            variant="link"
-            class-names="button-content"
-            @click="onSelfAssign"
-          >
-            {{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
-          </woot-button>
-        </div>
+        <contact-details-item
+          :title="$t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL')"
+          icon="ion-headphone"
+          emoji="🧑‍🚀"
+        >
+          <template v-slot:button>
+            <woot-button
+              v-if="showSelfAssign"
+              icon="ion-arrow-right-c"
+              variant="link"
+              size="small"
+              class-names="button-content"
+              @click="onSelfAssign"
+            >
+              {{ $t('CONVERSATION_SIDEBAR.SELF_ASSIGN') }}
+            </woot-button>
+          </template>
+        </contact-details-item>
         <multiselect
           v-model="assignedAgent"
           :options="agentsList"
@@ -46,9 +47,11 @@
         </multiselect>
       </div>
       <div class="multiselect-wrap--small">
-        <label class="multiselect__label">
-          {{ $t('CONVERSATION_SIDEBAR.TEAM_LABEL') }}
-        </label>
+        <contact-details-item
+          :title="$t('CONVERSATION_SIDEBAR.TEAM_LABEL')"
+          icon="ion-ios-people"
+          emoji="🎢"
+        />
         <multiselect
           v-model="assignedTeam"
           :options="teamsList"
@@ -344,17 +347,27 @@ export default {
   overflow-y: auto;
   overflow: auto;
   position: relative;
-  padding: $space-one;
 
   i {
     margin-right: $space-smaller;
   }
 }
 
-.multiselect-wrap--small {
-  &::v-deep .multiselect__element {
-    span {
-      width: 100%;
+::v-deep {
+  .contact--profile {
+    padding-bottom: var(--space-slab);
+    margin-bottom: var(--space-normal);
+    border-bottom: 1px solid var(--color-border-light);
+  }
+  .multiselect-wrap--small {
+    .multiselect {
+      padding-left: var(--space-medium);
+      box-sizing: border-box;
+    }
+    .multiselect__element {
+      span {
+        width: 100%;
+      }
     }
   }
 }
@@ -367,10 +380,6 @@ export default {
   color: $color-heading;
 }
 
-.conversation--details {
-  padding: 0 var(--space-slab);
-}
-
 .conversation--labels {
   padding: $space-medium;
 
@@ -398,17 +407,10 @@ export default {
   justify-content: center;
 }
 
-.sub-block-title {
-  margin-bottom: var(--space-small);
-}
-
 .conversation--actions {
-  padding: 0 var(--space-normal) var(--space-smaller);
+  margin-bottom: var(--space-normal);
 }
 
-.multiselect__label {
-  margin-bottom: var(--space-smaller);
-}
 .option__desc {
   display: flex;
   align-items: center;
@@ -419,12 +421,4 @@ export default {
     flex-shrink: 0;
   }
 }
-.self-assign {
-  display: flex;
-  justify-content: space-between;
-
-  .button-content {
-    margin-bottom: var(--space-small);
-  }
-}
 </style>

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -3,19 +3,18 @@
     <div class="contact--info">
       <thumbnail
         :src="contact.thumbnail"
-        size="64px"
-        :badge="channelType"
+        size="56px"
         :username="contact.name"
         :status="contact.availability_status"
       />
 
       <div class="contact--details">
-        <div class="contact--name">
+        <h3 class="sub-block-title contact--name">
           {{ contact.name }}
-        </div>
-        <div v-if="additionalAttributes.description" class="contact--bio">
+        </h3>
+        <p v-if="additionalAttributes.description" class="contact--bio">
           {{ additionalAttributes.description }}
-        </div>
+        </p>
         <social-icons :social-profiles="socialProfiles" />
         <div class="contact--metadata">
           <contact-info-row
@@ -52,7 +51,7 @@
       <woot-button
         v-if="!showNewMessage"
         class="edit-contact"
-        variant="clear link"
+        variant="link"
         size="small"
         @click="toggleEditModal"
       >
@@ -61,6 +60,7 @@
       <div v-else class="contact-actions">
         <woot-button
           class="new-message"
+          variant="smooth"
           size="small expanded"
           @click="toggleConversationModal"
         >
@@ -152,7 +152,7 @@ export default {
 @import '~dashboard/assets/scss/mixins';
 .contact--profile {
   align-items: flex-start;
-  padding: var(--space-normal) var(--space-normal);
+  margin-bottom: var(--space-normal);
 
   .user-thumbnail-box {
     margin-right: $space-normal;
@@ -162,46 +162,26 @@ export default {
 .contact--details {
   margin-top: $space-small;
   width: 100%;
-
-  p {
-    margin-bottom: 0;
-  }
 }
 
 .contact--info {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
   text-align: left;
 }
 
 .contact--name {
-  @include text-ellipsis;
   text-transform: capitalize;
   white-space: normal;
-  font-weight: $font-weight-bold;
-  font-size: $font-size-default;
-}
-
-.contact--bio {
-  margin: $space-small 0 0;
 }
 
 .contact--metadata {
-  margin: var(--space-normal) 0 0;
+  margin-bottom: var(--space-small);
 }
 
-.social--icons {
-  i {
-    font-size: $font-weight-normal;
-  }
-}
 .contact-actions {
-  margin: var(--space-small) 0;
+  margin-top: var(--space-small);
 }
 .button.edit-contact {
-  margin-left: var(--space-two);
-  padding-left: var(--space-micro);
+  margin-left: var(--space-medium);
 }
 
 .button.new-message {

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue

@@ -69,23 +69,21 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-
 .contact-info--row {
   .contact-info--icon {
-    font-size: $font-size-default;
-    min-width: $space-medium;
+    font-size: var(--font-size-default);
+    min-width: var(--space-medium);
   }
 }
 
 .contact-info--details {
   display: flex;
   align-items: center;
-  margin-bottom: var(--space-one);
-  color: $color-body;
+  margin-bottom: var(--space-small);
+  color: var(--color-body);
 
   .copy-icon {
-    margin-left: $space-one;
+    margin-left: var(--space-smaller);
   }
 
   &.a {
@@ -97,6 +95,7 @@ export default {
 
 .contact-info--details .icon--emoji,
 .contact-info--details .icon--font {
-  margin-right: var(--space-small);
+  display: inline-block;
+  width: var(--space-medium);
 }
 </style>

app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue

@@ -42,15 +42,12 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-
-.contact--social-icon {
-  font-size: $font-size-medium;
-  padding-right: $space-slab;
-  color: $color-body;
-}
-
 .social--icons {
-  margin-top: $space-small;
+  margin-bottom: var(--space-small);
+}
+.contact--social-icon {
+  font-size: var(--font-size-medium);
+  padding-right: var(--space-slab);
+  color: var(--color-body);
 }
 </style>

app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="contact-conversation--panel sidebar-labels-wrap">
+  <div class="sidebar-labels-wrap">
     <div
       v-if="!conversationUiFlags.isFetching"
       class="contact-conversation--list"
@@ -150,22 +150,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
-
-.contact-conversation--panel {
-  padding: var(--space-micro) var(--space-slab) var(--space-one)
-    var(--space-slab);
+.sidebar-labels-wrap {
+  margin-bottom: var(--space-normal);
 }
-
 .contact-conversation--list {
   width: 100%;
 
   .label-wrap {
-    margin-left: var(--space-two);
+    margin-left: var(--space-medium);
     position: relative;
     line-height: var(--space-medium);
-    bottom: var(--space-small);
 
     .dropdown-wrap {
       display: flex;