npm - @syncfusion/blazor-themes - Versions diffs - 28.1.36 → 28.1.37 - Mend

@syncfusion/blazor-themes 28.1.36 → 28.1.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (301) hide show

package/SCSS-Themes/interactive-chat/chat-ui/material-dark-lite.scss CHANGED Viewed

@@ -20,8 +20,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 2px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 2px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 3px 8px !default;
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 5px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: $grey-800 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: $grey-800 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
@@ -545,6 +550,13 @@ $timestamp-border-color: $grey-800 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: $grey-800 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;

package/SCSS-Themes/interactive-chat/chat-ui/material-dark.scss CHANGED Viewed

@@ -20,8 +20,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 2px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 2px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 3px 8px !default;
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 5px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: $grey-800 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: $grey-800 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
@@ -545,6 +550,13 @@ $timestamp-border-color: $grey-800 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: $grey-800 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -749,6 +757,7 @@ $timestamp-border-color: $grey-800 !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {

package/SCSS-Themes/interactive-chat/chat-ui/material-lite.scss CHANGED Viewed

@@ -20,8 +20,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 2px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 2px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 3px 8px !default;
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 5px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: $grey-300 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: $grey-300 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
@@ -545,6 +550,13 @@ $timestamp-border-color: $grey-300 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: $grey-300 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;

package/SCSS-Themes/interactive-chat/chat-ui/material.scss CHANGED Viewed

@@ -20,8 +20,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 2px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 2px !default;
+$chat-suggesstion-line-height: 18px !default;
 $chat-suggesstions-list-padding: 3px 8px !default;
+$chat-suggesstion-bigger-line-height: 22px !default;
 $chat-suggesstions-li-padding-bigger: 5px 12px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: $grey-300 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: $grey-300 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
@@ -545,6 +550,13 @@ $timestamp-border-color: $grey-300 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: $grey-300 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -749,6 +757,7 @@ $timestamp-border-color: $grey-300 !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {

package/SCSS-Themes/interactive-chat/chat-ui/material3-dark-lite.scss CHANGED Viewed

@@ -20,8 +20,10 @@ $timebreak-font-weight: 500 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 14px !default;
 $chat-suggesstions-list-padding: 5px 8px !default;
+$chat-suggesstion-bigger-line-height: 20px !default;
 $chat-suggesstions-li-padding-bigger: 6px 10px !default;
 $typing-user-font-size-bigger: 16px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: transparent !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: transparent !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
@@ -545,6 +550,13 @@ $timestamp-border-color: transparent !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: transparent !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;

package/SCSS-Themes/interactive-chat/chat-ui/material3-dark.scss CHANGED Viewed

@@ -20,8 +20,10 @@ $timebreak-font-weight: 500 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 14px !default;
 $chat-suggesstions-list-padding: 5px 8px !default;
+$chat-suggesstion-bigger-line-height: 20px !default;
 $chat-suggesstions-li-padding-bigger: 6px 10px !default;
 $typing-user-font-size-bigger: 16px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: transparent !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: transparent !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
@@ -545,6 +550,13 @@ $timestamp-border-color: transparent !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: transparent !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -749,6 +757,7 @@ $timestamp-border-color: transparent !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {

package/SCSS-Themes/interactive-chat/chat-ui/material3-lite.scss CHANGED Viewed

@@ -20,8 +20,10 @@ $timebreak-font-weight: 500 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 14px !default;
 $chat-suggesstions-list-padding: 5px 8px !default;
+$chat-suggesstion-bigger-line-height: 20px !default;
 $chat-suggesstions-li-padding-bigger: 6px 10px !default;
 $typing-user-font-size-bigger: 16px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: transparent !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: transparent !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
@@ -545,6 +550,13 @@ $timestamp-border-color: transparent !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: transparent !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;

package/SCSS-Themes/interactive-chat/chat-ui/material3.scss CHANGED Viewed

@@ -20,8 +20,10 @@ $timebreak-font-weight: 500 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 14px !default;
 $chat-suggesstions-list-padding: 5px 8px !default;
+$chat-suggesstion-bigger-line-height: 20px !default;
 $chat-suggesstions-li-padding-bigger: 6px 10px !default;
 $typing-user-font-size-bigger: 16px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: transparent !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: transparent !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
@@ -545,6 +550,13 @@ $timestamp-border-color: transparent !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: transparent !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -749,6 +757,7 @@ $timestamp-border-color: transparent !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {

package/SCSS-Themes/interactive-chat/chat-ui/tailwind-dark-lite.scss CHANGED Viewed

@@ -20,8 +20,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 20px !default;
 $chat-suggesstions-list-padding: 1px 8px !default;
+$chat-suggesstion-bigger-line-height: 24px !default;
 $chat-suggesstions-li-padding-bigger: 3px 8px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
@@ -545,6 +550,13 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;

package/SCSS-Themes/interactive-chat/chat-ui/tailwind-dark.scss CHANGED Viewed

@@ -20,8 +20,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 20px !default;
 $chat-suggesstions-list-padding: 1px 8px !default;
+$chat-suggesstion-bigger-line-height: 24px !default;
 $chat-suggesstions-li-padding-bigger: 3px 8px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
@@ -545,6 +550,13 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -749,6 +757,7 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {

package/SCSS-Themes/interactive-chat/chat-ui/tailwind-lite.scss CHANGED Viewed

@@ -20,8 +20,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 20px !default;
 $chat-suggesstions-list-padding: 1px 8px !default;
+$chat-suggesstion-bigger-line-height: 24px !default;
 $chat-suggesstions-li-padding-bigger: 3px 8px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
@@ -545,6 +550,13 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;

package/SCSS-Themes/interactive-chat/chat-ui/tailwind.scss CHANGED Viewed

@@ -20,8 +20,10 @@ $timebreak-font-weight: 400 !default;
 $timebreak-border-radius: 4px !default;
 $typing-user-font-size: 12px !default;
 $suggestion-border-radius: 4px !default;
+$chat-suggesstion-line-height: 20px !default;
 $chat-suggesstions-list-padding: 1px 8px !default;
+$chat-suggesstion-bigger-line-height: 24px !default;
 $chat-suggesstions-li-padding-bigger: 3px 8px !default;
 $typing-user-font-size-bigger: 14px !default;
 $chat-text-font-size-bigger: 16px !default;
@@ -367,7 +369,7 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
       }
       li {
         font-size: $timebreak-font-size;
-        line-height: 16px;
+        line-height: $chat-suggesstion-line-height;
         font-weight: $suggesstions-font-weight;
         padding: $chat-suggesstions-list-padding;
         margin: 8px 4px 0;
@@ -449,6 +451,9 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
         }
       }
     }
+    .e-empty-chat-template {
+      margin: auto;
+    }
   }
 }
@@ -545,6 +550,13 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
     }
     .e-header-icon,
     .e-message-icon,
+    .e-user-icon {
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: cover;
+    }
+    .e-message-icon,
     .e-user-icon {
       color: $sender-icon-color;
       @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
@@ -553,10 +565,6 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
       @else {
         background-color: $sender-icon-bg-color;
       }
-      border-radius: 50%;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: cover;
     }
     .e-indicator {
       background: $chat-left-bg-color;
@@ -749,6 +757,7 @@ $timestamp-border-color: $content-bg-color-alt3 !default;
       li {
         font-size: $timebreak-font-size-bigger;
         padding: $chat-suggesstions-li-padding-bigger;
+        line-height: $chat-suggesstion-bigger-line-height;
       }
     }
     &.e-rtl {