feat: update header image and styling

src/containers/LearnerDashboardHeader/GreetingBanner.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import { getConfig } from '@edx/frontend-platform';
 
+import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Image } from '@edx/paragon';
+
 import messages from './messages';
 
 export const GreetingBanner = () => {
@@ -15,15 +17,18 @@ export const GreetingBanner = () => {
   } else {
     greetMessage = messages.goodMorning;
   }
+  console.log({ config: getConfig() });
 
   return (
     <div className="d-flex p-5 align-items-center justify-content-center">
-      <img
+      <Image
+        style={{ width: '148px' }}
         className="d-block"
-        src={getConfig().LOGO_URL}
+        src={getConfig().LOGO_WHITE_URL}
         alt={getConfig().SITE_NAME}
       />
-      <h1 className="text-center text-white">
+      <div className="greetings-slash-container bg-brand-500" />
+      <h1 className="text-center text-accent-b">
         <FormattedMessage {...greetMessage} />
       </h1>
     </div>

src/containers/LearnerDashboardHeader/index.jsx

@@ -8,8 +8,9 @@ import { Button } from '@edx/paragon';
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 
 import GreetingBanner from './GreetingBanner';
-import messages from './messages';
 import ConfirmEmailBanner from './ConfirmEmailBanner';
+import messages from './messages';
+import './index.scss';
 
 export const LearnerDashboardHeader = () => {
   const { authenticatedUser } = useContext(AppContext);

src/containers/LearnerDashboardHeader/index.scss

@@ -0,0 +1,6 @@
+.greetings-slash-container {
+  height: 8px;
+  width: 120px;
+  transform-origin: center;
+  transform: rotate(-70deg);
+}

src/containers/LearnerDashboardHeader/messages.js

@@ -34,17 +34,17 @@ const messages = defineMessages({
 
   goodMorning: {
     id: 'greeting.morning',
-    defaultMessage: 'Good Morning',
+    defaultMessage: 'Good Morning!',
     description: 'Good Morning',
   },
   goodAfternoon: {
     id: 'greeting.afternoon',
-    defaultMessage: 'Good Afternoon',
+    defaultMessage: 'Good Afternoon!',
     description: 'Good Afternoon',
   },
   goodEvening: {
     id: 'greeting.evening',
-    defaultMessage: 'Good Evening',
+    defaultMessage: 'Good Evening!',
     description: 'Good Evening',
   },
   switchToProgram: {