From 2fdf630ed326d871d94eef13cc496d9f3d8f98e6 Mon Sep 17 00:00:00 2001
From: Attiya Ishaque <atiya.ishaq@arbisoft.com>
Date: Tue, 11 Oct 2022 18:20:29 +0500
Subject: [PATCH] fix: Add yellow slanted line back for edX only (#650)

---
 src/base-component/LargeLayout.jsx  | 11 +++++++++--
 src/base-component/MediumLayout.jsx | 24 +++++++++++++++++-------
 src/base-component/SmallLayout.jsx  | 21 +++++++++++++++------
 3 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/base-component/LargeLayout.jsx b/src/base-component/LargeLayout.jsx
index f6eaa4d6..ad0d345b 100644
--- a/src/base-component/LargeLayout.jsx
+++ b/src/base-component/LargeLayout.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@edx/paragon';
+import classNames from 'classnames';
 
 import messages from './messages';
 
@@ -12,8 +13,14 @@ const LargeLayout = ({ intl }) => (
       <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
         <Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
       </Hyperlink>
-      <div className="min-vh-100 d-flex justify-content-center align-items-center">
-        <h1 className="display-2 text-white mw-xs ml-6">
+      <div className="min-vh-100 d-flex align-items-center">
+        <div className={classNames({ 'large-yellow-line mr-n4.5': getConfig().SITE_NAME === 'edX' })} />
+        <h1
+          className={classNames(
+            'display-2 text-white mw-xs',
+            { 'ml-6': getConfig().SITE_NAME !== 'edX' },
+          )}
+        >
           {intl.formatMessage(messages['start.learning'])}
           <div className="text-accent-a">
             {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
diff --git a/src/base-component/MediumLayout.jsx b/src/base-component/MediumLayout.jsx
index a431c8f5..980367ab 100644
--- a/src/base-component/MediumLayout.jsx
+++ b/src/base-component/MediumLayout.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@edx/paragon';
+import classNames from 'classnames';
 
 import messages from './messages';
 
@@ -14,13 +15,22 @@ const MediumLayout = ({ intl }) => (
         <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
           <Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
         </Hyperlink>
-        <h1 className="display-1 text-white mt-5 mb-5 ml-4.5 mr-2">
-          {intl.formatMessage(messages['start.learning'])}
-          <span className="text-accent-a ml-2">
-            {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
-          </span>
-        </h1>
-        <div />
+        <div className="d-flex align-items-center justify-content-center mb-4 ">
+          <div className={classNames({ 'mt-1 medium-yellow-line': getConfig().SITE_NAME === 'edX' })} />
+          <div>
+            <h1
+              className={classNames(
+                'display-1 text-white mt-5 mb-5 mr-2',
+                { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
+              )}
+            >
+              <span className="mr-2">{intl.formatMessage(messages['start.learning'])}</span>
+              <span className="text-accent-a d-inline-block">
+                {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+              </span>
+            </h1>
+          </div>
+        </div>
       </div>
       <div className="col-md-2 bg-white p-0">
         <svg className="w-100 h-100 medium-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
diff --git a/src/base-component/SmallLayout.jsx b/src/base-component/SmallLayout.jsx
index ce60e8ef..71d1a898 100644
--- a/src/base-component/SmallLayout.jsx
+++ b/src/base-component/SmallLayout.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Hyperlink, Image } from '@edx/paragon';
+import classNames from 'classnames';
 
 import messages from './messages';
 
@@ -13,12 +14,20 @@ const SmallLayout = ({ intl }) => (
       <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
         <Image className="logo-small" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
       </Hyperlink>
-      <h1 className="text-white mt-3.5 mb-3.5 ml-4.5 mr-3">
-        {intl.formatMessage(messages['start.learning'])}
-        <span className="text-accent-a ml-2">
-          {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
-        </span>
-      </h1>
+      <div className="d-flex align-items-center mb-3 mt-3 mr-3">
+        <div className={classNames({ 'small-yellow-line mr-n2.5': getConfig().SITE_NAME === 'edX' })} />
+        <h1
+          className={classNames(
+            'text-white mt-3.5 mb-3.5',
+            { 'ml-4.5': getConfig().SITE_NAME !== 'edX' },
+          )}
+        >
+          <span className="mr-1">{intl.formatMessage(messages['start.learning'])}</span>
+          <span className="text-accent-a d-inline-block">
+            {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+          </span>
+        </h1>
+      </div>
     </div>
   </span>
 );