@rtsee/ngx 0.0.32 → 0.0.34

package/dist/ngx/src/lib/common/compiled-scss/styles.scss

@@ -29,14 +29,32 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 $rts-offset-sm: 8px;
 $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
@@ -64,14 +82,32 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 .rtsee-preloader {
   text-align: center;
@@ -143,14 +179,32 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 $rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
 
@@ -181,14 +235,34 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
+
+$control-icon-size: 18px;
 
 * {
   box-sizing: border-box;
@@ -257,7 +331,32 @@ $rts-super-active-color: #3BACB6;
     z-index: 1;
   }
 
+   // new styles
 
+  .rtsee-messenger-main-menu, .rtsee-messenger-profile {
+    .rtsee-messenger-controls, .rtsee-messenger-profile-controls {
+      list-style-type: none;
+      padding-inline-start: $rts-new-offset-sm;
+      .rtsee-messenger-control-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 18px;
+      }
+
+      .rtsee-messenger-control-icon {
+        display: flex;
+        align-items: center;
+        height: $control-icon-size;
+        width: $control-icon-size;
+        justify-content: center;
+        background: $rts-new-secondary-bg-color-light;
+        border-radius: 50%;
+        padding: $rts-new-offset-sm;
+        margin-right: $rts-new-offset-sm;
+        color: $rts-new-primary-color;
+      }
+    }
+  }
 }
 
 $rts-offset-sm: 8px;
