Commit a55a6290 authored by Navodya Pasqual's avatar Navodya Pasqual

DH updated

parent 8f9524df
......@@ -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>
......
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>
......
......@@ -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 {
......
......@@ -13,4 +13,4 @@
margin-left: auto;
margin-right: 20px;
background-color: aqua;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment