updates

package.json

@@ -14,7 +14,7 @@
     "private": true,
     "dependencies": {
         "@agm/core": "^1.0.0-beta.7",
-        "@angular/animations": "^8.2.2",
+        "@angular/animations": "^8.2.11",
         "@angular/common": "~8.1.2",
         "@angular/compiler": "~8.1.2",
         "@angular/core": "~8.1.2",

src/app/app.module.ts

@@ -9,8 +9,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { IonicStorageModule } from '@ionic/storage';
 import { GooglePlus } from '@ionic-native/google-plus/ngx';
 
-
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 

src/app/signup/signup.page.html

@@ -26,9 +26,13 @@
                 <input class="" type="password" placeholder="Create A Password">
             </div>
             <div class="row">
+                <ion-datetime displayFormat="DD-MM-YY" placeholder="Date of Birth"></ion-datetime>
+            </div>
+            <div class="row">
                 <h6>
                     <input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="value1">
-                    <label for="styled-checkbox-1"><span>I agree with <a>Terms and Conditions</a></span></label></h6>
+                    <label for="styled-checkbox-1"><span>I agree with <a (click)="menuToggle()">Terms and
+                                Conditions</a></span></label></h6>
             </div>
             <div class="row">
                 <button class="login_btn" (click)="goToPage('verification')">SIGN UP</button>
@@ -49,4 +53,16 @@
             </div>
         </div>
     </div>
+
 </ion-content>
+<div class="terms_wrapper" *ngIf="menuShow" [@slideInOut]>
+    <div class="terms_inner">
+        <h5>Terms & Conditions</h5>
+        <p>
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
+            survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+            publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+        </p>
+        <button class="accept" (click)="menuToggle()">I Accept</button>
+    </div>
+</div>
\ No newline at end of file

src/app/signup/signup.page.scss

@@ -23,6 +23,17 @@
                 border-radius: 8px;
                 font-size: 16px;
             }
+            ion-datetime {
+                border: 1px solid rgba(215, 213, 228, 1);
+                background: transparent;
+                color: rgba(215, 213, 228, 1);
+                width: 100%;
+                height: 45px;
+                text-align: center;
+                border-radius: 8px;
+                font-size: 16px;
+                padding-left: 0px;
+            }
             .login_btn {
                 width: 100%;
                 background-color: #29285b;
@@ -131,3 +142,48 @@
         }
     }
 }
+
+.terms_wrapper {
+    background-color: rgba(41, 40, 91, 0.6);
+    color: #fff;
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    z-index: 9999;
+    .terms_inner {
+        background-color: #fff;
+        border-radius: 10px;
+        width: calc(100% - 20px);
+        margin: 0 auto;
+        padding: 20px;
+        padding-top: 10px;
+        position: relative;
+        top: 50px;
+        h5 {
+            margin: 0px;
+            border-bottom: 1px solid #a8a8a8;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            text-align: center;
+            color: rgba(41, 40, 91, 1);
+        }
+        p {
+            color: #a8a8a8;
+            text-align: justify;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            height: 300px;
+            overflow: scroll;
+        }
+        .accept {
+            width: 100%;
+            height: 35px;
+            background-color: #29285b;
+            color: #fff;
+            text-align: center;
+            border-radius: 2px;
+        }
+    }
+}
\ No newline at end of file

src/app/signup/signup.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
+import { trigger, transition, animate, style } from '@angular/animations';
 
 @Component({
   selector: 'app-signup',
   templateUrl: './signup.page.html',
   styleUrls: ['./signup.page.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({ transform: 'translateY(100%)' }),
+        animate('300ms ease-in', style({ transform: 'translateY(0%)' }))
+      ]),
+      transition(':leave', [
+        animate('300ms ease-out', style({ transform: 'translateY(100%)' }))
+      ])
+    ])
+  ]
 })
 export class SignupPage implements OnInit {
 
+  menuShow = false;
+
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -27,5 +41,10 @@ export class SignupPage implements OnInit {
     this.location.back();
   }
 
+  menuToggle() {
+    this.menuShow = !this.menuShow;
+  }
+
+
 
 }

src/global.scss

@@ -551,3 +551,20 @@ ion-header {
     text-align: center;
     z-index: 99;
 }
+
+.picker-wrapper {
+    .picker-toolbar {
+        .picker-toolbar-button {
+            .picker-button {
+                color: #29285b;
+                font-weight: 900;
+            }
+        }
+    }
+    .picker-columns {
+        .picker-opt-selected {
+            color: #29285b;
+            font-weight: 900;
+        }
+    }
+}
\ No newline at end of file