fix: Authn pages - fix background on medium resolutions

openedx · Mar 5, 2024 · 2d96064 · 2d96064
1 parent be5b0bb
commit 2d96064
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/base-container/components/default-layout/LargeLayout.jsx b/src/base-container/components/default-layout/LargeLayout.jsx
@@ -11,8 +11,8 @@ const LargeLayout = () => {
   const { formatMessage } = useIntl();
 
   return (
-    <div className="w-50 d-flex">
-      <div className="col-md-9 bg-primary-400">
+    <div className="w-50 d-flex bg-primary-400 authn-container">
+      <div className="col-md-10">
         <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
           <Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
         </Hyperlink>
@@ -31,13 +31,6 @@ const LargeLayout = () => {
           </h1>
         </div>
       </div>
-      <div className="col-md-3 bg-white p-0">
-        <svg className="ml-n1 w-100 h-100 large-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
-          <g transform="skewX(171.6)">
-            <rect x="0" y="0" height="100%" width="100%" />
-          </g>
-        </svg>
-      </div>
     </div>
   );
 };

diff --git a/src/sass/_style.scss b/src/sass/_style.scss
@@ -457,3 +457,18 @@ select.form-control {
 .pgn__form-control-decorator-trailing {
   right: 0 !important;
 }
+
+.authn-container {
+  position: relative;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 140px;
+    background-color: #fff;
+    clip-path: polygon(101% 0%, 0% 100%, 101% 100%);
+  }
+}