Updated Discussion UI as per Figma (#92)

* Updated Discussion UI as per Figma

src/generic/FormSwitchGroup.jsx

@@ -17,10 +17,11 @@ export default function FormSwitchGroup({
     >
       <div className="d-flex justify-content-between">
         <div className="pr-3">
-          <Form.Label className="h4 mt-3">
+          <Form.Label className="h4 mt-2 text-primary-500">
             {label}
           </Form.Label>
           <Form.Text
+            className="mt-0"
             id={helpTextId}
             muted
           >

src/pages-and-resources/discussions/DiscussionsSettings.jsx

@@ -86,6 +86,7 @@ function DiscussionsSettings({ courseId, intl }) {
         <Stepper activeKey={currentStep}>
           <FullscreenModal
             className="bg-light-200"
+            modalBodyClassName="p-0"
             title={intl.formatMessage(messages.configure)}
             onClose={handleClose}
             isOpen

src/pages-and-resources/discussions/app-config-form/AppConfigForm.jsx

@@ -85,7 +85,7 @@ function AppConfigForm({
     );
   }
   return (
-    <Container size="sm" className="px-sm-0 py-5" data-testid="appConfigForm">
+    <Container size="sm" className="px-sm-0 py-sm-5 p-0" data-testid="appConfigForm">
       {alert}
       {form}
     </Container>

src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.jsx

@@ -33,9 +33,9 @@ function LegacyConfigForm({
   });
 
   return (
-    <Card className="mb-5 pt-3 px-5 pb-5" data-testid="legacyConfigForm">
+    <Card className="mb-5 px-4 px-sm-5 pb-5" data-testid="legacyConfigForm">
       <Form ref={formRef} onSubmit={handleSubmit}>
-        <h3 className="mb-4 mt-2">{title}</h3>
+        <h3 className="text-primary-500 my-3">{title}</h3>
         <AppConfigFormDivider thick />
         <AnonymousPostingFields
           onBlur={handleBlur}

src/pages-and-resources/discussions/app-config-form/apps/shared/AnonymousPostingFields.jsx

@@ -14,7 +14,7 @@ function AnonymousPostingFields({
 }) {
   return (
     <>
-      <h5 className="mt-4">{intl.formatMessage(messages.anonymousPosting)}</h5>
+      <h5 className="mt-4 text-gray-500">{intl.formatMessage(messages.anonymousPosting)}</h5>
       <FormSwitchGroup
         onChange={onChange}
         onBlur={onBlur}

src/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider.jsx

@@ -4,11 +4,9 @@ import PropTypes from 'prop-types';
 export default function AppConfigFormDivider({ thick }) {
   return (
     <hr
-      className="my-2"
+      className="my-2 mx-sm-n5 mx-n4"
       style={{
         borderTopWidth: thick ? '3px' : '1px',
-        marginLeft: '-48px',
-        marginRight: '-48px',
       }}
     />
   );

src/pages-and-resources/discussions/app-config-form/apps/shared/BlackoutDatesField.jsx

@@ -77,7 +77,7 @@ function BlackoutDatesField({
 }) {
   return (
     <>
-      <h5 className="mb-5 mt-4 text-gray-500">{intl.formatMessage(messages.blackoutDates)}</h5>
+      <h5 className="my-4 text-gray-500">{intl.formatMessage(messages.blackoutDates)}</h5>
       <Form.Group
         controlId="blackoutDates"
       >

src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx

@@ -14,11 +14,11 @@ function DivisionByGroupFields({
 }) {
   return (
     <>
-      <h5 className="text-gray-500">{intl.formatMessage(messages.divisionByGroup)}</h5>
+      <h5 className="text-gray-500 mb-2 mt-4">{intl.formatMessage(messages.divisionByGroup)}</h5>
 
       <FormSwitchGroup
         onChange={onChange}
-        className="mt-3"
+        className="mt-2"
         onBlur={onBlur}
         id="divideByCohorts"
         checked={values.divideByCohorts}

src/pages-and-resources/discussions/app-list/AppList.jsx

@@ -52,7 +52,7 @@ function AppList({ intl }) {
   }
 
   return (
-    <div className="m-5" data-testid="appList">
+    <div className="m-1  my-sm-5" data-testid="appList">
       <h3 className="my-sm-5 my-4">
         {intl.formatMessage(messages.heading)}
       </h3>