fix: Changes thumbnail colors to new color scheme (#3483)

* Enhancement: Updates sidebar to a new design (#2733)

* feat: Changes primary navbar to new design (#2598)

* feat: updates design for secondary navbar (#2612)

* Changes primary nvbar to new design

* Updates design for contexual sidebar

* Fixes issues with JSON

* Remove duplication of notificatons in Navigation

* Fixes broken tests

* Fixes broken tests

* Update app/javascript/dashboard/components/layout/AvailabilityStatus.vue

* Update app/javascript/dashboard/components/layout/AvailabilityStatus.vue

* Update app/javascript/dashboard/components/layout/SidebarItem.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/components/layout/SidebarItem.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/modules/sidebar/components/Secondary.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Chore: Update design changes to features

* Fixes menu transitions and refactors code

* Refactors sidebar routeing logic

* lint error fixes

* Fixes dropdown menu styles

* Fixes secondary new item links

* Fixes lint scss issues

* fixes linter issues

* Fixes broken test cases

* Update AvailabilityStatus.spec.js

* Review feedbacks

* Fixes add modal for label

* Add tooltip for primary menu item

* Tooltip for notifications

* Adds tooltip for primary menu items

* Review fixes

* Review fixes

* Fix merge issues

* fixes logo size for login pages

* fixes Merge breaks with styles

* fix: Changes thumbnail colors to new color scheme

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -66,9 +66,9 @@ export default {
 }
 .cw-accordion--title {
   align-items: center;
-  background: var(--b-50);
+  background: var(--s-50);
-  border-bottom: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--s-100);
-  border-top: 1px solid var(--color-border);
+  border-top: 1px solid var(--s-100);
   cursor: pointer;
   display: flex;
   justify-content: space-between;

app/javascript/dashboard/components/widgets/Avatar.vue

@@ -22,7 +22,7 @@ export default {
     },
     color: {
       type: String,
-      default: '#1f93ff',
+      default: '',
     },
     customStyle: {
       type: Object,
@@ -43,15 +43,21 @@ export default {
   },
   computed: {
     style() {
-      return {
+      let style = {
         width: `${this.size}px`,
         height: `${this.size}px`,
         borderRadius: this.rounded ? '50%' : 0,
         lineHeight: `${this.size + Math.floor(this.size / 20)}px`,
-        backgroundColor: this.backgroundColor,
         fontSize: `${Math.floor(this.size / 2.5)}px`,
-        color: this.color,
       };
+
+      if (this.backgroundColor) {
+        style = { ...style, backgroundColor: this.backgroundColor };
+      }
+      if (this.color) {
+        style = { ...style, color: this.color };
+      }
+      return style;
     },
     userInitial() {
       return this.initials || this.initial(this.username);
@@ -81,6 +87,7 @@ export default {
   align-items: center;
   justify-content: center;
   text-align: center;
-  background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
+  background-image: linear-gradient(to top, var(--w-100) 0%, var(--w-75) 100%);
+  color: var(--w-600);
 }
 </style>

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -11,7 +11,6 @@
       v-else
       :username="username"
       :class="thumbnailClass"
-      color="white"
       :size="avatarSize"
     />
     <img
@@ -167,12 +166,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/foundation-settings';
-@import '~dashboard/assets/scss/mixins';
-
 .user-thumbnail-box {
-  @include flex-shrink;
+  flex: 0 0 auto;
+  max-width: 100%;
   position: relative;
 
   .user-thumbnail {
@@ -190,18 +186,18 @@ export default {
   .source-badge {
     background: white;
     border-radius: var(--border-radius-small);
-    bottom: -$space-micro;
+    bottom: var(--space-minus-micro);
     box-shadow: var(--shadow-small);
-    height: $space-slab;
+    height: var(--space-slab);
     padding: var(--space-micro);
     position: absolute;
-    right: $zero;
+    right: 0;
-    width: $space-slab;
+    width: var(--space-slab);
   }
 
   .user-online-status {
     border-radius: 50%;
-    bottom: $space-micro;
+    bottom: var(--space-micro);
 
     &:after {
       content: ' ';
@@ -209,11 +205,15 @@ export default {
   }
 
   .user-online-status--online {
-    background: $success-color;
+    background: var(--g-400);
   }
 
   .user-online-status--busy {
-    background: $warning-color;
+    background: var(--y-700);
+  }
+
+  .user-online-status--offline {
+    background: var(--s-500);
   }
 
   .user-online-status--offline {

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

@@ -138,7 +138,7 @@ export default {
   border-bottom: 1px solid var(--color-border-light);
 
   &:nth-child(2n) {
-    background: var(--b-50);
+    background: var(--s-25);
   }
 }
 </style>

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue

@@ -102,7 +102,7 @@ export default {
   &.odd {
     .conversation--attribute {
       &:nth-child(2n + 1) {
-        background: var(--b-50);
+        background: var(--s-25);
       }
     }
   }
@@ -110,7 +110,7 @@ export default {
   &.even {
     .conversation--attribute {
       &:nth-child(2n) {
-        background: var(--b-50);
+        background: var(--s-25);
       }
     }
   }

app/javascript/shared/assets/stylesheets/colors.scss

@@ -4,6 +4,7 @@
 
   --w-25: #F5FAFF;
   --w-50: #EBF5FF;
+  --w-75: #D6EBFF;
   --w-100: #C2E1FF;
   --w-200: #99CEFF;
   --w-300: ##70BAFF;