fix: header spacing and widget text (#27)

src/App.jsx

@@ -1,24 +1,41 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 
 import Footer from '@edx/frontend-component-footer';
 
-import 'data/services/lms/fakeData/courses';
+import { actions } from 'data/redux';
+import fakeData from 'data/services/lms/fakeData/courses';
 import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
 import Dashboard from 'containers/Dashboard';
 
 import './App.scss';
 
-export const App = () => (
-  <Router>
-    <div>
-      <LearnerDashboardHeader />
-      <main>
-        <Dashboard />
-      </main>
-      <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
-    </div>
-  </Router>
-);
+export const App = () => {
+  const dispatch = useDispatch();
+  // TODO: made development-only
+  React.useEffect(() => {
+    window.loadMockData = () => {
+      dispatch(actions.app.loadGlobalData(fakeData.globalData));
+      dispatch(actions.app.loadCourses({
+        courses: [
+          ...fakeData.courseRunData,
+          ...fakeData.entitlementData,
+        ],
+      }));
+    };
+  });
+  return (
+    <Router>
+      <div>
+        <LearnerDashboardHeader />
+        <main>
+          <Dashboard />
+        </main>
+        <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+      </div>
+    </Router>
+  );
+};
 
 export default App;

src/containers/CourseCard/components/RelatedProgramsBadge/index.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
+import { Button, Icon } from '@edx/paragon';
 import { Program } from '@edx/paragon/icons';
 
 import RelatedProgramsBadgeModal from 'containers/RelatedProgramsModal';
@@ -20,13 +20,12 @@ export const RelatedProgramsBadge = ({ cardId }) => {
     <>
       <Button
         data-testid="RelatedProgramsBadge"
-        className="pr-0 mr-0"
+        className="pl-0 mr-0"
         variant="tertiary"
         size="sm"
-        iconBefore={Program}
         onClick={openModal}
       >
-        {programsMessage}
+        <Icon src={Program} className="mr-2 pr-0" /> {programsMessage}
       </Button>
       <RelatedProgramsBadgeModal {...{ isOpen, closeModal, cardId }} />
     </>

src/containers/CourseList/index.jsx

@@ -24,7 +24,7 @@ export const CourseList = () => {
   return (
     <div className="course-list-container">
       <div id="course-list-heading-container">
-        <h2 className="my-2">
+        <h2 className="my-3">
           {formatMessage(messages.myCourses)}
         </h2>
         <div

src/containers/WidgetSidebar/index.jsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Card } from '@edx/paragon';
+import { Card, Hyperlink, Icon } from '@edx/paragon';
+import { ArrowForward } from '@edx/paragon/icons';
 
 import moreCoursesSVG from 'assets/more-courses-sidewidget.svg';
 
 import messages from './messages';
 
-import './index.scss';
+export const arrowIcon = (<Icon className="mx-1" src={ArrowForward} />);
 
 export const WidgetSidebar = () => {
   const { formatMessage } = useIntl();
   return (
-    <div className="widget-sidebar">
+    <div className="widget-sidebar px-2 mt-5 pt-3">
       <div className="d-flex">
         <Card orientation="horizontal">
           <Card.ImageCap
@@ -22,8 +23,8 @@ export const WidgetSidebar = () => {
             <h4>
               {formatMessage(messages.lookingForChallengePrompt)}
             </h4>
-            <Hyperlink variant="brand" destination="#">
-              {formatMessage(messages.findCoursesButton)}
+            <Hyperlink variant="brand" destination="#" className="d-flex">
+              {formatMessage(messages.findCoursesButton, { arrow: arrowIcon })}
             </Hyperlink>
           </Card.Body>
         </Card>

src/containers/WidgetSidebar/index.scss

@@ -1,6 +0,0 @@
-@import "@edx/paragon/scss/core/core";
-@include media-breakpoint-down(md) {
-  .widget-sidebar {
-    display: none;
-  }
-}

src/containers/WidgetSidebar/messages.js

@@ -8,7 +8,7 @@ const messages = defineMessages({
   },
   findCoursesButton: {
     id: 'WidgetSidebar.findCoursesButton',
-    defaultMessage: 'Explore courses',
+    defaultMessage: 'Find a course {arrow}',
     description: 'Button to explore more courses',
   },
 });