+
+
+ {message ?
+ //Mic Button
+
:
-}
+ //Send Button
+
+ }
+
+ )
+ }
+};
Sender.propTypes = {
sendMessage: PropTypes.func,
placeholder: PropTypes.string,
disabledInput: PropTypes.bool,
- autofocus: PropTypes.bool
+ autofocus: PropTypes.bool,
+ startRecording: PropTypes.func,
+ stopRecording: PropTypes.func
};
-export default Sender;
+export default Sender;
\ No newline at end of file
diff --git a/src/components/Widget/components/Conversation/components/Sender/style.scss b/src/components/Widget/components/Conversation/components/Sender/style.scss
index 72e26e35b..5b8c41da2 100644
--- a/src/components/Widget/components/Conversation/components/Sender/style.scss
+++ b/src/components/Widget/components/Conversation/components/Sender/style.scss
@@ -2,10 +2,11 @@
.rcw-sender {
align-items: center;
- display: flex;
- background-color: $grey-2;
height: 45px;
+ position: relative;
padding: 5px;
+ padding-right: 95px;
+ padding-left: 11px;
border-radius: 0 0 10px 10px;
}
@@ -13,8 +14,10 @@
width: 100%;
border: 0;
background-color: $grey-2;
- height: 30px;
+ height: 35px;
padding-left: 15px;
+ border-radius: 35px;
+ border: 1px solid #ddd;
&:focus {
outline: none;
@@ -28,9 +31,62 @@
.rcw-send-icon {
height: 25px;
}
+ .rcw-mic-icon {
+ height: 20px;
+ width: 20px;
+ filter: brightness(0) invert(1);
+ }
+}
+.rcw-send:focus {
+ outline: none;
+ box-shadow: 0 0 0 0;
+}
+
+.rcw-send .rcw-send-icon {
+ height: 18px;
+ filter: brightness(0) invert(1);
+ margin: auto;
+ margin-left: 5px;
+ margin-top: 3px;
}
-@media screen and (max-width: 800px) {
+.rcw-send:active img {
+ // filter: invert(10%) grayscale(100%) brightness(375%) sepia(100%)
+ // hue-rotate(310deg) saturate(302%) contrast(5);
+ filter: brightness(0) invert(1);
+}
+.rcw-conversation-container .rcw-header {
+ background: linear-gradient(44deg,#e32c2c ,#ea5b3d);
+ border-radius: 10px 10px 0 0;
+ color: #fff;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ text-align: center;
+ padding: 42px 25px 25px 15px;
+}
+button.rcw-send.sendButtonStyle {
+ background: linear-gradient(18deg ,#00d8d4,#00ef70) !important;
+ width: 40px;
+ height: 40px;
+ padding: 0px;
+ border-radius: 50%;
+ -webkit-transition: 0.4s;
+ transition: 0.7s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+ display: inline-block;
+ position: absolute;
+ right: 22px;
+ top: 5px;
+ z-index: 1;
+}
+.sendButtonStyle:active{
+ width: 56px !important;
+ height: 56px !important;
+ top: -5px !important;
+ right: 18px !important;
+}
+@media screen and (max-width: 800px) {
.rcw-sender {
border-radius: 0;
flex-shrink: 0;
diff --git a/src/components/Widget/components/Conversation/index.js b/src/components/Widget/components/Conversation/index.js
index 3b710fbb7..b4046a220 100644
--- a/src/components/Widget/components/Conversation/index.js
+++ b/src/components/Widget/components/Conversation/index.js
@@ -25,6 +25,8 @@ const Conversation = props =>
placeholder={props.senderPlaceHolder}
disabledInput={props.disabledInput}
autofocus={props.autofocus}
+ startRecording={props.startRecording}
+ stopRecording={props.stopRecording}
/>
;
@@ -38,7 +40,9 @@ Conversation.propTypes = {
toggleChat: PropTypes.func,
showCloseButton: PropTypes.bool,
disabledInput: PropTypes.bool,
- autofocus: PropTypes.bool
+ autofocus: PropTypes.bool,
+ startRecording:PropTypes.func,
+ stopRecording:PropTypes.func
};
export default Conversation;
diff --git a/src/components/Widget/components/Conversation/style.scss b/src/components/Widget/components/Conversation/style.scss
index b9f42da00..659e547b0 100644
--- a/src/components/Widget/components/Conversation/style.scss
+++ b/src/components/Widget/components/Conversation/style.scss
@@ -1,13 +1,16 @@
-@import 'common.scss';
-@import 'variables.scss';
-@import 'animation.scss';
+@import "common.scss";
+@import "variables.scss";
+@import "animation.scss";
.rcw-conversation-container {
@include animation(0, 0.5s, slide-in);
border-radius: 10px;
box-shadow: 0px 2px 10px 1px $grey-3;
+ margin-bottom: 10px;
+}
+.rcw-mic-icon {
+ height: 25px;
}
-
.rcw-slide-out {
@include animation(0, 0.5s, slide-out);
}
diff --git a/src/components/Widget/components/Launcher/components/Badge/style.scss b/src/components/Widget/components/Launcher/components/Badge/style.scss
index cd7503a2c..7cd0760f0 100644
--- a/src/components/Widget/components/Launcher/components/Badge/style.scss
+++ b/src/components/Widget/components/Launcher/components/Badge/style.scss
@@ -1,16 +1,23 @@
-@import 'variables.scss';
+@import "variables.scss";
.rcw-launcher {
- .rcw-badge{
- position: fixed;
+ .rcw-badge {
+ position: absolute;
top: -10px;
right: -5px;
- background-color: $red;
+ // background-color: $g-red;
+ background: linear-gradient(71deg, #e32c2c, #ea5b3d);
color: $white;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
border-radius: 50%;
+ z-index: 111;
+ }
+}
+.rcw-opened{
+ .rcw-badge {
+ opacity: 0;
}
}
diff --git a/src/components/Widget/components/Launcher/index.js b/src/components/Widget/components/Launcher/index.js
index d38b62a28..092b68ff2 100644
--- a/src/components/Widget/components/Launcher/index.js
+++ b/src/components/Widget/components/Launcher/index.js
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
-import openLauncher from '@assets/launcher_button.svg';
+import openLauncher from '@assets/chotaAira.png';
import close from '@assets/clear-button.svg';
import Badge from './components/Badge';
import './style.scss';
@@ -11,10 +11,17 @@ const Launcher = ({ toggle, chatOpened, badge }) =>