fix: UX feedback suggestions from TNL-8730 (#205)

Fix styling of delete message to reduce gaps between paras
Fix bold font on collapsed title of group
Add no groups found error message when trying to enable teams without groups defined

Author: xitij2000

package-lock.json

@@ -36,9 +36,9 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "10.0.11",
+    "@edx/frontend-component-footer": "10.1.6",
     "@edx/frontend-platform": "1.12.7",
-    "@edx/paragon": "16.14.3",
+    "@edx/paragon": "16.15.1",
     "@fortawesome/fontawesome-svg-core": "1.2.28",
     "@fortawesome/free-brands-svg-icons": "5.11.2",
     "@fortawesome/free-regular-svg-icons": "5.11.2",

package.json

@@ -1,12 +1,3 @@
-import React, {
-  useContext, useEffect, useRef, useState,
-} from 'react';
-import PropTypes from 'prop-types';
-
-import { Formik } from 'formik';
-import { useDispatch, useSelector } from 'react-redux';
-import * as Yup from 'yup';
-
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
@@ -20,6 +11,14 @@ import {
 } from '@edx/paragon';
 import { Info } from '@edx/paragon/icons';
 
+import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import React, {
+  useContext, useEffect, useRef, useState,
+} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import * as Yup from 'yup';
+
 import { RequestStatus } from '../../data/constants';
 import ConnectionErrorAlert from '../../generic/ConnectionErrorAlert';
 import FormSwitchGroup from '../../generic/FormSwitchGroup';
@@ -215,9 +214,9 @@ function AppSettingsModal({
               {saveError && (
                 <Alert variant="danger" icon={Info} ref={alertRef}>
                   <Alert.Heading>
-                    {intl.formatMessage(messages.errorSavingTitle)}
+                    {formikProps.errors.enabled?.title ?? intl.formatMessage(messages.errorSavingTitle)}
                   </Alert.Heading>
-                  {intl.formatMessage(messages.errorSavingMessage)}
+                  {formikProps.errors.enabled?.message ?? intl.formatMessage(messages.errorSavingMessage)}
                 </Alert>
               )}
               <FormSwitchGroup
@@ -244,7 +243,7 @@ function AppSettingsModal({
                 )}
               />
               {(formikProps.values.enabled || configureBeforeEnable) && children
-              && <AppConfigFormDivider marginAdj={{ default: 0, sm: 0 }} />}
+                && <AppConfigFormDivider marginAdj={{ default: 0, sm: 0 }} />}
               <AppSettingsForm formikProps={formikProps} showForm={formikProps.values.enabled || configureBeforeEnable}>
                 {children}
               </AppSettingsForm>

src/pages-and-resources/app-settings-modal/AppSettingsModal.jsx

@@ -40,8 +40,8 @@ function GroupEditor({
     <TransitionReplace>
       {isDeleting
         ? (
-          <div className="d-flex flex-column card rounded mb-3 px-3 py-2 p-4" key="isDeleting">
-            <h3>{intl.formatMessage(messages.groupDeleteHeading)}</h3>
+          <div className="d-flex flex-column card rounded mb-3 px-4 py-2 p-4" key="isDeleting">
+            <h4 className="mb-3">{intl.formatMessage(messages.groupDeleteHeading)}</h4>
             {intl.formatMessage(messages.groupDeleteBody).split('\n').map(text => <p>{text}</p>)}
             <div className="d-flex flex-row justify-content-end">
               <Button variant="muted" size="sm" onClick={cancelDeletion}>
@@ -72,7 +72,7 @@ function GroupEditor({
                 ) : (
                   <div className="d-flex flex-column flex-shrink-1 small mw-100">
                     <div className="small text-gray-500">{intl.formatMessage(TeamTypeNameMessage[group.type].label)}</div>
-                    <div className="h4 text-truncate my-1">{group.name}</div>
+                    <div className="h4 text-truncate my-1 font-weight-normal">{group.name}</div>
                     <div className="small text-truncate text-muted text-gray-500">{group.description}</div>
                   </div>
                 )