Fix miscellaneous layout issues after #6100

client/app/bundles/course/assessment/components/ConvertMcqMrqButton/index.tsx

@@ -32,8 +32,8 @@ const ConvertMcqMrqButton = (props: ConvertMcqMrqButtonProps): JSX.Element => {
         variant="outlined"
       >
         {question.mcqMrqType === 'mcq'
-          ? t(translations.changeToMrqFull)
-          : t(translations.changeToMcqFull)}
+          ? t(translations.changeToMrq)
+          : t(translations.changeToMcq)}
       </Button>
 
       {!props.new && (

client/app/bundles/course/assessment/pages/AssessmentShow/Question.tsx

@@ -142,7 +142,7 @@ const Question = (props: QuestionProps): JSX.Element => {
               </div>
             </section>
 
-            <section className="px-6 pt-4">
+            <section className="space-y-4 px-6 pt-4">
               {question.description && (
                 <Typography
                   dangerouslySetInnerHTML={{

client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/SubmissionsTable.jsx

@@ -20,6 +20,7 @@ import { pink, red } from '@mui/material/colors';
 import PropTypes from 'prop-types';
 
 import ConfirmationDialog from 'lib/components/core/dialogs/ConfirmationDialog';
+import TableContainer from 'lib/components/core/layouts/TableContainer';
 
 import { workflowStates } from '../../constants';
 import { assessmentShape } from '../../propTypes';
@@ -35,7 +36,7 @@ const styles = {
   tableCell: {
     padding: '0.5em',
     textOverflow: 'initial',
-    whiteSpace: 'normal',
+    whiteSpace: 'nowrap',
     wordBreak: 'break-word',
     alignItems: 'center',
   },
@@ -355,7 +356,7 @@ export default class SubmissionsTable extends Component {
     );
 
     return (
-      <>
+      <TableContainer dense variant="bare">
         <Table style={{ ...(isActive ? {} : styles.hideTable) }}>
           <TableHead>
             <TableRow>
@@ -380,7 +381,7 @@ export default class SubmissionsTable extends Component {
           <TableBody>{this.renderRowUsers()}</TableBody>
         </Table>
         {this.renderRowTooltips()}
-      </>
+      </TableContainer>
     );
   }
 }

client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/translations.js

@@ -13,15 +13,15 @@ const translations = defineMessages({
   },
   submissionStatus: {
     id: 'course.assessment.submission.SubmissionsIndex.submissionStatus',
-    defaultMessage: 'Submission Status',
+    defaultMessage: 'Status',
   },
   grade: {
     id: 'course.assessment.submission.SubmissionsIndex.grade',
     defaultMessage: 'Total Grade',
   },
   experiencePoints: {
     id: 'course.assessment.submission.SubmissionsIndex.experiencePoints',
-    defaultMessage: 'Experience Points Awarded',
+    defaultMessage: 'EXP Awarded',
   },
   dateSubmitted: {
     id: 'course.assessment.submission.SubmissionsIndex.dateSubmitted',

client/app/bundles/course/assessment/submission/translations.ts

@@ -112,7 +112,7 @@ const translations = defineMessages({
   },
   expAwarded: {
     id: 'course.assessment.submission.expAwarded',
-    defaultMessage: 'Experience Points Awarded',
+    defaultMessage: 'EXP Awarded',
   },
   grader: {
     id: 'course.assessment.submission.grader',

client/app/bundles/course/assessment/translations.ts

@@ -396,14 +396,6 @@ const translations = defineMessages({
     id: 'course.assessment.show.showOptions',
     defaultMessage: 'Show options',
   },
-  changeToMrqFull: {
-    id: 'course.assessment.show.changeToMrqFull',
-    defaultMessage: 'Convert to Multiple Response (MRQ)',
-  },
-  changeToMcqFull: {
-    id: 'course.assessment.show.changeToMcqFull',
-    defaultMessage: 'Convert to Multiple Choice (MCQ)',
-  },
   multipleChoice: {
     id: 'course.assessment.show.multipleChoice',
     defaultMessage: 'Multiple Choice (MCQ)',

client/app/bundles/course/lesson-plan/containers/ColumnVisibilityDropdown/index.jsx

@@ -19,13 +19,6 @@ const translations = defineMessages({
   },
 });
 
-const styles = {
-  dropdown: {
-    display: 'inline-block',
-    marginLeft: 16,
-  },
-};
-
 class ColumnVisibilityDropdown extends Component {
   constructor(props) {
     super(props);
@@ -55,7 +48,7 @@ class ColumnVisibilityDropdown extends Component {
     const { dispatch, columnsVisible } = this.props;
 
     return (
-      <div style={styles.dropdown}>
+      <>
         <Button
           color="secondary"
           endIcon={<KeyboardArrowDown />}
@@ -64,6 +57,7 @@ class ColumnVisibilityDropdown extends Component {
         >
           <FormattedMessage {...translations.label} />
         </Button>
+
         <Popover
           anchorEl={this.state.anchorEl}
           anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
@@ -91,7 +85,7 @@ class ColumnVisibilityDropdown extends Component {
             )}
           </MenuList>
         </Popover>
-      </div>
+      </>
     );
   }
 }

client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/EnterEditModeButton.jsx

@@ -7,7 +7,7 @@ import { getCourseId } from 'lib/helpers/url-helpers';
 const translations = defineMessages({
   enterEditMode: {
     id: 'course.lessonPlan.LessonPlanLayout.EnterEditModeButton.enterEditMode',
-    defaultMessage: 'Enter Edit Mode',
+    defaultMessage: 'Edit Mode',
   },
 });
 
@@ -16,7 +16,6 @@ const EnterEditModeButton = () => {
   const courseId = getCourseId();
   return (
     <Button
-      className="mr-4"
       onClick={() => navigate(`/courses/${courseId}/lesson_plan/edit`)}
       variant="outlined"
     >

client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/NewEventButton.jsx

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
+import { Add } from '@mui/icons-material';
 import { Button } from '@mui/material';
 import PropTypes from 'prop-types';
 
@@ -10,7 +11,7 @@ import { actions } from '../../store';
 const translations = defineMessages({
   newEvent: {
     id: 'course.lessonPlan.LessonPlanLayout.NewEventButton.newEvent',
-    defaultMessage: 'New Event',
+    defaultMessage: 'Event',
   },
   success: {
     id: 'course.lessonPlan.LessonPlanLayout.NewEventButton.success',
@@ -50,12 +51,10 @@ class NewEventButton extends Component {
   };
 
   render() {
-    if (!this.props.canManageLessonPlan) {
-      return <div />;
-    }
+    if (!this.props.canManageLessonPlan) return null;
 
     return (
-      <Button color="primary" onClick={this.showForm} variant="contained">
+      <Button onClick={this.showForm} startIcon={<Add />} variant="contained">
         <FormattedMessage {...translations.newEvent} />
       </Button>
     );

client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/NewMilestoneButton.jsx

@@ -1,6 +1,7 @@
 import { Component } from 'react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
+import { Add } from '@mui/icons-material';
 import { Button } from '@mui/material';
 import PropTypes from 'prop-types';
 
@@ -10,7 +11,7 @@ import { actions } from '../../store';
 const translations = defineMessages({
   newMilestone: {
     id: 'course.lessonPlan.LessonPlanLayout.NewMilestoneButton.newMilestone',
-    defaultMessage: 'New Milestone',
+    defaultMessage: 'Milestone',
   },
   success: {
     id: 'course.lessonPlan.LessonPlanLayout.NewMilestoneButton.success',
@@ -22,12 +23,6 @@ const translations = defineMessages({
   },
 });
 
-const styles = {
-  button: {
-    marginRight: 16,
-  },
-};
-
 class NewMilestoneButton extends Component {
   createMilestoneHandler = (data, setError) => {
     const { dispatch } = this.props;
@@ -55,12 +50,7 @@ class NewMilestoneButton extends Component {
     }
 
     return (
-      <Button
-        color="primary"
-        onClick={this.showForm}
-        style={styles.button}
-        variant="contained"
-      >
+      <Button onClick={this.showForm} startIcon={<Add />} variant="contained">
         <FormattedMessage {...translations.newMilestone} />
       </Button>
     );

client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewEventButton.test.jsx

@@ -33,7 +33,7 @@ describe('<NewEventButton />', () => {
       { state },
     );
 
-    fireEvent.click(page.getByRole('button', { name: 'New Event' }));
+    fireEvent.click(page.getByRole('button', { name: 'Event' }));
 
     fireEvent.change(page.getByLabelText('Title', { exact: false }), {
       target: { value: eventData.title },

client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewMilestoneButton.test.jsx

@@ -29,7 +29,7 @@ describe('<NewMilestoneButton />', () => {
       { state },
     );
 
-    fireEvent.click(page.getByRole('button', { name: 'New Milestone' }));
+    fireEvent.click(page.getByRole('button', { name: 'Milestone' }));
 
     fireEvent.change(page.getByLabelText('Title', { exact: false }), {
       target: { value: milestoneData.title },

client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/index.jsx

@@ -4,11 +4,11 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import Page from 'lib/components/core/layouts/Page';
+import { getCourseId } from 'lib/helpers/url-helpers';
 import { lessonPlanTypesGroups } from 'lib/types';
 
 import { fields } from '../../constants';
 import ColumnVisibilityDropdown from '../../containers/ColumnVisibilityDropdown';
-import ExitEditModeButton from '../../containers/LessonPlanLayout/ExitEditModeButton';
 import NewEventButton from '../../containers/LessonPlanLayout/NewEventButton';
 import NewMilestoneButton from '../../containers/LessonPlanLayout/NewMilestoneButton';
 import translations from '../../translations';
@@ -78,20 +78,21 @@ export class LessonPlanEdit extends Component {
 
   render() {
     const { groups } = this.props;
+    const courseId = getCourseId();
 
     return (
       <Page
         actions={
           this.props.canManageLessonPlan && (
-            <>
-              <ExitEditModeButton />
+            <div className="space-x-4">
               <NewMilestoneButton />
               <NewEventButton />
               <ColumnVisibilityDropdown />
-            </>
+            </div>
           )
         }
-        title={<FormattedMessage {...translations.lessonPlan} />}
+        backTo={`/courses/${courseId}/lesson_plan`}
+        title={<FormattedMessage {...translations.editLessonPlan} />}
       >
         <div className="mt-8">
           <table className="border-separate border-spacing-x-4">

client/app/bundles/course/lesson-plan/pages/LessonPlanShow/index.jsx

@@ -85,11 +85,11 @@ export class LessonPlanShow extends Component {
       <Page
         actions={
           this.props.canManageLessonPlan && (
-            <>
+            <div className="space-x-4">
               <EnterEditModeButton />
               <NewMilestoneButton />
               <NewEventButton />
-            </>
+            </div>
           )
         }
         title={<FormattedMessage {...translations.lessonPlan} />}

client/app/bundles/course/lesson-plan/translations.ts

@@ -55,6 +55,10 @@ const translations = defineMessages({
     id: 'course.lessonPlan.LessonPlanLayout.lessonPlan',
     defaultMessage: 'Lesson Plan',
   },
+  editLessonPlan: {
+    id: 'course.lessonPlan.LessonPlanLayout.editLessonPlan',
+    defaultMessage: 'Edit Lesson Plan',
+  },
   empty: {
     id: 'course.lessonPlan.LessonPlanLayout.empty',
     defaultMessage: 'The lesson plan is empty.',

client/app/bundles/user/AccountSettings/AccountSettingsForm.tsx

@@ -262,7 +262,6 @@ const AccountSettingsForm = (props: AccountSettingsFormProps): JSX.Element => {
                   fullWidth
                   inputProps={{ autoComplete: 'off' }}
                   label={t(translations.currentPassword)}
-                  showPasswordVisibilityHint
                   type="password"
                   variant="filled"
                 />
@@ -284,8 +283,9 @@ const AccountSettingsForm = (props: AccountSettingsFormProps): JSX.Element => {
                   fullWidth
                   inputProps={{ autoComplete: 'new-password' }}
                   label={t(translations.newPassword)}
-                  onChangePasswordVisibility={setRequirePasswordConfirmation}
-                  showPasswordVisibilityHint
+                  onChangePasswordVisibility={(visible): void =>
+                    setRequirePasswordConfirmation(!visible)
+                  }
                   type="password"
                   variant="filled"
                 />

client/app/bundles/users/pages/UserShow/index.tsx → client/app/bundles/users/pages/UserShow.tsx

@@ -6,15 +6,15 @@ import { Avatar, Grid, Typography } from '@mui/material';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
-import CoursesTable from '../../components/tables/CoursesTable';
-import InstancesTable from '../../components/tables/InstancesTable';
-import { fetchUser } from '../../operations';
+import CoursesTable from '../components/tables/CoursesTable';
+import InstancesTable from '../components/tables/InstancesTable';
+import { fetchUser } from '../operations';
 import {
   getAllCompletedCourseMiniEntities,
   getAllCurrentCourseMiniEntities,
   getAllInstanceMiniEntities,
   getUserEntity,
-} from '../../selectors';
+} from '../selectors';
 
 interface Props extends WrappedComponentProps {}