diff options
Diffstat (limited to 'src/DevHive.Angular')
| -rw-r--r-- | src/DevHive.Angular/src/app/components/login/login.component.css | 36 | ||||
| -rw-r--r-- | src/DevHive.Angular/src/app/components/login/login.component.html | 24 |
2 files changed, 22 insertions, 38 deletions
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.css b/src/DevHive.Angular/src/app/components/login/login.component.css index 82ec645..b584e90 100644 --- a/src/DevHive.Angular/src/app/components/login/login.component.css +++ b/src/DevHive.Angular/src/app/components/login/login.component.css @@ -1,21 +1,9 @@ - - -#content input[type=text], #content #submit-btn { - border: 2px solid black; - border-radius: 0.4em; - box-sizing: border-box; - width: 100%; - margin-top: 0.5em; - font-size: 0.8em; - padding: 0.3em; -} - -#content input[type=text]:nth-last-of-type(1) { - margin-bottom: 0.5em; +* { + transition: .2s; } -input[type=text]:focus, button[type=submit]:focus { - outline: 0; +form { + width: 100%; } #content hr { @@ -24,18 +12,6 @@ input[type=text]:focus, button[type=submit]:focus { box-sizing: border-box; } -#submit-btn { - background-color: black; - color: white; - text-align: center; -} - -#submit-btn:hover { - cursor: pointer; - border-color: darkgrey !important; - background-color: darkgrey; -} - -#submit-btn:active { - transform: scale(0.9); +.input-selection:nth-of-type(1) { + margin-top: 1.2em; } diff --git a/src/DevHive.Angular/src/app/components/login/login.component.html b/src/DevHive.Angular/src/app/components/login/login.component.html index 3912004..ea81a8b 100644 --- a/src/DevHive.Angular/src/app/components/login/login.component.html +++ b/src/DevHive.Angular/src/app/components/login/login.component.html @@ -1,12 +1,20 @@ <div id="content"> - <div class="title"> - Login - </div> - <hr> + <div class="title">Login</div> + <form [formGroup]="loginUserFormGroup" (ngSubmit)="onSubmit()"> - <input type="text" placeholder="Username" name="username" formControlName="username"> - <input type="text" placeholder="Password" name="password" formControlName="password"> - <hr> - <button type="submit" value="Submit" id="submit-btn">Submit</button> + <hr> + + <div class="input-selection"> + <input type="text" placeholder="Username" class="input-field" formControlName="username" required> + <label class="input-field-label">Username</label> + </div> + + <div class="input-selection"> + <input type="password" placeholder="Password" class="input-field" formControlName="password" required> + <label class="input-field-label">Password</label> + </div> + + <hr> + <button class="submit-btn" type="submit">Submit</button> </form> </div> |
