Merge pull request #1064 from IgniteUI/apetrov/chat-styling-sample

fix(chat): update styling sample

Author: simeonoff

samples/interactions/chat/styling/src/ChatStyling.css

@@ -1,60 +1,63 @@
-.chat-wrapper {
-    width: 100%;
-    height: 100%;
-}
-
 igc-chat {
-    border: 2px solid var(--ig-gray-300);
+  --message-actions-color: var(--ig-warn-900);
+
+  background: var(--ig-warn-50);
 }
 
 igc-chat::part(header) {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-bottom: 1px solid var(--ig-gray-300);
-    background-color: var(--ig-gray-200);
-    font-family: 'Franklin Gothic Medium';
-    color: var(--ig-gray-700);
+  background-color: var(--ig-gray-800);
+  color: var(--ig-warn-400);
 }
 
 igc-chat::part(message-container) {
-    background: var(--igc-chat-bubble-bg, #eee);
-    color: var(--igc-chat-text-color, #222);
-    padding: 12px;
-    border-radius: 8px;
-    transition: background .15s;
+  background: var(--ig-warn-200);
+  color: var(--ig-warn-200-contrast);
 }
 
 igc-chat::part(message-sent) {
-    background: var(--igc-chat-sent-bubble-bg, #e6f4ff);
-    color: var(--igc-chat-sent-text-color, #03396b);
+  background: var(--ig-warn-500);
+  color: var(--ig-warn-500-contrast);
 }
 
 igc-chat::part(message-header) {
-    color: #c00000; 
-    font-weight: bold; 
-    margin: 8px;
+  color: var(--ig-warn-A700);
+}
+
+igc-chat::part(attachment-header) {
+  background: var(--ig-warn-100);
 }
 
-igc-chat::part(message-actions-container) {
-    border-top: 1px solid var(--ig-gray-300);
+igc-chat::part(attachment-icon) {
+  color: var(--ig-warn-500);
 }
 
 igc-chat::part(suggestion) {
-    background-color: var(--ig-primary-100);
-    color: var(--ig-primary-800);
-    margin: .125rem;
-    border-radius: 20px;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
+  background-color: var(--ig-warn-500);
+  color: var(--ig-warn-500-contrast);
+}
+
+igc-chat::part(suggestions-header) {
+  color: var(--ig-success-300);
 }
 
-igc-chat::part(message-attachment) {
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
-    background: var(--igc-chat-sent-bubble-bg);
+igc-chat::part(input-area) {
+  border-color: var(--ig-surface-700);
+}
 
+igc-chat::part(text-input) {
+  --box-background: var(--ig-warn-100);
+  --box-background-hover: var(--ig-warn-100);
+  --box-background-focus: var(--ig-warn-200);
+  --idle-button-line-color: var(--ig-surface-700);
+  --hover-bottom-line-color: var(--ig-surface-700);
+  --focused-bottom-line-color: var(--ig-warn-300);
 }
 
-igc-chat::part(input-attachments-container) {
-    border: 5px solid var(--ig-gray-300);
+igc-chat::part(send-button) {
+  --background: var(--ig-warn-400);
+  --foreground: var(--ig-warn-400-contrast);
+  --hover-background: var(--ig-warn-400);
+  --hover-foreground: var(--ig-warn-400-contrast);
+  --disabled-background: var(--ig-gray-300);
+  --disabled-foreground: var(--ig-gray-700);
 }

samples/interactions/chat/styling/src/index.css

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom/client";
-import "./index.css";
+import "./layout.css";
 import "./ChatStyling.css";
 import {
   ChatMessageRenderContext,
   IgrAvatar,
   IgrChat,
   IgrChatOptions
 } from "igniteui-react";
-import "igniteui-webcomponents/themes/light/bootstrap.css";
+import "igniteui-webcomponents/themes/light/material.css";
 
 export default function ChatStyling() {
   const [draftMessage, setDraftMessage] = useState(null);

samples/interactions/chat/styling/src/index.tsx

@@ -0,0 +1,18 @@
+.chat-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+igc-chat {
+  border-radius: .5rem;
+}
+
+igc-chat::part(message-container) {
+  border-radius: .5rem;
+}
+
+igc-chat::part(suggestion) {
+  margin: .125rem;
+  border-radius: 1.25rem;
+  cursor: pointer;
+}