chore: Refactor conversation info panel for RTL (#6526)

* chore: Refactor conversation info panel for RTL

* chore: Adds comments

* chore: Settings header icon fix

* chore: Toggle layout switch

* chore: Border fix in chat list

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

@@ -3,13 +3,13 @@
     class="small-12 medium-3 bg-white contact--panel"
     :class="{ 'border-left': showAvatar }"
   >
-    <span v-if="showAvatar" class="close-button" @click="onClose">
-      <fluent-icon icon="dismiss" class="close-icon" />
-    </span>
     <contact-info
+      :show-close-button="showCloseButton"
       :show-avatar="showAvatar"
       :contact="contact"
+      close-icon-name="dismiss"
       @panel-close="onClose"
+      @toggle-panel="onClose"
     />
     <draggable
       :list="contactSidebarItems"
@@ -113,6 +113,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -164,19 +168,6 @@ export default {
   }
 }
 
-.close-button {
-  position: absolute;
-  right: var(--space-normal);
-  top: 3.6rem;
-  font-size: var(--font-size-big);
-  color: var(--s-500);
-  z-index: 1;
-
-  .close-icon {
-    margin-right: var(--space-smaller);
-  }
-}
-
 .conversation--details {
   padding: 0 var(--space-normal);
 }

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue

@@ -29,7 +29,11 @@
       class="overflow-hidden column contact--dashboard-content"
     >
       <div class="row h-full">
-        <contact-info-panel :show-avatar="false" :contact="contact" />
+        <contact-info-panel
+          :show-close-button="false"
+          :show-avatar="false"
+          :contact="contact"
+        />
         <div class="small-12 medium-9 h-full">
           <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
             <woot-tabs-item

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

@@ -74,4 +74,11 @@ export default {
   margin-bottom: var(--space-normal);
   color: var(--b-500);
 }
+
+::v-deep .conversation {
+  padding-right: 0;
+  .conversation--details {
+    padding-left: var(--space-small);
+  }
+}
 </style>

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

@@ -1,11 +1,10 @@
 <template>
   <div class="medium-3 bg-white contact--panel">
-    <woot-button
-      icon="chevron-right"
-      class="close-button clear secondary"
-      @click="onPanelToggle"
+    <contact-info
+      :contact="contact"
+      :channel-type="channelType"
+      @toggle-panel="onPanelToggle"
     />
-    <contact-info :contact="contact" :channel-type="channelType" />
     <draggable
       :list="conversationSidebarItems"
       :disabled="!dragEnabled"
@@ -295,15 +294,6 @@ export default {
   }
 }
 
-.close-button {
-  position: absolute;
-  right: $space-two;
-  top: $space-slab;
-  font-size: $font-size-default;
-  color: $color-heading;
-  z-index: 9989;
-}
-
 .conversation--labels {
   padding: $space-medium;
 

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

@@ -1,13 +1,21 @@
 <template>
   <div class="contact--profile">
     <div class="contact--info">
-      <thumbnail
-        v-if="showAvatar"
-        :src="contact.thumbnail"
-        size="56px"
-        :username="contact.name"
-        :status="contact.availability_status"
-      />
+      <div class="contact-info--header">
+        <thumbnail
+          v-if="showAvatar"
+          :src="contact.thumbnail"
+          size="56px"
+          :username="contact.name"
+          :status="contact.availability_status"
+        />
+        <woot-button
+          v-if="showCloseButton"
+          :icon="closeIconName"
+          class="clear secondary close-button--rtl"
+          @click="onPanelToggle"
+        />
+      </div>
 
       <div class="contact--details">
         <div v-if="showAvatar" class="contact--name-wrap">
@@ -194,6 +202,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
+    closeIconName: {
+      type: String,
+      default: 'chevron-right',
+    },
   },
   data() {
     return {
@@ -244,6 +260,9 @@ export default {
     toggleEditModal() {
       this.showEditModal = !this.showEditModal;
     },
+    onPanelToggle() {
+      this.$emit('toggle-panel');
+    },
     toggleConversationModal() {
       this.showConversationModal = !this.showConversationModal;
     },
@@ -295,10 +314,6 @@ export default {
   position: relative;
   align-items: flex-start;
   padding: var(--space-normal);
-
-  .user-thumbnail-box {
-    margin-right: var(--space-normal);
-  }
 }
 
 .contact--details {
@@ -310,6 +325,12 @@ export default {
   text-align: left;
 }
 
+.contact-info--header {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+
 .contact--name-wrap {
   display: flex;
   align-items: center;
@@ -319,7 +340,7 @@ export default {
 .contact--name {
   text-transform: capitalize;
   white-space: normal;
-  margin: 0 var(--space-smaller) 0 0;
+  margin: 0 var(--space-smaller) 0 var(--space-smaller);
 
   a {
     color: var(--color-body);
@@ -346,9 +367,10 @@ export default {
     margin-right: var(--space-small);
   }
 }
-.merege-summary--card {
+.merge-summary--card {
   padding: var(--space-normal);
 }
+
 .contact--bio {
   word-wrap: break-word;
 }

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

@@ -335,7 +335,6 @@ export default {
   align-items: center;
   height: 3.9rem;
   background: var(--color-background-light);
-
   border: 1px solid var(--color-border);
   padding: var(--space-smaller) var(--space-small);
   border-radius: var(--border-radius-small);
@@ -343,6 +342,7 @@ export default {
   .contact-name {
     margin: 0;
     margin-left: var(--space-small);
+    margin-right: var(--space-small);
   }
 }
 

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

@@ -43,6 +43,8 @@ export default {
 
 <style scoped lang="scss">
 .social--icons {
+  align-items: flex-end;
+  display: flex;
   margin: var(--space-small) 0 var(--space-smaller);
 }