From c20fbbcf795bca0fff350fcbd3b44e9f74bf4c69 Mon Sep 17 00:00:00 2001
From: Ahtisham Shahid <ahtisham300@gmail.com>
Date: Mon, 3 May 2021 11:47:31 +0500
Subject: [PATCH]  Updated Discussion UI as per Figma (#92)

* Updated Discussion UI as per Figma
---
 src/generic/FormSwitchGroup.jsx                               | 3 ++-
 src/pages-and-resources/discussions/DiscussionsSettings.jsx   | 1 +
 .../discussions/app-config-form/AppConfigForm.jsx             | 2 +-
 .../app-config-form/apps/legacy/LegacyConfigForm.jsx          | 4 ++--
 .../app-config-form/apps/shared/AnonymousPostingFields.jsx    | 2 +-
 .../app-config-form/apps/shared/AppConfigFormDivider.jsx      | 4 +---
 .../app-config-form/apps/shared/BlackoutDatesField.jsx        | 2 +-
 .../app-config-form/apps/shared/DivisionByGroupFields.jsx     | 4 ++--
 src/pages-and-resources/discussions/app-list/AppList.jsx      | 2 +-
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/generic/FormSwitchGroup.jsx b/src/generic/FormSwitchGroup.jsx
index 03062d34f..b0eeb78fd 100644
--- a/src/generic/FormSwitchGroup.jsx
+++ b/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
           >
diff --git a/src/pages-and-resources/discussions/DiscussionsSettings.jsx b/src/pages-and-resources/discussions/DiscussionsSettings.jsx
index b8e2385ed..6a5d23a0b 100644
--- a/src/pages-and-resources/discussions/DiscussionsSettings.jsx
+++ b/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
diff --git a/src/pages-and-resources/discussions/app-config-form/AppConfigForm.jsx b/src/pages-and-resources/discussions/app-config-form/AppConfigForm.jsx
index fcba84aea..b3d2db4f6 100644
--- a/src/pages-and-resources/discussions/app-config-form/AppConfigForm.jsx
+++ b/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>
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.jsx b/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.jsx
index fc8761916..22b0d4c15 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.jsx
+++ b/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}
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/AnonymousPostingFields.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/AnonymousPostingFields.jsx
index 939dbc1b4..95a006b46 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/AnonymousPostingFields.jsx
+++ b/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}
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider.jsx
index 15677498d..8eab7a5bf 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider.jsx
+++ b/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',
       }}
     />
   );
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/BlackoutDatesField.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/BlackoutDatesField.jsx
index d9e42737c..0e39ea84f 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/BlackoutDatesField.jsx
+++ b/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"
       >
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx
index 8c50b9395..61f40fe44 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx
+++ b/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}
diff --git a/src/pages-and-resources/discussions/app-list/AppList.jsx b/src/pages-and-resources/discussions/app-list/AppList.jsx
index ddbb4cfb5..b303a6515 100644
--- a/src/pages-and-resources/discussions/app-list/AppList.jsx
+++ b/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>