pass a bg color to the actions group

Author: alishaevn

src/compounds/ActionsGroup/ActionsGroup.jsx

@@ -7,7 +7,7 @@ import ViewFiles from './actions/ViewFiles'
 import { allowNull } from '../../resources/utilityFunctions'
 import './actions-group.scss'
 
-const ActionsGroup = ({ handleSendingMessagesOrFiles, initialFiles }) => {
+const ActionsGroup = ({ backgroundColor, handleSendingMessagesOrFiles, initialFiles }) => {
   const [show, setShow] = useState(false)
   const [action, setAction] = useState(null)
 
@@ -20,12 +20,14 @@ const ActionsGroup = ({ handleSendingMessagesOrFiles, initialFiles }) => {
     setAction(null)
     setShow(false)
   }
+
   return (
     <>
       <ListGroup className='actions-group'>
         <ListGroup.Item
           action
           onClick={() => handleShow('SendMessage')}
+          bsPrefix={`bg-${backgroundColor}-8 list-group-item`}
         >
           <FontAwesomeIcon icon='fa-envelope' />
           Send Message
@@ -34,7 +36,7 @@ const ActionsGroup = ({ handleSendingMessagesOrFiles, initialFiles }) => {
           action
           onClick={() => handleShow('ViewFiles')}
           role='presentation'
-          bsPrefix='bg-secondary-8 list-group-item'
+          bsPrefix={`bg-${backgroundColor}-6 list-group-item`}
         >
           <FontAwesomeIcon icon='fa-file-lines' />
           View Files
@@ -60,6 +62,7 @@ const ActionsGroup = ({ handleSendingMessagesOrFiles, initialFiles }) => {
 }
 
 ActionsGroup.propTypes = {
+  backgroundColor: PropTypes.string,
   handleSendingMessagesOrFiles: PropTypes.func.isRequired,
   initialFiles: PropTypes.arrayOf(
     PropTypes.shape({
@@ -76,4 +79,8 @@ ActionsGroup.propTypes = {
   ).isRequired,
 }
 
+ActionsGroup.defaultProps = {
+  backgroundColor: 'secondary'
+}
+
 export default ActionsGroup

src/compounds/ActionsGroup/ActionsGroup.stories.jsx

@@ -10,6 +10,7 @@ const Template = (args) => <ActionsGroup {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
+  backgroundColor: 'secondary',
   // TODO(alishaevn): figure out why the story actions aren't working *shakes fist*
   handleSendingMessages: ({ message, files }) => {
     console.log('the message is:', message)