@@ -287,16 +386,36 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 .rtsee-chats-list {
+  margin-top: $rts-new-offset-sm;
+
   .rtsee-chat-thumbnail-container {
 
   }
@@ -337,20 +456,39 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
-$rtsee-chat-input-height: 60px;
+$rtsee-chat-input-height: 50px;
 
 .rtsee-chat {
   height: 100%;
   padding-bottom: $rtsee-chat-input-height;
+  background: $rts-new-secondary-bg-color-light;
 
   .rtsee-chat-body-container {
     height: 100%;
@@ -358,9 +496,12 @@ $rtsee-chat-input-height: 60px;
 
   .rtsee-chat-footer-container {
     position: absolute;
-    width: 100%;
     height: $rtsee-chat-input-height;
-    box-shadow: 0 -1px 5px -1px rgb(0 0 0 / 21%);
+    width: calc(100% - #{$rts-new-offset-sm * 2});
+    margin: 0 $rts-new-offset-sm;
+    background: $rts-main-bg-color-light;
+    border-radius: $rts-new-border-radius-rounded;
+    bottom: $rts-new-offset-sm;
   }
 }
 
@@ -391,14 +532,32 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 $rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
 
@@ -429,22 +588,42 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
 
-$unread-count-block: 24px;
+// end of new design-variables
+
+
+$unread-count-block: 18px;
+$last-message-text-color: #707579;
 
 .rtsee-chat-thumbnail {
   position: relative;
-  height: $rts-user-avatar-d-md + $rts-offset-sm * 2;
-  padding: $rts-offset-sm $rts-offset-sm $rts-offset-sm $rts-offset-sm * 2 + $rts-user-avatar-d-md;
+  height: $rts-user-avatar-d-sm + $rts-offset-sm * 2;
+  padding: $rts-new-offset-sm $rts-new-offset-sm $rts-new-offset-sm $rts-new-offset-sm * 2 + $rts-new-user-avatar-d-sm;
   cursor: pointer;
+  border-radius: $rts-new-default-border-radius;
 
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -454,28 +633,28 @@ $unread-count-block: 24px;
   user-select: none;
 
   &:hover {
-    background-color: $rts-active-bg-color-light;
+    background-color: $rts-new-active-bg-color-light;
   }
 
   .rtsee-chat-thumbnail-image {
     position: absolute;
-    left: $rts-offset-sm;
+    left: $rts-new-offset-sm;
     top: $rts-offset-sm;
 
     img {
       border-radius: 50%;
       overflow: hidden;
-      width: $rts-user-avatar-d-md;
+      width: $rts-new-user-avatar-d-sm;
     }
   }
 
   .rtsee-chat-thumbnail-left {
-    height: $rts-user-avatar-d-md;
+    height: $rts-new-user-avatar-d-sm;
 
     .rtsee-chat-thumbnail-name {
       position: relative;
-      height: $rts-user-avatar-d-md * 0.33;
-      line-height: $rts-user-avatar-d-md * 0.33;;
+      height: $rts-new-user-avatar-d-sm * 0.33;
+      line-height: $rts-new-user-avatar-d-sm * 0.33;
       margin: 0;
       font-size: 16px;
       font-weight: 600;
@@ -488,7 +667,7 @@ $unread-count-block: 24px;
       padding-right: $rts-message-status-width + $rts-offset-sm;
 
       .rtsee-chat-thumbnail-status {
-        height: $rts-user-avatar-d-md * 0.33;
+        height: $rts-new-user-avatar-d-sm * 0.33;
         position: absolute;
         right: 0;
         top: 0;
@@ -497,12 +676,12 @@ $unread-count-block: 24px;
 
     .rtsee-chat-thumbnail-last-message {
       position: relative;
-      height: $rts-user-avatar-d-md * 0.66;
-      line-height: $rts-user-avatar-d-md * 0.33;
+      height: $rts-new-user-avatar-d-sm * 0.66;
+      line-height: $rts-new-user-avatar-d-sm * 0.33;
       margin: 0;
-      font-size: 16px;
+      font-size: $rts-new-small-text-size;
       font-weight: 400;
-      color: #707579;
+      color: $last-message-text-color;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: pre-wrap;
@@ -525,13 +704,12 @@ $unread-count-block: 24px;
         height: $unread-count-block;
         width: $unread-count-block;
         border-radius: 50%;
-        background-color: $rts-main-bg-color-dark;
+        background-color: $rts-new-primary-color;
         text-align: center;
-        line-height: 22px;
-        opacity: 0.7;
+        line-height: 16px;
 
         .rtsee-messenger-thumbnail-unread-count {
-          font-size: 14px;
+          font-size: 10px;
           color: #ffffff;
           font-weight: 300;
         }
@@ -569,18 +747,38 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 .rtsee-messenger-message-container {
   width: 100%;
   padding: 0 $rts-offset-sm;
+  position: relative;
+  overflow: hidden;
 
   &:after {
     content: "";
@@ -591,16 +789,23 @@ $rts-super-active-color: #3BACB6;
   &.rtsee-message-from-me {
     .rtsee-messenger-message {
       float: right;
-      background-color: $rts-active-bg-color-light;
+      background-color: $rts-new-primary-color;
+      color: $rts-font-color-dbg-light;
+    }
+
+    .message-tail {
+      left: unset;
+      right: -2px;
+      border-bottom: 10px solid $rts-new-primary-color;
     }
   }
 
   .rtsee-messenger-message {
-    max-width: 80%;
     float: left;
     background-color: $rts-main-bg-color-light;
-    border-radius: $rts-default-border-radius;
-    padding: 8px;
+    border-radius: $rts-new-border-radius-rounded;
+    padding: $rts-new-offset-xsm $rts-new-offset-sm $rts-new-offset-sm $rts-new-offset-sm;
+
 
     overflow-wrap: break-word;
     word-wrap: break-word;
@@ -618,6 +823,18 @@ $rts-super-active-color: #3BACB6;
       float: right;
     }
   }
+
+  .message-tail {
+    position: absolute;
+    bottom: 0;
+    left: -2px;
+
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid #fff;
+  }
 }
 
 $rts-offset-sm: 8px;
@@ -647,19 +864,39 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
+
+$messenger-date-background-color: #FFFFFF7F;
 
 .rtsee-messenger-messages-list {
   height: 100%;
   overflow: auto;
-  background-color: $rts-secondary-bg-color-light;
+  background-color: $rts-new-secondary-bg-color-light;
   padding-top: $rts-offset-sm;
 
   .rtsee-messenger-message-wrapper {
@@ -676,11 +913,13 @@ $rts-super-active-color: #3BACB6;
 
     span {
       display: inline-block;
-      background-color: $rts-main-bg-color-dark;
-      color: $rts-font-color-dbg-light;
-      padding: 4px $rts-offset-sm;
-      border-radius: $rts-rounded-border-radius;
+      background-color: $messenger-date-background-color;
       margin: 0 auto;
+      font-size: 16px;
+      font-weight: 400;
+      color: $rts-new-primary-color;
+      padding: $rts-new-offset-xsm / 2 $rts-new-offset-md;
+      border-radius: $rts-new-border-radius-rounded;
     }
   }
 
@@ -713,14 +952,32 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 $rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
 
@@ -751,14 +1008,32 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 .rtsee-messenger-header {
   position: relative;
@@ -766,7 +1041,6 @@ $rts-super-active-color: #3BACB6;
   padding-left: $rts-messenger-header-height;
   padding-right: $rts-messenger-header-height;
   overflow: hidden;
-  box-shadow: 0 1px 5px -1px rgb(0 0 0 / 21%);
   background-color: $rts-main-bg-color-light;
 
   -webkit-touch-callout: none;
@@ -803,6 +1077,8 @@ $rts-super-active-color: #3BACB6;
     padding: $rts-offset-sm $rts-messenger-header-height $rts-offset-sm $rts-offset-sm;
     height: $rts-messenger-header-height;
     transition: height, padding-left 0.2s;
+    display: flex;
+    align-items: center;
 
     .rtsee-messenger-profile-image-container {
       right: 0;
@@ -811,6 +1087,7 @@ $rts-super-active-color: #3BACB6;
 
     &.rtsee-messenger-header-opened-chat-info-expanded {
       height: 100%;
+      display: initial;
 
       .rtsee-messenger-profile-image-container {
         width: 100%;
@@ -850,10 +1127,20 @@ $rts-super-active-color: #3BACB6;
     width: $rts-messenger-header-height;
     overflow: hidden;
     border: none;
+    background: transparent;
     outline: none;
-    background-color: transparent;
-    padding: 8px;
-    font-size: 18px;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    color: $rts-new-primary-color;
+
+    .unread-count {
+      background: $rts-new-primary-color;
+      padding: $rts-new-offset-xsm / 2;
+      border-radius: $rts-new-border-radius-rounded;
+      color: $rts-main-bg-color-light;
+      margin-left: 2px;
+    }
   }
 
   .rtsee-messenger-profile-image-container {
@@ -915,14 +1202,9 @@ $rts-super-active-color: #3BACB6;
     text-overflow: ellipsis;
     overflow: hidden;
     line-height: $rts-messenger-header-height;
-    text-align: center;
     font-weight: 600;
   }
 
-
-
-
-
 }
 
 $rts-offset-sm: 8px;
@@ -952,14 +1234,32 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 $rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
 
@@ -990,14 +1290,32 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 .rtsee-chat-input {
   height: 100%;
@@ -1008,6 +1326,7 @@ $rts-super-active-color: #3BACB6;
   .rtsee-send-message {
     height: 100%;
     overflow: auto;
+    border-radius: $rts-new-border-radius-rounded;
 
     &::-webkit-scrollbar {
       display: none;
@@ -1037,6 +1356,7 @@ $rts-super-active-color: #3BACB6;
     border: none;
     outline: none;
     font-size: 27px;
+    color: $rts-new-primary-color;
   }
 }
 
@@ -1067,14 +1387,32 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 .rtsee-messenger-message-time-and-status {
   height: $rts-user-avatar-d-md * 0.33;
@@ -1085,31 +1423,73 @@ $rts-super-active-color: #3BACB6;
     line-height: $rts-user-avatar-d-md * 0.33;
     width: 20px;
     float: right;
-
-    .rtsee-message-sent-status {
-      color: #707579;
-    }
-
-    .rtsee-message-delivered-status {
-      color: blue;
-    }
-
-    .rtsee-message-seen-status {
-      color: green;
-    }
+    color: $rts-new-primary-color;
   }
 
   .rtsee-messenger-message-time {
     float: right;
-    font-size: .75rem;
+    font-size: 12px;
     font-weight: 300;
     line-height: $rts-user-avatar-d-md * 0.33;
   }
 }
 
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
+
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-font-color-dbg-light: #ffffff;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+$rts-message-status-width: 69px;
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
 
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
 
 
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
+
+$rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+
 $rts-offset-sm: 8px;
 $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
@@ -1137,7 +1517,75 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+// new design-variables
 
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
+
+$search-input-bg-color: #F8F8F8;
+
+.rtsee-messenger-search {
+  .rtsee-messenger-search-input {
+    width: calc(100% - #{$rts-new-offset-sm * 2});
+    border: none;
+    font-size: 18px;
+    background: $search-input-bg-color;
+    padding: $rts-new-offset-sm;
+    margin: 0 $rts-new-offset-sm;
+    border-radius: $rts-new-border-radius-rounded;
+  }
+}
+
+
+
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
+
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-font-color-dbg-light: #ffffff;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+$rts-message-status-width: 69px;
 
 
 $rts-state-bg-color: #D1F1EF;
@@ -1145,6 +1593,27 @@ $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 .rtsee-events-dashboard {
   background-color: $rts-main-bg-color-light;
@@ -1189,14 +1658,32 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 $live-indicator-d: 15px;
 $engage-button-border-thickness: 2px;
@@ -1322,14 +1809,32 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 .rtsee-events-dashboard-session {
   position: relative;
@@ -1411,14 +1916,32 @@ $rts-user-avatar-d-lg: 65px;
 $rts-message-status-width: 69px;
 
 
-
-
-
 $rts-state-bg-color: #D1F1EF;
 $rts-disabled-color: #82DBD8;
 $rts-slightly-active-color: #B3E8E5;
 $rts-super-active-color: #3BACB6;
 
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
 
 
 .rtsee-events-dashboard-event-thumbnail {