MM-52981, MM-53559: Streamlined in-product marketplace (#24311)

webapp/platform/components/src/generic_modal/generic_modal.scss

@@ -22,6 +22,10 @@
         max-height: 100%;
         padding: 0;
 
+        &.divider {
+            border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+        }
+
         .form-control {
             height: 40px;
             box-sizing: border-box;
@@ -106,7 +110,7 @@
         border-radius: 4px;
 
         &.divider {
-            border-top: 1px solid rgba(63, 67, 80, 0.08);
+            border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
         }
     }
 

webapp/platform/components/src/generic_modal/generic_modal.tsx

@@ -39,8 +39,10 @@ export type Props = {
     keyboardEscape?: boolean;
     headerInput?: React.ReactNode;
     bodyPadding?: boolean;
+    bodyDivider?: boolean;
     footerContent?: React.ReactNode;
     footerDivider?: boolean;
+    appendedContent?: React.ReactNode;
     headerButton?: React.ReactNode;
 };
 
@@ -199,7 +201,7 @@ export class GenericModal extends React.PureComponent<Props, State> {
                             </>
                         )}
                     </Modal.Header>
-                    <Modal.Body>
+                    <Modal.Body className={classNames({divider: this.props.bodyDivider})}>
                         {this.props.compassDesign ? (
                             this.props.errorText && (
                                 <div className='genericModalError'>
@@ -226,6 +228,7 @@ export class GenericModal extends React.PureComponent<Props, State> {
                             )}
                         </Modal.Footer>
                     )}
+                    {Boolean(this.props.appendedContent) && this.props.appendedContent}
                 </div>
             </Modal>
         );