fix: grading page UI bugs (#591)

src/grading-settings/GradingSettings.jsx

@@ -115,7 +115,7 @@ const GradingSettings = ({ intl, courseId }) => {
 
   return (
     <>
-      <Container size="xl" className="m-4">
+      <Container size="xl" className="px-4">
         <div className="mt-5">
           <AlertMessage
             show={showSuccessAlert}
@@ -186,10 +186,14 @@ const GradingSettings = ({ intl, courseId }) => {
                     />
                   </section>
                   <section>
-                    <SectionSubHeader
-                      title={intl.formatMessage(messages.assignmentTypeSectionTitle)}
-                      description={intl.formatMessage(messages.assignmentTypeSectionDescription)}
-                    />
+                    <header className="row justify-content-between align-items-center mt-4 mx-0 mb-2">
+                      <h2 className="lead">
+                        {intl.formatMessage(messages.assignmentTypeSectionTitle)}
+                      </h2>
+                      <span className="small text-gray-700">
+                        {intl.formatMessage(messages.assignmentTypeSectionDescription)}
+                      </span>
+                    </header>
                     <AssignmentSection
                       handleRemoveAssignment={handleRemoveAssignment}
                       setShowSavePrompt={setShowSavePrompt}
@@ -199,7 +203,7 @@ const GradingSettings = ({ intl, courseId }) => {
                       setShowSuccessAlert={setShowSuccessAlert}
                     />
                     <Button
-                      variant="outline-success"
+                      variant="primary"
                       iconBefore={IconAdd}
                       onClick={handleAddAssignment}
                     >

src/grading-settings/assignment-section/assignments/AssignmentItem.jsx

@@ -19,6 +19,7 @@ const AssignmentItem = ({
   errorEffort,
   secondErrorMsg,
   gradeField,
+  trailingElement,
 }) => (
   <li className={className}>
     <Form.Group className={classNames('form-group-custom', {
@@ -35,6 +36,7 @@ const AssignmentItem = ({
         onChange={onChange}
         value={value}
         isInvalid={errorEffort}
+        trailingElement={trailingElement}
       />
       <Form.Control.Feedback className="grading-description">
         {descriptions}
@@ -61,6 +63,7 @@ AssignmentItem.defaultProps = {
   secondErrorMsg: undefined,
   errorEffort: false,
   gradeField: undefined,
+  trailingElement: undefined,
 };
 
 AssignmentItem.propTypes = {
@@ -77,6 +80,7 @@ AssignmentItem.propTypes = {
   errorEffort: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   gradeField: PropTypes.shape(defaultAssignmentsPropTypes),
+  trailingElement: PropTypes.string,
 };
 
 export default AssignmentItem;

src/grading-settings/assignment-section/index.jsx

@@ -100,6 +100,7 @@ const AssignmentSection = ({
                 value={gradeField.weight}
                 onChange={(e) => handleAssignmentChange(e, gradeField.id)}
                 errorEffort={errorList[`${weight}-${gradeField.id}`]}
+                trailingElement="%"
               />
               <AssignmentItem
                 className="course-grading-assignment-total-number"
@@ -176,7 +177,7 @@ const AssignmentSection = ({
             )}
             <Button
               className="course-grading-assignment-delete-btn"
-              variant="tertiary"
+              variant="outline-primary"
               size="sm"
               onClick={() => handleRemoveAssignment(gradeField.id)}
             >

src/grading-settings/grading-scale/GradingScale.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useRanger } from 'react-ranger';
-import { Icon, IconButton } from '@edx/paragon';
+import { Icon, IconButtonWithTooltip } from '@edx/paragon';
 import { Add as IconAdd } from '@edx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
@@ -187,7 +187,9 @@ const GradingScale = ({
 
   return (
     <div className="grading-scale">
-      <IconButton
+      <IconButtonWithTooltip
+        tooltipPlacement="top"
+        tooltipContent={intl.formatMessage(messages.addNewSegmentButtonAltText)}
         disabled={gradingSegments.length >= 5}
         data-testid="grading-scale-btn-add-segment"
         className="mr-3"