I've been working on a React site that incorporates Grommet as the UX framework along with an embedded chat control. While everything is functional, the layout leaves much to be desired (see second image below). In the provided link, you can see that the chat box is positioned on the left side, which deviates significantly from its native form (shown in the first screenshot below). The spacing difference between the two is quite noticeable. I want to maintain the Grommet theme for text styling but also aim to keep the spacing and other design elements consistent with the native chat control.
To address this issue, I created a custom style in Grommet hoping to apply my own settings to the chat control while accommodating the Grommet overrides. I imported my default SCSS file with custom colors before calling the Grommet core index.scss file. Then, I included the necessary styles for the web chat control into my custom.scss file. The code snippet for custom.scss is provided below.
So, what's the best approach to set up my code to have better control over the appearance and layout of the chat control while still retaining some of the overriding Grommet styles such as fonts and colors?
Custom.scss
@import 'elu.defaults.scss';
@import '~grommet/scss/grommet-core/index.scss';
@import "includes/colors";
@import "includes/settings";
@import "includes/card-size";
/* Updated version - Original placed 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;
}
/* Other WC app styles go here */
};
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>
...
Desired appearance of the chat component with Grommet styling https://i.sstatic.net/JCzTF.png
Current appearance of the Chat Control