From 627c83c7657f87821431dd198c8198a183c4f69f Mon Sep 17 00:00:00 2001
From: Stanislav Lunyachek <stanislav.lunyachek@raccoongang.com>
Date: Tue, 5 Mar 2024 14:04:44 +0200
Subject: [PATCH] fix: Authn pages - fix background on medium resolutions

---
 .../components/default-layout/LargeLayout.jsx     | 11 ++---------
 src/sass/_style.scss                              | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/base-container/components/default-layout/LargeLayout.jsx b/src/base-container/components/default-layout/LargeLayout.jsx
index 0555dffe35..13a86c2eb2 100644
--- 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
index d15d71cd3d..ad23921010 100644
--- a/src/sass/_style.scss
+++ b/src/sass/_style.scss
@@ -458,3 +458,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%);
+  }
+}