feat: small changes to improve UI

src/components/GradebookHeader/index.jsx

@@ -1,7 +1,8 @@
 import { Link } from 'react-router-dom';
 
 import { resolveRouteByRole, useIntl } from '@openedx/frontend-base';
-import { Button } from '@openedx/paragon';
+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 +32,7 @@ export const GradebookHeader = () => {
     : null;
   const backLinkContent = (
     <>
-      <span aria-hidden="true">{'<< '}</span>
+      <Icon src={ArrowBackIos} className="mr-1" size="sm" />
       {formatMessage(messages.backToDashboard)}
     </>
   );
@@ -45,16 +46,15 @@ export const GradebookHeader = () => {
       );
     }
     if (dashboardRoute?.isInternal) {
-      return <Link to={dashboardRoute.url} className="mb-3">{backLinkContent}</Link>;
+      return <Hyperlink as={Link} to={dashboardRoute.url} className="mb-3">{backLinkContent}</Hyperlink>;
     }
-    return <a href={dashboardRoute?.url ?? instructorDashboardUrl(courseId)} className="mb-3">{backLinkContent}</a>;
+    return <Hyperlink href={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">{formatMessage(messages.gradebook)}</h2>
       <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

@@ -66,22 +66,13 @@ 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');
-    });
-
     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 +338,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/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,9 +1,7 @@
 import PropTypes from 'prop-types';
-
 import { useIntl } from '@openedx/frontend-base';
-
+import { Bubble } from '@openedx/paragon';
 import { useFilters } from '@src/data/filtersContext';
-
 import BulkManagementControls from './BulkManagementControls';
 import EditModal from './EditModal';
 import FilterBadges from './FilterBadges';
@@ -17,7 +15,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 +37,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">
+        <h3 className="h4 d-flex align-items-center text-primary-700">
+          <Bubble className="mr-2">
+          1
+          </Bubble>
+          {formatMessage(messages.filterStepHeading)}
+        </h3>
+        <div className="d-flex justify-content-between flex-wrap ml-3">
+          <FilterMenuToggle />
+          <SearchControls />
+        </div>
+
+        <FilterBadges handleClose={handleFilterBadgeClose} />
+        <StatusAlerts />
+
+        <h3 className="h4 d-flex align-items-center text-primary-700">
+          <Bubble className="mr-2">
+          2
+          </Bubble>
+          {formatMessage(messages.gradebookStepHeading)}
+        </h3>
+
+        <div className="d-flex justify-content-between align-items-center mb-2 ml-3">
+          <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',