VAN-476 - Fixed base component header arc position (#305)

* VAN-476 - Fixed base component header arc position

* VAN-476 - Fixed base component header arc position for large screens

* VAN-476 - Fixed svg margin issue

* VAN-476 - Fixed svg margin issue

* VAN-476 - Fixed yellow arc overlapping issue

src/_style.scss

@@ -406,15 +406,32 @@ select.form-control {
 
 .large-screen-container {
   background-color: $white;
-  background-image: linear-gradient(102.02deg, $primary 73%, $white 45%);
   width: 50vw;
 }
 
-.medium-screen-header {
-  background-color: $white;
-  background-image: linear-gradient(102.02deg, $primary 93%, $white 7%);
-  width: 100vw;
+.medium-screen-container {
+  flex-wrap: nowrap;
+  max-width: inherit;
 }
+
+.screen-header {
+  background-color: $primary;
+}
+
+.screen-polygon {
+  background-color: $white;
+}
+
+.medium-screen-svg {
+  fill: $primary;
+  overflow: inherit;
+}
+
+.large-screen-svg {
+  fill: $primary;
+  overflow: hidden;
+}
+
 .small-screen-header {
   width: 100vw;
 }
@@ -423,15 +440,14 @@ select.form-control {
   height: 0.5rem;
   background-image: linear-gradient(
     102.02deg,
-    $brand-700,
     $brand-700 10%,
     $brand 10%,
-    $brand 40%,
-    $primary-700 40%,
-    $primary-700 50%,
-    $accent-a 50%,
-    $accent-a 72%,
-    $accent-a-light 72%,
+    $brand 45%,
+    $primary-700 45%,
+    $primary-700 55%,
+    $accent-a 55%,
+    $accent-a 75%,
+    $accent-a-light 75%,
   );
   background-repeat: no-repeat;
 }
@@ -450,6 +466,20 @@ select.form-control {
   background-repeat: no-repeat;
 }
 
+.medium-large-screen-top-stripe {
+  height: 0.5rem;
+  background-image: linear-gradient(
+  102.02deg,
+  $brand-700 10%,
+  $brand 10%,
+  $brand 65%,
+  $primary-700 65%,
+  $primary-700 75%,
+  $accent-a 75%,
+  $accent-a 75%);
+  background-repeat: no-repeat;
+}
+
 .small-screen-top-stripe {
   height: 0.5rem;
   background-image: linear-gradient(
@@ -461,7 +491,15 @@ select.form-control {
   background-repeat: no-repeat;
 }
 
-.svg-line {
+.large-screen-svg-line {
+  padding-top: 0.5rem;
+  stroke: $accent-b;
+  stroke-width: 0.5rem;
+  width: 5.5rem;
+  height: 240px;
+}
+
+.medium-screen-svg-line {
   padding-top: 0.5rem;
   stroke: $accent-b;
   stroke-width: 0.5rem;
@@ -478,6 +516,14 @@ select.form-control {
 }
 
 .large-heading {
+  margin-left: 8px;
+  color: $white;
+  max-width: 24rem;
+  line-height: 78px;
+  font-size: 78px;
+}
+
+.medium-heading {
   padding-left: 1rem;
   color: $white;
   max-width: 24rem;

src/common-components/BaseComponent.jsx

@@ -12,9 +12,12 @@ const BaseComponent = ({ children }) => (
     <Responsive maxWidth={767}>
       <div className="col-md-12 small-screen-top-stripe" />
     </Responsive>
-    <Responsive minWidth={768} maxWidth={1199}>
+    <Responsive minWidth={768} maxWidth={799}>
       <div className="col-md-12 medium-screen-top-stripe" />
     </Responsive>
+    <Responsive minWidth={800} maxWidth={1199}>
+      <div className="col-md-12 medium-large-screen-top-stripe" />
+    </Responsive>
     <Responsive minWidth={1200}>
       <div className="col-md-12 large-screen-top-stripe" />
     </Responsive>

src/common-components/LargeScreenLayout.jsx

@@ -5,13 +5,19 @@ import { getConfig } from '@edx/frontend-platform';
 import LargeScreenLeftLayout from './LargeScreenLeftLayout';
 
 const LargeScreenLayout = () => (
-  <>
-    <img alt="edx" className="logo position-absolute" src={getConfig().LOGO_WHITE_URL} />
-    <div className="large-screen-container">
-      {/* <div className="col-md-12 large-screen-top-stripe" /> */}
+  <div className="container row p-0 m-0 large-screen-container">
+    <div className="col-md-8 p-0 screen-header">
+      <img alt="edx" className="logo position-absolute" src={getConfig().LOGO_WHITE_URL} />
       <LargeScreenLeftLayout />
     </div>
-  </>
+    <div className="col-md-4 p-0 screen-polygon">
+      <svg width="100%" height="100%" className="ml-n1 large-screen-svg" preserveAspectRatio="xMaxYMin meet">
+        <g transform="skewX(168)">
+          <rect x="0" y="0" height="100%" width="100%" />
+        </g>
+      </svg>
+    </div>
+  </div>
 );
 
 export default LargeScreenLayout;

src/common-components/LargeScreenLeftLayout.jsx

@@ -10,7 +10,7 @@ const LargeScreenLeftLayout = (props) => {
 
   return (
     <div className="min-vh-100 pr-0 mt-lg-n2 d-flex align-items-center">
-      <svg className="svg-line pl-5">
+      <svg className="large-screen-svg-line ml-5">
         <line x1="50" y1="0" x2="10" y2="215" />
       </svg>
       <h1 className="large-heading">

src/common-components/MediumScreenHeader.jsx

@@ -9,14 +9,14 @@ const MediumScreenHeader = (props) => {
   const { intl } = props;
 
   return (
-    <>
-      <div className="medium-screen-header mb-4">
+    <div className="container row p-0 m-0 medium-screen-container">
+      <div className="col-md-10 p-0 screen-header mb-4">
         <img alt="edx" className="logo" src={getConfig().LOGO_WHITE_URL} />
         <div className="row mt-4">
-          <svg className="svg-line pl-5">
+          <svg className="medium-screen-svg-line pl-5">
             <line x1="50" y1="0" x2="10" y2="215" />
           </svg>
-          <h1 className="large-heading pb-4">
+          <h1 className="medium-heading pb-4">
             {intl.formatMessage(messages['start.learning'])}
             <span className="text-accent-a"><br />
               {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
@@ -24,7 +24,14 @@ const MediumScreenHeader = (props) => {
           </h1>
         </div>
       </div>
-    </>
+      <div className="col-md-2 p-0 screen-polygon mb-4">
+        <svg width="100%" height="100%" className="medium-screen-svg" preserveAspectRatio="xMaxYMin meet">
+          <g transform="skewX(168)">
+            <rect x="0" y="0" height="100%" width="100%" />
+          </g>
+        </svg>
+      </div>
+    </div>
   );
 };