feat: UI improvements (#318)

* feat: UI improvements
- Minor fix for Back to My Records button
- Decrease font size for the Questions about Learner Records title
- Send Program Record modal window - checkboxes alignment

* feat: After review - remove checkbox fix

Author: Lunyachek

src/components/ProgramRecord/ProgramRecord.jsx

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
 
 import {
-  Info, ArrowBack,
+  Info, ChevronLeft,
 } from '@openedx/paragon/icons';
 import {
-  Alert, Container, Button, Hyperlink,
+  Alert, Container, Hyperlink,
 } from '@openedx/paragon';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
@@ -76,22 +76,17 @@ function ProgramRecord({ isPublic }) {
   };
 
   const renderBackButton = () => (
-    <Button
-      variant="tertiary"
-      iconBefore={ArrowBack}
-      className="back-to-records"
+    <Hyperlink
+      destination={createCorrectInternalRoute('/')}
+      variant="muted"
     >
-      <Hyperlink
-        destination={createCorrectInternalRoute('/')}
-        variant="muted"
-      >
-        <FormattedMessage
-          id="link.back.to.records"
-          defaultMessage="Back to My Records"
-          description="A link that takes the user back to their program records"
-        />
-      </Hyperlink>
-    </Button>
+      <ChevronLeft />
+      <FormattedMessage
+        id="link.back.to.records"
+        defaultMessage="Back to My Records"
+        description="A link that takes the user back to their program records"
+      />
+    </Hyperlink>
   );
 
   const renderProgramDetails = () => (

src/components/ProgramRecord/RecordsHelp.jsx

@@ -6,7 +6,7 @@ import { Hyperlink } from '@openedx/paragon';
 function RecordsHelp({ helpUrl }) {
   return (
     <section className="help">
-      <h2>
+      <h2 className="h5">
         <FormattedMessage
           id="help.section.header"
           defaultMessage="Questions about Learner Records?"

src/components/ProgramRecordsList/ProgramRecordsList.jsx

@@ -148,13 +148,13 @@ function ProgramRecordsList() {
 
   const renderHelp = () => (
     <div className="pl-3 pr-3 pt-4 pb-1">
-      <h3 className="h5">
+      <h2 className="h5">
         <FormattedMessage
           id="records.help.header"
           defaultMessage="Questions about Learner Records?"
           description="Header for the help section of Learner Records page"
         />
-      </h3>
+      </h2>
       <FormattedMessage
         id="records.help.description"
         defaultMessage="To learn more about records you can "