From 42b466bda2cf03a09b47ae8bf21aaa0dd16858ad Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Tue, 15 Nov 2022 18:56:24 -0800
Subject: [PATCH] chore: Cleanup the design in widget builder (#5852)

---
 .../widget-preview/components/Widget.vue      | 37 +++++++++++++------
 .../widget-preview/components/WidgetBody.vue  | 16 +++++---
 .../widget-preview/components/WidgetHead.vue  | 26 +++++++------
 .../settings/inbox/WidgetBuilder.vue          |  4 +-
 4 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
index 8ec864042..0b441632b 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
@@ -15,7 +15,14 @@
         <div class="branding">
           <a class="branding-link">
             <img class="branding-image" :src="globalConfig.logoThumbnail" />
-            <span>{{ $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT') }}</span>
+            <span>
+              {{
+                useInstallationName(
+                  $t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
+                  globalConfig.installationName
+                )
+              }}
+            </span>
           </a>
         </div>
       </div>
@@ -45,8 +52,8 @@ import WidgetHead from './WidgetHead';
 import WidgetBody from './WidgetBody';
 import WidgetFooter from './WidgetFooter';
 import InputRadioGroup from 'dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup';
-
-const { LOGO_THUMBNAIL: logoThumbnail } = window.globalConfig || {};
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { mapGetters } from 'vuex';
 
 export default {
   name: 'Widget',
@@ -56,6 +63,7 @@ export default {
     WidgetFooter,
     InputRadioGroup,
   },
+  mixins: [globalConfigMixin],
   props: {
     welcomeHeading: {
       type: String,
@@ -115,12 +123,10 @@ export default {
       ],
       isDefaultScreen: true,
       isWidgetVisible: true,
-      globalConfig: {
-        logoThumbnail,
-      },
     };
   },
   computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
     getWidgetHeadConfig() {
       return {
         welcomeHeading: this.welcomeHeading,
@@ -198,6 +204,7 @@ export default {
   flex-direction: column;
   align-items: center;
 }
+
 .widget-wrapper {
   display: flex;
   flex-direction: column;
@@ -215,13 +222,14 @@ export default {
     justify-content: center;
 
     .branding-link {
-      display: flex;
-      flex-direction: row;
       align-items: center;
       color: var(--b-500);
       cursor: pointer;
+      display: flex;
       filter: grayscale(1);
+      flex-direction: row;
       font-size: var(--font-size-micro);
+      line-height: 1.5;
       opacity: 0.9;
       text-decoration: none;
 
@@ -248,7 +256,7 @@ export default {
   .bubble {
     display: flex;
     align-items: center;
-    border-radius: calc(var(--border-radius-small) * 10);
+    border-radius: calc(var(--border-radius-large) * 10);
     height: calc(var(--space-large) * 2);
     width: calc(var(--space-large) * 2);
     position: relative;
@@ -256,15 +264,22 @@ export default {
     cursor: pointer;
 
     img {
-      height: var(--space-two);
-      width: var(--space-two);
+      height: var(--space-medium);
       margin: var(--space-one) var(--space-one) var(--space-one)
         var(--space-two);
+      width: var(--space-medium);
     }
 
     div {
       padding-right: var(--space-two);
     }
+
+    .bubble-expanded {
+      img {
+        height: var(--space-large);
+        width: var(--space-large);
+      }
+    }
   }
 
   .bubble-close::before,
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
index 1b4ab08a6..d1bddeb6f 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -9,7 +9,7 @@
           {{ config.replyTime }}
         </div>
       </div>
-      <thumbnail username="J" size="40" />
+      <thumbnail username="J" size="40px" />
     </div>
     <div v-else class="conversation-content">
       <div class="conversation-wrap">
@@ -88,18 +88,20 @@ export default {
 <style scoped lang="scss">
 .widget-body-container {
   .availability-content {
+    align-items: flex-end;
     display: flex;
     flex-direction: row;
-    align-items: flex-end;
-    padding: var(--space-one) var(--space-two) var(--space-one) var(--space-two);
     min-height: inherit;
+    padding: var(--space-one) var(--space-two) var(--space-one) var(--space-two);
 
     .availability-info {
       width: 100%;
+
       .team-status {
         font-size: var(--font-size-default);
         font-weight: var(--font-weight-medium);
       }
+
       .reply-wait-message {
         font-size: var(--font-size-mini);
       }
@@ -108,24 +110,27 @@ export default {
   .conversation-content {
     height: calc(var(--space-large) * 10);
     padding: 0 var(--space-two);
+
     .conversation-wrap {
       .user-message {
         align-items: flex-end;
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
-        margin-top: var(--space-zero);
         margin-bottom: var(--space-smaller);
         margin-left: auto;
+        margin-top: var(--space-zero);
         max-width: 85%;
         text-align: right;
       }
+
       .message-wrap {
         margin-right: var(--space-smaller);
         max-width: 100%;
+
         .chat-bubble {
-          box-shadow: var(--shadow-medium);
           border-radius: 2rem;
+          box-shadow: var(--shadow-medium);
           color: var(--white);
           display: inline-block;
           font-size: var(--font-size-nano);
@@ -141,6 +146,7 @@ export default {
             border-bottom-right-radius: var(--border-radius-small);
             background: var(--color-woot);
           }
+
           &.agent {
             background: var(--white);
             border-bottom-left-radius: var(--border-radius-small);
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
index 8f74c987f..ee8a6a064 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
@@ -46,28 +46,30 @@ export default {
 
 <style lang="scss" scoped>
 .header-wrapper {
-  flex-shrink: 0;
-  transition: max-height 300ms;
   background-color: var(--white);
-  padding: var(--space-two);
   border-top-left-radius: var(--border-radius-large);
   border-top-right-radius: var(--border-radius-large);
+  flex-shrink: 0;
+  padding: var(--space-two);
+  transition: max-height 300ms;
 
   .header-branding {
     .header {
+      align-items: center;
       display: flex;
       flex-direction: row;
-      align-items: center;
       justify-content: start;
+
       .logo {
-        width: var(--space-jumbo);
-        height: var(--space-jumbo);
         border-radius: 100%;
-        transition: all 0.5s ease;
+        height: var(--space-larger);
         margin-right: var(--space-small);
+        transition: all 0.5s ease;
+        width: var(--space-larger);
+
         &.small {
-          width: var(--space-large);
           height: var(--space-large);
+          width: var(--space-large);
         }
       }
     }
@@ -75,6 +77,7 @@ export default {
     .header-expanded {
       max-height: var(--space-giga);
       overflow: auto;
+
       h2 {
         font-size: var(--font-size-big);
         margin-bottom: var(--space-small);
@@ -90,15 +93,16 @@ export default {
   }
 
   .title-block {
-    display: flex;
     align-items: center;
+    display: flex;
     font-size: var(--font-size-default);
+
     .online-dot {
       background-color: var(--g-500);
-      height: var(--space-small);
-      width: var(--space-small);
       border-radius: 100%;
+      height: var(--space-small);
       margin: var(--space-zero) var(--space-smaller);
+      width: var(--space-small);
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
index bdc20e14e..5bf4e8493 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -445,8 +445,10 @@ export default {
     }
   }
 }
+
 .widget-container {
   width: 60%;
+
   @include breakpoint(900px down) {
     width: 100%;
   }
@@ -456,7 +458,7 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;
-    min-height: 64rem;
+    min-height: 65rem;
     margin: var(--space-zero) var(--space-two) var(--space-two) var(--space-two);
     padding: var(--space-one) var(--space-one) var(--space-one) var(--space-one);
     background: var(--s-50);