login page

src/app/login/login.component.css

@@ -2,55 +2,45 @@
   margin:auto;
   justify-content: center;
   align-items: center;
-  width: 25rem;
-  height:23rem;
-  margin-left: 5rem;
+  width: 33rem;
+  height:20rem;
   margin-right: auto;
-  margin-top: 8rem;
+  margin-top: 3rem;
   background-color: rgb(255, 255, 255);
   box-shadow: rgb(46 56 64 / 12%) 0px 4px 16px;
   border-radius: 8px;
   justify-content: center;
   align-items: center;
-  margin-bottom: 24px;
   display: grid;
-  padding:2rem;
+  padding:1rem;
 
 }
 .android{
-  width: 100px;
-  height:80px;
-  /* transform: scale(0.6); */
-  padding-left: 30px;
+  width: 70px;
+  height:48px;
+  padding-right: 12px;
+  padding-left: 10px;
   padding-top: 5px;
   
 }
 .ios{
-  width:100px;
-  height:80px;
-  /* transform: scale(0.6); */
-  /* padding-right: 30px; */
-  padding-left: 35px;
+  width:70px;
+  height:45px;
+  padding-right: 14px; 
+  padding-left: 18px;
   padding-top: 5px;
 }
 .container2{
   margin:auto;
   justify-content: center;
   align-items: center;
-  width: 28rem;
-  height:23rem;
-  margin-left: 5rem;
-  margin-right: auto;
-  margin-top: 8rem;
+  width: 33rem;
+  height:10rem;
+  margin-top: 1rem;
   background-color: rgb(255, 255, 255);
   box-shadow: rgb(46 56 64 / 12%) 0px 4px 16px;
   border-radius: 8px;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 24px;
   display: inline;
-  /* padding:2rem; */
-  padding-left: 20px;
 }
 .centered{
   display:flex;
@@ -65,5 +55,9 @@
  margin-left: 5.8rem !important;
 }
 
+.font{
+  font-size: small;
+}
+
 
 

src/app/login/login.component.html

-<div class="Rootcontainer" style="display: flex;">
+<div>
+  <div class="row">
 <div class="container1">
   <div class="row">
     <div class="col"><h4 class="centered tekblue">Time and Expense</h4>
@@ -37,21 +38,38 @@
     <button class="ctn-btn" (click)="appLogin()">Login</button>
   </div>
   </div>
+  <!-- <div class="row mb-2">
+    <div class = "col-8">
+      <p>Don't have an account?</p>
+    </div>
+    <div class = "col-4">
+      <p>Signup</p>
+    </div>
+  </div> -->
+  </div>
 </div>
+<div class = "row">
 <div class="container2">
   <div class="row">
-    <div class="col pl-5">
+    <div class="col-2 pl-4">
       <img src="./assets/android-logo.png"  class="android">
-      <ngx-qrcode [value]="androidStore" [width]=140></ngx-qrcode>
+       
+      <ngx-qrcode [value]="androidStore" [width]=80></ngx-qrcode>
     </div>
-    <div class="col">
-      <img src="./assets/appstore-logo.png" class="ios">
-      <ngx-qrcode [value]="appleStore" [width]=140></ngx-qrcode>
+    <div class="col-1">
+      <img src = "./assets/authenticator.png" style="width:50px; height:50px">
     </div>
-    <div class="col">
-        <p><b>Google Android</b>. On your Android device, go to Google Play to download and install the Authenticator app.<br></p>
-        <p><b>Apple iOS</b>. On your Apple iOS device, go to the App Store to download and install the Authenticator app.</p>
     
+    <!-- <img src = "./assets/Authenticator.png"> -->
+    <div class="col-2">
+      <img src="./assets/appstore-logo.png" class="ios">
+      <ngx-qrcode [value]="appleStore" [width]=85></ngx-qrcode>
+    </div>
+    <div class="col-7 pt-2 font">
+      <li>Search for MS Authenticator in playstore/ appstore, or scan the specific QR Code and install the app.</li>
+      <li>Enter your Email-Id registered with Time & Expense and click on get otp</li>
+      <li>Enter the otp received in your email id and click on login.</li>
+    </div>
     </div>
   </div>
 </div>
\ No newline at end of file

src/app/scanqr/scanqr.component.html

-<div class="row">
-    <div class="col">
+<div>
+    <div class="row">
     <div class="container2">
       <b><h5 class="pt-4">  Set up the Authenticator app</h5></b>
       <p>After you install the Authenticator app, follow the steps below to add your account:</p>
@@ -9,7 +9,7 @@
       <li>select Add account, and then select Work or school account, followed by Scan a QR Code.</li>
     </div>
     </div>
-    <div class="col">
+    <div class="row">
       <div class="container main-div">
         <div class="row" >
           <div class="col">

src/index.html

@@ -15,7 +15,7 @@
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 </head>
-<body style="background-image: url('./assets/bg.png'); background-size: 100%; background-repeat: no-repeat;">
+<body style="background-image: url('./assets/bg.png'); background-size: 100%; background-repeat: no-repeat; overflow: hidden;">
   <app-root></app-root>
 </body>
 </html>