chore(chat): component styling

Author: SisIvanova

src/components/chat/themes/chat.base.scss

@@ -1,11 +1,12 @@
 @use 'styles/common/component';
 @use 'styles/utilities' as *;
 
+//should be removed
 :host {
   width: 100%;
   height: 600px;
   overflow: hidden;
-  box-shadow: 0 8px 24px #1f1f1f;
+  box-shadow: var(--ig-elevation-4);
   display: flex;
   flex-direction: column;
 }
@@ -16,11 +17,14 @@
   align-items: center;
   height: 100%;
   gap: rem(40px);
+}
 
-  > * {
-    max-width: rem(760px);
-    width: 100%;
-  }
+igc-chat-message-list,
+[part='empty-state'],
+[part='suggestions-container'] {
+  max-width: rem(760px);
+  width: 100%;
+  margin-inline: rem(16px);
 }
 
 [part='empty-state'] {
@@ -34,7 +38,7 @@
   padding: rem(16px) rem(13px);
   gap: rem(16px);
   box-shadow: var(--ig-elevation-4);
-  max-width: 100%;
+  width: 100%;
 }
 
 [part='title'] {
@@ -50,5 +54,7 @@
 
   igc-chip {
     --ig-size: 3;
+
+    width: fit-content;
   }
 }

src/components/chat/themes/input.base.scss

@@ -1,10 +1,37 @@
 @use 'styles/common/component';
 @use 'styles/utilities' as *;
 
+:host {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-block: rem(16px);
+    justify-content: center;
+}
+
+[part~='input-container'] {
+    display: flex;
+    flex-direction: column;
+    max-width: rem(760px);
+    width: 100%;
+    margin-inline: rem(16px);
+    gap: rem(8px);
+}
+
+//should be changed when the design is ready
+[part~='dragging'] {
+    igc-textarea::part(container) {    
+        background: color(gray, 300);
+
+        &::after {
+            border-block-end: rem(2px) solid color(primary, 500);
+        }
+    }
+}
+
 [part='buttons-container'] {
     display: flex;
     align-items: center;
-    margin-block: rem(8px) rem(16px);
 }
 
 [part='send-button'] {
@@ -14,7 +41,6 @@
 [part='attachments'] {
     display: flex;
     gap: rem(8px);
-    margin-block-end: rem(8px);
 }
 
 igc-file-input {

src/components/chat/themes/message.base.scss

@@ -5,11 +5,13 @@
   display: flex;
   justify-content: flex-start;
   align-items: flex-end;
+  margin-inline-end: auto;
+  max-width: rem(576px);
 }
 
 [part~='sent'] {
-  max-width: rem(576px);
   margin-inline-start: auto;
+  margin-inline-end: unset;
   padding: rem(12px) rem(16px);
   border-radius: rem(24px) rem(24px) 0;
 }

src/components/chat/themes/shared/chat-message.common.scss

@@ -3,10 +3,17 @@
 
 $theme: $material;
 
+//should be changed when the design is ready
+:host([part~='active']) {
+    &::part(message-container) {
+        box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'message-color');
+    }
+}
+
 [part~='sent'] {
     background: var-get($theme, 'message-background');
 }
 
 [part~='bubble'] {
     color: var-get($theme, 'message-color');
-}
+}

src/components/chat/themes/shared/chat.common.scss

@@ -3,7 +3,7 @@
 
 $theme: $material;
 
-.chat-container {
+:host {
     background: var-get($theme, 'background');
 }