Grommet Theme Blended with Custom CSS on Component - css

Question

I'm building a React Site which uses Grommet as the UX Framework and also an embedded Chat Control. Everything functionally works great however the layout has alot to be desired (Second picture below). In the link you will see the chat box in area on the left. This differs quite a bit with the Chat Control in its native form (First screenshot below). As you can see in the difference between the two the spacing is quite a bit off. I'd like to keep the Grommet theme on the text but looking to maintain the spacing and other elements found in the native chat control.
What I did was I created a custom style in Grommet with the hopes of being able to apply my own settings to the Chat Control since Grommet seems to be overriding them. I call my own defaults scss which has my own color scheme that appears to work. Then I call grommet. Finally I took the styling that was in the scss from the Web Chat control and added it into my custom.scss. The Code for the custom.scss is below.
What is the best way to be able to setup my code so that i can control the appearance and layout of the Chat control while still keeping some overriding grommet style (e.g. font, colors, etc.)
Custom.scss
#import 'elu.defaults.scss';
#import '~grommet/scss/grommet-core/index.scss';
#import "includes/colors";
#import "includes/settings";
#import "includes/card-size";
/* updating put the original version in zzz_archive*/
chatstyle {
body .wc-app, .wc-app button, .wc-app input, .wc-app textarea {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
}
.wc-app button {
background-color: $c06;
border: 1px solid $c05;
border-radius: 1px;
color: $c01;
cursor: pointer;
outline: none;
transition: color .2s ease, background-color .2s ease;
}
.wc-app h1, .wc-app h2, .wc-app h3, .wc-app h4, .wc-app p, .wc-app ul, .wc-app ol {
margin: 0;
padding: 0;
}
.wc-app audio, .wc-app video {
display: block;
}
.wc-console > * {
position: absolute;
top: 0;
vertical-align: middle;
}
.wc-console label {
cursor: pointer;
display: inline-block;
height: 40px;
}
.wc-console svg {
fill: $c03;
margin: 11px;
}
.wc-console textarea, .wc-console input[type=text] {
border: none;
height: 100%;
outline: none;
padding: 0;
resize: none;
width: 100%;
}
.wc-send svg {
height: 18px;
width: 27px;
}
.wc-upload svg {
height: 18px;
width: 26px;
}
#wc-upload-input {
display: none;
}
.wc-textbox {
bottom: 0;
left: 48px;
right: 49px;
}
.wc-send {
right: 0;
}
.wc-send.hidden {
visibility: hidden
}
.wc-mic {
right: 0;
}
.wc-mic.hidden {
visibility: hidden
}
.wc-mic.active path#micFilling {
fill:rgb(78, 55, 135)
}
.wc-mic.inactive path#micFilling {
visibility: hidden
}
.wc-console.has-text .wc-send svg {
fill: $c07;
}
.wc-message-from-me {
float: right;
margin-right: 6px;
}
.wc-message-from-me.wc-message-from {
text-align: right;
}
.wc-message-from-me .wc-message-content {
background-color: $c_messageFromMe;
color: $c01;
}
.wc-message-from-me svg.wc-message-callout path {
fill: $c_messageFromMe;
}
.wc-message-from-me svg.wc-message-callout path.point-left {
display: none;
}
.wc-message-from-me svg.wc-message-callout {
right: -6px;
}
.wc-message-from-bot {
float: left;
margin-left: 8px;
}
.wc-message-from-bot .wc-message-content {
background-color: $c_messageFromThem;
color: $c00;
}
.wc-message-from-bot svg.wc-message-callout path {
fill: $c_messageFromThem;
}
.wc-message-from-bot svg.wc-message-callout path.point-right {
display: none;
}
.wc-message-from-bot svg.wc-message-callout {
left: -6px;
}
};
App.js...
import React from 'react';
import ReactDOM from 'react-dom';
import App from 'grommet/components/App';
import Article from 'grommet/components/Article';
import Section from 'grommet/components/Section';
import Split from 'grommet/components/Split';
import Box from 'grommet/components/Box';
import {Chat} from 'botframework-webchat';
import '../scss/custom.scss';
class PatientApp extends React.Component {
...
render() {
return (
<App centered={false}>
<Article>
<Split flex='right'>
<Section>
<Box margin='none' pad='none'>
<Chat style={'chatstyle'} directLine={{secret: 'My GUID'}} user={{id:'jesse', name: 'jesse'}}/>
</Box>
...
How I would like the chat component to appear except with Grommet styling
How the Chat Control appears currently

Answer 1

All,
I was able to figure this out. When I set a width and height in a style name .wc-chatview-panel it now appears correctly the proper button layout.