style(arc-saas): responsive screen of login page

responsive screen of login page

GH-34

Author: Deepika516

projects/saas-ui/src/app/shared/auth/auth.component.html

@@ -1,13 +1,13 @@
 <nb-layout>
-  <nb-layout-column>
-    <div class="login-img">
-      <img
-        width="100%"
-        height="100%"
-        src="../../../assets/images/auth/loginimg.png"
-        alt="loginImg"
-      />
-    </div>
+  <nb-layout-column class="login-img-wrapper">
+    <div
+      class="login-img"
+      style="
+        background-image: url(../../../assets/images/auth/loginimg.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      "
+    ></div>
   </nb-layout-column>
   <nb-layout-column class="p-0 card-row">
     <nb-auth-block class="h-100 m-0">

projects/saas-ui/src/app/shared/auth/auth.component.scss

@@ -30,3 +30,16 @@
   flex-shrink: 0 !important;
   flex-basis: 35% !important;
 }
+
+@media(max-width:991px){
+  .card-row {
+    flex-grow: 0 !important;
+    flex-shrink: 0 !important;
+    flex-basis: 100% !important;
+  }
+
+  .login-img-wrapper{
+    display: none !important;
+  }
+  
+}

projects/saas-ui/src/app/shared/auth/login/login.component.scss

@@ -37,4 +37,22 @@
   padding-top: 5px;
   height: 19px;
   width: 25px;
+
+}
+
+@media(max-width:991px){
+
+  .login-content-wrapper{
+    padding: 50px;
+    max-width: 420px;
+    margin: 0 auto;
+    border: 1px solid #d9d9d9;
+    margin-bottom: 10px;
+}
+}
+@media(max-width:575px){
+
+ .btn{
+ margin-bottom: 10px;
+ }
 }