carry the actions bg color through to the actions

Author: alishaevn

src/compounds/ActionsGroup/ActionsGroup.jsx

@@ -45,13 +45,15 @@ const ActionsGroup = ({ backgroundColor, handleSendingMessagesOrFiles, initialFi
       {(action === 'SendMessage' && show)
         && (
           <SendMessage
+            backgroundColor={backgroundColor}
             handleClose={handleClose}
             onSubmit={handleSendingMessagesOrFiles}
           />
         )}
       {(action === 'ViewFiles' && show)
         && (
           <ViewFiles
+            backgroundColor={backgroundColor}
             handleClose={handleClose}
             initialFiles={initialFiles}
             onSubmit={handleSendingMessagesOrFiles}

src/compounds/ActionsGroup/actions/SendMessage.jsx

@@ -11,7 +11,7 @@ import {
 import { apiV2CompatibleStrings, convertToBase64 } from '../../../resources/utilityFunctions'
 import './styles.scss'
 
-const SendMessage = ({ onSubmit, handleClose }) => {
+const SendMessage = ({ backgroundColor, onSubmit, handleClose }) => {
   const messageRef = useRef(null)
   const fileRef = useRef(null)
   const [files, setFiles] = useState([])
@@ -45,7 +45,7 @@ const SendMessage = ({ onSubmit, handleClose }) => {
 
   return (
     <Modal show onHide={handleClose}>
-      <Modal.Header closeButton>
+      <Modal.Header closeButton className={`bg-${backgroundColor}-8`}>
         <Modal.Title>Send a Message</Modal.Title>
       </Modal.Header>
       <Form>
@@ -88,8 +88,13 @@ const SendMessage = ({ onSubmit, handleClose }) => {
 }
 
 SendMessage.propTypes = {
+  backgroundColor: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   handleClose: PropTypes.func.isRequired,
 }
 
+SendMessage.defaultProps = {
+  backgroundColor: 'secondary'
+}
+
 export default SendMessage

src/compounds/ActionsGroup/actions/ViewFiles.jsx

@@ -9,7 +9,7 @@ import {
 import FilesTable from '../../../components/FilesTable/FilesTable'
 import { allowNull } from '../../../resources/utilityFunctions'
 
-const ViewFiles = ({ initialFiles, handleClose }) => {
+const ViewFiles = ({ backgroundColor, initialFiles, handleClose }) => {
   const documentTabs = [
     {
       eventKey: 'files',
@@ -25,7 +25,7 @@ const ViewFiles = ({ initialFiles, handleClose }) => {
 
   return (
     <Offcanvas show onHide={handleClose} placement='end' scroll='true'>
-      <Offcanvas.Header className='d-flex border-bottom px-3 py-2 bg-secondary-8' closeButton>
+      <Offcanvas.Header className={`d-flex border-bottom px-3 py-2 bg-${backgroundColor}-8`} closeButton>
         <Offcanvas.Title>Documents</Offcanvas.Title>
       </Offcanvas.Header>
       <Offcanvas.Body className='border rounded p-2 m-3'>
@@ -54,6 +54,7 @@ const ViewFiles = ({ initialFiles, handleClose }) => {
 }
 
 ViewFiles.propTypes = {
+  backgroundColor: PropTypes.string,
   initialFiles: PropTypes.arrayOf(
     PropTypes.shape({
       contentLength: PropTypes.string.isRequired,
@@ -70,4 +71,8 @@ ViewFiles.propTypes = {
   handleClose: PropTypes.func.isRequired,
 }
 
+ViewFiles.defaultProps = {
+  backgroundColor: 'secondary'
+}
+
 export default ViewFiles