apply review feedback

src/pages-and-resources/teams/Settings.jsx

@@ -94,7 +94,7 @@ function TeamSettings({
           handleChange, handleBlur, values, errors,
         }) => (
           <>
-            <h4 className="my-3">{intl.formatMessage(messages.teamSize)}</h4>
+            <h4 className="my-3 pb-2">{intl.formatMessage(messages.teamSize)}</h4>
             <Form.Group className="pb-1">
               <Form.Control
                 className="pb-2"
@@ -105,10 +105,11 @@ function TeamSettings({
                 onBlur={handleBlur}
                 value={values.maxTeamSize}
               />
+              <Form.Text>{intl.formatMessage(messages.maxTeamSizeHelp)}</Form.Text>
               <FormikErrorFeedback name="maxTeamSize" />
             </Form.Group>
             <div className="bg-light-200 d-flex flex-column mx-n4 px-4 py-4 border border-top">
-              <h4 className="mb-3">{intl.formatMessage(messages.teamSets)}</h4>
+              <h4 className="mb-4">{intl.formatMessage(messages.teamSets)}</h4>
               <FieldArray name="topics">
                 {({ push, remove }) => (
                   <>
@@ -125,7 +126,7 @@ function TeamSettings({
                     ))}
                     <Button
                       variant="plain"
-                      className="p-0 align-self-start"
+                      className="p-0 align-self-start mt-3"
                       onClick={() => push(blankNewTopic)}
                     >
                       <Icon src={Add} /> {intl.formatMessage(messages.addTeamSet)}

src/pages-and-resources/teams/TeamSetEditor.jsx

@@ -47,12 +47,14 @@ function TeamSetEditor({
   intl, teamSet, onDelete, onChange, onBlur, fieldNameCommonBase, errors,
 }) {
   const [isDeleting, setDeleting] = useState(false);
-  const [isOpen, setOpen] = useState(teamSet.id === null);
+  const [isOpen, setOpen] = useState((teamSet.id === null) || true);
   const initiateDeletion = () => setDeleting(true);
   const cancelDeletion = () => setDeleting(false);
 
   const handleToggle = (open) => setOpen(Boolean(errors.name || errors.maxTeamSize || errors.description) || open);
 
+  const formGroupClasses = 'mb-4';
+
   return (
     <TransitionReplace>
       {isDeleting
@@ -83,7 +85,7 @@ function TeamSetEditor({
             title={
               isOpen
                 ? (
-                  <div className="d-flex flex-column small flex-shrink-1 h4">
+                  <div className="d-flex flex-column flex-shrink-1 h4 p-0 m-0">
                     {intl.formatMessage(messages.configureTeamSet)}
                   </div>
                 ) : (
@@ -95,7 +97,7 @@ function TeamSetEditor({
                 )
             }
           >
-            <Form.Group>
+            <Form.Group className={`${formGroupClasses} mt-2.5`}>
               <Form.Control
                 name={`${fieldNameCommonBase}.name`}
                 floatingLabel={intl.formatMessage(messages.teamSetFormNameLabel)}
@@ -106,7 +108,7 @@ function TeamSetEditor({
               <Form.Text>{intl.formatMessage(messages.teamSetFormNameHelp)}</Form.Text>
               <FormikErrorFeedback name={`${fieldNameCommonBase}.name`} />
             </Form.Group>
-            <Form.Group>
+            <Form.Group className={formGroupClasses}>
               <Form.Control
                 name={`${fieldNameCommonBase}.description`}
                 floatingLabel={intl.formatMessage(messages.teamSetFormDescriptionLabel)}
@@ -117,8 +119,8 @@ function TeamSetEditor({
               <Form.Text>{intl.formatMessage(messages.teamSetFormDescriptionHelp)}</Form.Text>
               <FormikErrorFeedback name={`${fieldNameCommonBase}.description`} />
             </Form.Group>
-            <Form.Group>
-              <Form.Label>
+            <Form.Group className={formGroupClasses}>
+              <Form.Label className="h4 my-3">
                 {intl.formatMessage(messages.teamSetFormTypeLabel)}
               </Form.Label>
               <Form.RadioSet
@@ -132,6 +134,7 @@ function TeamSetEditor({
                     key={teamSetType}
                     value={teamSetType}
                     description={intl.formatMessage(TeamTypeNameMessage[teamSetType].description)}
+                    className="my-2"
                   >
                     {intl.formatMessage(TeamTypeNameMessage[teamSetType].label)}
                   </Form.Radio>
@@ -139,6 +142,7 @@ function TeamSetEditor({
               </Form.RadioSet>
             </Form.Group>
             <Form.Group>
+              <Form.Label className="h4 pb-4">{intl.formatMessage(messages.teamSize)}</Form.Label>
               <Form.Control
                 type="number"
                 name={`${fieldNameCommonBase}.maxTeamSize`}
@@ -150,7 +154,6 @@ function TeamSetEditor({
               <Form.Text>{intl.formatMessage(messages.teamSetFormMaxSizeHelp)}</Form.Text>
               <FormikErrorFeedback name={`${fieldNameCommonBase}.maxTeamSize`} />
             </Form.Group>
-
           </CollapsableEditor>
         )}
     </TransitionReplace>

src/pages-and-resources/teams/messages.js

@@ -15,16 +15,20 @@ const messages = defineMessages({
   },
   enableTeamsLink: {
     id: 'authoring.pagesAndResources.teams.enableTeams.link',
-    defaultMessage: 'Learn more about the teams',
+    defaultMessage: 'Learn more about teams',
   },
   teamSize: {
     id: 'authoring.pagesAndResources.teams.teamSize.heading',
-    defaultMessage: 'Team Size',
+    defaultMessage: 'Team size',
   },
   maxTeamSize: {
     id: 'authoring.pagesAndResources.teams.teamSize.maxTeamSize',
     defaultMessage: 'Max team size',
   },
+  maxTeamSizeHelp: {
+    id: 'authoring.pagesAndResources.teams.teamSize.maxTeamSizeHelp',
+    defaultMessage: 'The maximum number of learners that can join a team',
+  },
   maxTeamSizeEmpty: {
     id: 'authoring.pagesAndResources.teams.teamSize.maxTeamSizeInvalid',
     defaultMessage: 'Enter max team size',
@@ -107,7 +111,7 @@ const messages = defineMessages({
   },
   teamSetFormMaxSizeHelp: {
     id: 'authoring.pagesAndResources.teams.teamSet.maxSize.help',
-    defaultMessage: 'The maximum number of learners that can join a team',
+    defaultMessage: 'Override the global max team size',
   },
   addTeamSet: {
     id: 'authoring.pagesAndResources.teams.addTeamSet.button',

src/utils.js

@@ -1,7 +1,9 @@
 import { useContext, useEffect } from 'react';
+
 import { useDispatch, useSelector } from 'react-redux';
 import { useMediaQuery } from 'react-responsive';
 import * as Yup from 'yup';
+
 import { RequestStatus } from './data/constants';
 import { getCourseAppSettingValue, getLoadingStatus } from './pages-and-resources/data/selectors';
 import { fetchCourseAppSettings, updateCourseAppSetting } from './pages-and-resources/data/thunks';