feat: small changes to improve UI

src/components/GradebookHeader/index.jsx

@@ -1,7 +1,6 @@
-import { Link } from 'react-router-dom';
-
-import { resolveRouteByRole, useIntl } from '@openedx/frontend-base';
-import { Button } from '@openedx/paragon';
+import { getLinkProps, resolveRouteByRole, useIntl } from '@openedx/frontend-base';
+import { Button, Icon, Hyperlink } from '@openedx/paragon';
+import { ArrowBackIos } from '@openedx/paragon/icons';
 
 import { instructorDashboardUrl } from '@src/data/services/lms/urls';
 import { useGradebookNavigation } from '@src/data/gradebookNavigationContext';
@@ -31,7 +30,7 @@ export const GradebookHeader = () => {
     : null;
   const backLinkContent = (
     <>
-      <span aria-hidden="true">{'<< '}</span>
+      <Icon src={ArrowBackIos} className="mr-1" size="sm" />
       {formatMessage(messages.backToDashboard)}
     </>
   );
@@ -44,17 +43,21 @@ export const GradebookHeader = () => {
         </Button>
       );
     }
-    if (dashboardRoute?.isInternal) {
-      return <Link to={dashboardRoute.url} className="mb-3">{backLinkContent}</Link>;
-    }
-    return <a href={dashboardRoute?.url ?? instructorDashboardUrl(courseId)} className="mb-3">{backLinkContent}</a>;
+    return (
+      <Hyperlink
+        {...getLinkProps(dashboardRoute?.url ?? instructorDashboardUrl(courseId))}
+        className="mb-3"
+      >
+        {backLinkContent}
+      </Hyperlink>
+    );
   };
   return (
-    <div className="gradebook-header">
+    <div className="gradebook-header mt-2">
       {renderBackLink()}
-      <h1>{formatMessage(messages.gradebook)}</h1>
+      <h2 className="text-primary-500 mb-0">{formatMessage(messages.gradebook)}</h2>
+      <p className="small text-break mb-3">{courseId}</p>
       <div className="subtitle-row d-flex justify-content-between align-items-center">
-        <h2 className="text-break">{courseId}</h2>
         {showBulkManagement && (
           <Button variant="tertiary" onClick={handleToggleViewClick}>
             {formatMessage(toggleViewMessage)}

src/components/GradebookHeader/index.test.jsx

@@ -49,7 +49,7 @@ describe('GradebookHeader', () => {
 
     it('renders the main header container', () => {
       renderWithAllProviders(<GradebookHeader />);
-      const header = screen.getByText('Gradebook').closest('.gradebook-header');
+      const header = screen.getByRole('heading', { level: 2 }).closest('.gradebook-header');
       expect(header).toHaveClass('gradebook-header');
     });
 
@@ -66,22 +66,16 @@ describe('GradebookHeader', () => {
 
     it('renders gradebook title', () => {
       renderWithAllProviders(<GradebookHeader />);
-      const title = screen.getByRole('heading', { level: 1 });
+      const title = screen.getByRole('heading', { level: 2 });
       expect(title).toHaveTextContent('Gradebook');
-    });
-
-    it('renders course ID subtitle', () => {
-      renderWithAllProviders(<GradebookHeader />);
-      const subtitle = screen.getByRole('heading', { level: 2 });
-      expect(subtitle).toHaveTextContent('course-v1:TestU+CS101+2024');
-      expect(subtitle).toHaveClass('text-break');
+      const courseId = screen.getByText('course-v1:TestU+CS101+2024');
+      expect(courseId.tagName).toBe('P');
+      expect(courseId).toHaveClass('small', 'text-break');
     });
 
     it('renders subtitle row with correct classes', () => {
-      renderWithAllProviders(<GradebookHeader />);
-      const subtitleRow = screen.getByRole('heading', {
-        level: 2,
-      }).parentElement;
+      const { container } = renderWithAllProviders(<GradebookHeader />);
+      const subtitleRow = container.querySelector('.subtitle-row');
       expect(subtitleRow).toHaveClass(
         'subtitle-row',
         'd-flex',
@@ -347,7 +341,6 @@ describe('GradebookHeader', () => {
       renderWithAllProviders(<GradebookHeader />);
 
       expect(screen.getByRole('link')).toBeInTheDocument();
-      expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
       expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
       expect(screen.getByRole('button')).toBeInTheDocument();
       expect(screen.queryByRole('alert')).not.toBeInTheDocument();

src/components/GradesView/FilterMenuToggle/index.jsx

@@ -18,8 +18,9 @@ export const FilterMenuToggle = () => {
       id="edit-filters-btn"
       className="btn-primary align-self-start"
       onClick={toggleFilterMenu}
+      size="sm"
     >
-      <Icon src={FilterAlt} className="mr-1" /> {formatMessage(messages.editFilters)}
+      <Icon src={FilterAlt} className="mr-1" size="sm" /> {formatMessage(messages.editFilters)}
     </Button>
   );
 };

src/components/GradesView/GradesView.scss

@@ -31,9 +31,6 @@
     .intervention-report-description {
       margin-right: 40px;
     }
-    h4.step-message-1 {
-      margin-top: 40px;
-    }
 }
 
 .student-filters{

src/components/GradesView/ScoreViewInput/index.jsx

@@ -15,12 +15,13 @@ export const ScoreViewInput = () => {
   const { setGradeFormat } = useGradebookUi();
   const toggleFormat = (e) => setGradeFormat(e.target.value);
   return (
-    <Form.Group controlId="ScoreView">
-      <Form.Label>{formatMessage(messages.scoreView)}:</Form.Label>
+    <Form.Group controlId="ScoreView" className="d-flex align-items-center">
+      <Form.Label className="mr-2 font-weight-normal">{formatMessage(messages.scoreView)}:</Form.Label>
       <Form.Control
         as="select"
         value={gradeFormat}
         onChange={toggleFormat}
+        size="sm"
       >
         <option value="percent">{formatMessage(messages.percent)}</option>
         <option value="absolute">{formatMessage(messages.absolute)}</option>

src/components/GradesView/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-
 import { useIntl } from '@openedx/frontend-base';
+import { Bubble } from '@openedx/paragon';
 
 import { useFilters } from '@src/data/filtersContext';
 
@@ -17,7 +17,6 @@ import ScoreViewInput from './ScoreViewInput';
 import SearchControls from './SearchControls';
 import SpinnerIcon from './SpinnerIcon';
 import StatusAlerts from './StatusAlerts';
-
 import { useRefetchGrades } from './data/hooks';
 import messages from './messages';
 
@@ -40,23 +39,33 @@ export const GradesView = ({ updateQueryParams }) => {
       <SpinnerIcon />
 
       <InterventionsReport />
-      <h3 className="step-message-1">
-        {formatMessage(messages.filterStepHeading)}
-      </h3>
-
-      <div className="d-flex justify-content-between flex-wrap">
-        <FilterMenuToggle />
-        <SearchControls />
-      </div>
-
-      <FilterBadges handleClose={handleFilterBadgeClose} />
-      <StatusAlerts />
-
-      <h3>{formatMessage(messages.gradebookStepHeading)}</h3>
 
-      <div className="d-flex justify-content-between align-items-center mb-2">
-        <ScoreViewInput />
-        <BulkManagementControls />
+      <div className="mb-3">
+        <div className="d-flex align-items-center mb-2">
+          <Bubble className="mr-2">1</Bubble>
+          <h3 className="h4 text-primary-700 my-0">
+            {formatMessage(messages.filterStepHeading)}
+          </h3>
+        </div>
+        <div className="d-flex justify-content-between flex-wrap">
+          <FilterMenuToggle />
+          <SearchControls />
+        </div>
+
+        <FilterBadges handleClose={handleFilterBadgeClose} />
+        <StatusAlerts />
+
+        <div className="d-flex align-items-center mb-2">
+          <Bubble className="mr-2">2</Bubble>
+          <h3 className="h4 text-primary-700 my-0">
+            {formatMessage(messages.gradebookStepHeading)}
+          </h3>
+        </div>
+
+        <div className="d-flex justify-content-between align-items-center mb-2">
+          <ScoreViewInput />
+          <BulkManagementControls />
+        </div>
       </div>
 
       <FilteredUsersLabel />

src/components/GradesView/messages.js

@@ -2,14 +2,14 @@ import { defineMessages } from '@openedx/frontend-base';
 
 const messages = defineMessages({
   filterStepHeading: {
-    id: 'gradebook.GradesView.filterHeading',
-    defaultMessage: 'Step 1: Filter the Grade Report',
+    id: 'gradebook.GradesView.filterHeadingV2',
+    defaultMessage: 'Filter the Grade Report',
     description: 'Filter controls container heading string',
   },
   gradebookStepHeading: {
-    id: 'gradebook.GradesView.gradebookStepHeading',
-    defaultMessage: 'Step 2: View or Modify Individual Grades',
-    description: 'Alert text for invalid minimum course grade',
+    id: 'gradebook.GradesView.gradebookStepHeadingV2',
+    defaultMessage: 'View or Modify Individual Grades',
+    description: 'Gradebook table container heading string',
   },
   mastersHint: {
     id: 'gradebook.GradesView.mastersHint',