DH updated

frontend/src/digitalHuman/digitalHuman.js

@@ -2,11 +2,13 @@ import React, { useState, useEffect } from 'react';
 import Axios from 'axios';
 import { useDispatch, useSelector } from 'react-redux';
 import { List, Icon, Avatar } from 'antd';
-
+import avatar from './images/avatar.png';
 import { saveMessage } from '../functions/actions/digitalHuman_actions';
 import Message from './sections/messageChat';
 import Card from "./sections/cardChat";
 import './styles/digitalHuman.css';
+import { FaMicrophone } from "react-icons/fa";
+import { IoSend } from "react-icons/io5";
 
 const SpeechRecognition =
     window.SpeechRecognition || window.webkitSpeechRecognition
@@ -159,8 +161,8 @@ function DigitalHuman() {
         // template for normal text 
         if (message.content && message.content.text && message.content.text.text) {
             return <Message key={i} who={message.who} text={message.content.text.text} />
-        } else if (message.content && message.content.payload.fields.card) {
-            const AvatarSrc = message.who === 'Bot' ? <Icon type="robot" /> : <Icon type="smile" />
+        } else if (message.content && message.content.payload.fields.card) { 
+            const AvatarSrc = message.who === 'Bot' ? <img src={avatar} /> : <Icon type="smile" />
             return <div>
                 <List.Item style={{ padding: '1rem' }}>
                     <List.Item.Meta
@@ -191,7 +193,7 @@ function DigitalHuman() {
             </div>
             <div className='chat_footer'>
                 <button className={cls} onClick={() => { setCls((cls) => (cls === "red" ? "green" : "red")); setIsListening(prevState => !prevState); }}>
-                    <i className="fas fa-microphone" style={{color: 'white'}}></i>
+                    <FaMicrophone style={{color: 'black'}}/>
                 </button>
                 <input
                     placeholder="Send a message..."
@@ -199,8 +201,8 @@ function DigitalHuman() {
                     type="text"
                     value={note}
                 />
-                <button onClick={onClicksHanlder} disabled={!note}>
-                    <i className="fas fa-paper-plane" ></i>
+                <button className='send' style={{backgroundColor: 'transparent'}} onClick={onClicksHanlder} disabled={!note}>
+                    <IoSend style={{color: '#F05454', width: '40px', fontSize:'2em'}}/>
                 </button>
             </div>
         </div>

frontend/src/digitalHuman/sections/messageChat.js

 import React from 'react'
 import { List, Icon, Avatar } from 'antd';
 import '../styles/sectionStyles.css';
+import avatar from '../images/avatar.png';
 
 function Message(props) {
 
-    const AvatarSrc = props.who ==='Bot' ? <Icon type="robot" /> : <Icon type="smile" />  
+    const AvatarSrc = props.who ==='Bot' ? <img src={avatar} /> : <Icon type="smile" />  
 
     return (
         <div>

frontend/src/digitalHuman/styles/digitalHuman.css

@@ -14,7 +14,7 @@ body {
     background: radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
 }
 .red {
-    background-color: red;
+    background-color: #E55D87;
     width: 45px;
     height: 45px;
     border: 1px solid #eee;
@@ -31,28 +31,29 @@ body {
     -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
     transform: scale(1.1);
-    background-color: rgba(255, 0, 0, 0.863);
+    background-color: #e47397;
 }
 
 .green {
-    background-color: green;
+    background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4  51%, #E55D87  100%);
     width: 45px;
     height: 45px;
     border: 1px solid #eee;
     border-radius: 100%;
     bottom: 0;
-    box-shadow: 0 2px 5px var(--border) rgb(0 0 0 / 10%);
     cursor: pointer;
     display: inline-flex;
+    transition: 0.5s;
     align-items: center;
     justify-content: center;
 }
 
 .green:hover {
+    background-position: right center;
     -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
     transform: scale(1.1);
-    background-color: rgba(0, 128, 0, 0.863);
+    
 }
 
 body {
@@ -92,8 +93,25 @@ body {
     justify-content: space-between;
     align-items: center;
     height: 62px;
-    background-color: antiquewhite;
-    border-top: 1px solid rgb(175, 37, 37);
+}
+
+.chat_footer {
+    /* ff 3.6+ */
+    background: -moz-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
+
+    /* safari 5.1+,chrome 10+ */
+    background: -webkit-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
+
+    /* opera 11.10+ */
+    background: -o-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
+
+    /* ie 10+ */
+    background: -ms-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
+
+    /* global 92%+ browsers support */
+    background: radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
+
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
 }
 
 .chat_footer>input {
@@ -101,6 +119,10 @@ body {
     border-radius: 30px;
     padding: 10px;
     border: none;
+    font-family: var(--font-family);
+    background: #040C18;
+    color: white;
+    margin-left: 10px;
 }
 
 .chat_footer>button {

frontend/src/digitalHuman/styles/sectionStyles.css

@@ -13,4 +13,4 @@
     margin-left: auto;
     margin-right: 20px;
     background-color: aqua;
-}
+}
\ No newline at end of file