design login page
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d96765b..c9f9c66 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,6 @@
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule, MatFormFieldModule} from '@angular/material';
+import {MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule, MatFormFieldModule, MatSelectModule, MatSelect} from '@angular/material';
import { NgModule } from '@angular/core';
@@ -14,8 +14,8 @@
AppComponent,LoginComponent
],
imports: [
- BrowserModule,MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule,
- MatFormFieldModule
+ BrowserModule, BrowserAnimationsModule, MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule,
+ MatFormFieldModule, MatSelectModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css
index 5c291d8..2e4aa0c 100644
--- a/src/app/login/login.component.css
+++ b/src/app/login/login.component.css
@@ -1,7 +1,7 @@
.greetings{
color:white;
margin-left:50px;
- font-size:30px;
+ font-size:34px;
margin-bottom:1%;
}
.login-div{
@@ -26,19 +26,32 @@
}
-.image-div{
- margin-top:5%;
-}
-
-.app-input{
- padding:10%;
+.app-input,.app-input1{
+ display:flex;
+ display:inline-block;
-
}
+.image-div{
+ margin-top:3%;
+}
+.image{
+ width: 300px;
+}
+.form-div{
+ margin-left:10%;
+}
+.app-input2{
+
+ width:80%;
+}
+.app-input1{
+ width:90%;
+}
+
.btn{
- margin-left: 10%;
+ margin-left: 5%;
margin-right: 10%;
- width:70%;
+ width:75%;
}
.welcome,.language{
display:flex;
@@ -49,4 +62,11 @@
}
.language{
margin-left: 10%;
+ color:white;
+}
+.change{
+ font-size:12px;
+}
+.select-input{
+ width:100px;
}
\ No newline at end of file
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index f10ae70..fdfe3a0 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,37 +1,64 @@
<div class="main-background" style="background-image:url('assets/Background.png');">
- <div style="margin-top:10%; margin-left:10%;">
- <div class="welcome">
- <span class="greetings">Welcome To Apache Fineract CN</span>
- </div>
- <div class="language">
- <span>Change language</span>
- </div>
- </div>
- <div style="margin-left:10%;">
- <div class="image-div">
- <img src="assets/fineract.png" class="image">
- </div>
-<div class="login-div mat-elevation-z2">
- <mat-icon class="app-input">business</mat-icon>
- <mat-form-field>
- <input matInput placeholder="Tenant" class="app-input">
-</mat-form-field>
- <br>
- <mat-icon class="app-input">person</mat-icon>
- <mat-form-field>
- <input matInput placeholder="Username" class="app-input">
- </mat-form-field>
- <br>
- <mat-icon class="app-input">https</mat-icon>
- <mat-form-field>
- <input matInput placeholder="Password" class="app-input">
+ <div style="margin-top:5%; margin-left:25%;">
+ <div class="welcome">
+ <span class="greetings">Welcome To Apache Fineract CN</span>
+ </div>
+ <div class="language">
+ <span class="change">Change language</span>
+ <mat-form-field class="select-input">
+ <mat-select [(value)]="selected">
+ <mat-option value="English">English</mat-option>
+ <mat-option value="French">French</mat-option>
+ <mat-option value="Portoguese">Portoguese</mat-option>
+ </mat-select>
</mat-form-field>
- <p>
- <button mat-raised-button color="primary" type="submit" class="btn">Sign In</button>
- </p>
-</div>
-</div>
-
+ </div>
+ </div>
+ <div style="margin-left:20%;">
+ <div class="image-div">
+ <img src="assets/fineract.png" class="image">
+ </div>
+ <div class="login-div mat-elevation-z2">
+ <br>
+ <div class="form-div">
+ <div class="app-input">
+ <mat-icon>business</mat-icon>
+ </div>
+ <div class="app-input1">
+ <mat-form-field class="app-input2">
+ <input matInput placeholder="Tenant">
+ </mat-form-field>
+ </div>
-
-</div>
+ <br>
+ <br>
+ <div class="app-input">
+ <mat-icon>person</mat-icon>
+ </div>
+ <div class="app-input1">
+ <mat-form-field class="app-input2">
+ <input matInput placeholder="Username">
+ </mat-form-field>
+ </div>
+ <br>
+ <br>
+ <div class="app-input">
+ <mat-icon>https</mat-icon>
+ </div>
+ <div class="app-input1">
+ <mat-form-field class="app-input2">
+ <input matInput placeholder="Password">
+ </mat-form-field>
+ </div>
+ <br>
+ <br>
+ <p>
+ <button mat-raised-button color="primary" type="submit" class="btn">Sign In</button>
+ </p>
+ <br>
+ </div>
+ </div>
+
+
+
+ </div>
\ No newline at end of file
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index bcaaa45..8eab576 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -9,6 +9,9 @@
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
+ selected = 'English';
+
+
constructor(){}
