From 943498776e8aae27d2df88d4cdb540400e2dfb24 Mon Sep 17 00:00:00 2001 From: D3B1RUM4N <elies1.mek03@gmail.com> Date: Fri, 6 Dec 2024 00:11:29 +0100 Subject: [PATCH 1/3] style: css for login --- .../modules/profile/sign/sign.component.css | 61 ++++++++++++++++--- src/styles.css | 17 ++++++ 2 files changed, 71 insertions(+), 7 deletions(-) diff --git a/src/app/modules/profile/sign/sign.component.css b/src/app/modules/profile/sign/sign.component.css index 9528daa..c3dd038 100644 --- a/src/app/modules/profile/sign/sign.component.css +++ b/src/app/modules/profile/sign/sign.component.css @@ -1,19 +1,20 @@ .button-header { background-color: #ffffff; border-radius: 10px; - width: 80%; + width: 100%; height: 10%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; - padding: 1rem; + box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; } -.button-header > button { +.button-header>button { background: none; border: none; height: 80%; - width: 100%; + width: 70%; + margin-left: 15%; padding: 10px 20px; font-size: 16px; cursor: pointer; @@ -21,7 +22,12 @@ color: #b9b9b9; } -.button-header > button:hover { +.button-header>button.active { + border-bottom-color: #2b73fe; + color: #2b73fe; +} + +.button-header>button:hover { border-bottom-color: #2b73fe; color: #2b73fe; } @@ -33,6 +39,47 @@ .wrong { color: red; - font-size: 12px; - margin-top: 5px; + font-size: 2vmin; } + +.grid { + height: 100%; +} + +.container { + display: flex; + flex-direction: column; + + width: 100%; + height: 100%; + flex-grow: 0; +} + +.content { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + height: 100%; +} + +form { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + /* height: 100%; */ + width: 100%; +} + +.error { + color: red; + font-size: 2vmin; + margin: 0; + text-align: center; +} + +.blueButton { + height: 10%; + +} \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index 34bf365..c927c5a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -71,6 +71,7 @@ h1 { border-style: solid; height: 100px; width: 100%; + cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } @@ -136,6 +137,22 @@ h1 { -webkit-box-sizing: border-box; } +.inputText { + width: 100%; + height: 5%; + border-color: #1FA9FF; + border-width: 4px; + border-radius: 10px; + border-style: solid; + + padding: 20px; + font-size: 2vmin; + + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; +} + /* scrollable lists */ .scrollable-list::-webkit-scrollbar { width: 10px; -- GitLab From a798292348bd2d1a840966d650b19bde76dc2626 Mon Sep 17 00:00:00 2001 From: D3B1RUM4N <elies1.mek03@gmail.com> Date: Fri, 6 Dec 2024 00:11:56 +0100 Subject: [PATCH 2/3] feat: add feedback --- .../profile-info/profile-info.component.html | 19 +++--- .../modules/profile/sign/sign.component.html | 67 +++++++++---------- 2 files changed, 40 insertions(+), 46 deletions(-) diff --git a/src/app/modules/profile/profile-info/profile-info.component.html b/src/app/modules/profile/profile-info/profile-info.component.html index b55befb..c05549a 100644 --- a/src/app/modules/profile/profile-info/profile-info.component.html +++ b/src/app/modules/profile/profile-info/profile-info.component.html @@ -5,22 +5,21 @@ <div class="container"> <div class="grid-profile"> <div class="profile_info"> - <img - src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" - alt="profile picture" - /> + <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" + alt="profile picture" /> <h3>User Name</h3> </div> <hr /> <div class="profile_stats"> - <img - src="https://img.uxcel.com/tags/key-performance-indicator-kpi-1698250709411-2x.jpg" - alt="stats" - /> + <img src="https://img.uxcel.com/tags/key-performance-indicator-kpi-1698250709411-2x.jpg" + alt="stats" /> </div> </div> </div> - <app-sign *ngIf="!isLogged"></app-sign> + <h3>Not logged in</h3> + <div class="grid"> + <app-sign *ngIf="!isLogged"></app-sign> + </div> <div *ngIf="isLogged"> <h3>Your quizzes</h3> <div class="grid"> @@ -42,4 +41,4 @@ </div> </div> </div> -</div> +</div> \ No newline at end of file diff --git a/src/app/modules/profile/sign/sign.component.html b/src/app/modules/profile/sign/sign.component.html index 9db6a8a..8a24df4 100644 --- a/src/app/modules/profile/sign/sign.component.html +++ b/src/app/modules/profile/sign/sign.component.html @@ -1,38 +1,33 @@ -<p>sign works!</p> -<div class="button-header"> - <button (click)="showLogin()">LOGIN</button> - <button (click)="showSignup()">SIGNUP</button> -</div> -<div class="content"> - <form [formGroup]="formGroup"> - <input - formControlName="email" - placeholder="EMAIL" - (blur)="checkValidity('email')" - [ngClass]="{ wrong: !formGroup.get('email')?.valid && formGroup.get('email')?.touched }" - /> - <input - formControlName="password" - placeholder="PASSWORD" - (blur)="checkValidity('password')" - [ngClass]="{ wrong: !formGroup.get('password')?.valid && formGroup.get('password')?.touched }" - /> - <input - formControlName="confirm_password" - placeholder="CONFIRM PASSWORD" - *ngIf="signup" - (blur)="checkValidity('confirm_password')" - [ngClass]="{ +<div class="container"> + <div class="button-header"> + <button [ngClass]="{active: login}" (click)="showLogin()">LOGIN</button> + <button [ngClass]="{active: signup}" (click)="showSignup()">SIGNUP</button> + </div> + <div class="content"> + <form [formGroup]="formGroup"> + <input formControlName="email" placeholder="EMAIL" (blur)="checkValidity('email')" [ngClass]="{ + 'wrong': !formGroup.get('email')?.valid && formGroup.get('email')?.touched + }" class="inputText" /> + <input formControlName="password" placeholder="PASSWORD" (blur)="checkValidity('password')" + [ngClass]="{ wrong: !formGroup.get('password')?.valid && formGroup.get('password')?.touched }" + class="inputText" /> + <input formControlName="confirm_password" placeholder="CONFIRM PASSWORD" *ngIf="signup" + (blur)="checkValidity('confirm_password')" [ngClass]="{ wrong: formGroup.get('confirm_password')?.errors?.['missMatch'] && formGroup.get('confirm_password')?.touched - }" - /> - </form> - <button - [disabled]="!formGroup.valid || (signup && formGroup.get('confirm_password')?.errors?.['missMatch'])" - (click)="submit()" - [ngClass]="{ valid: formGroup.valid }" - > - @if (login) { LOGIN } @else { SIGNUP } - </button> -</div> + }" class="inputText" /> + <div class="error"> + <p *ngIf="!formGroup.get('email')?.valid && formGroup.get('email')?.touched" class="error"> + Email is required</p> + <p *ngIf="!formGroup.get('password')?.valid && formGroup.get('password')?.touched" class="error">8 + character minimum</p> + <p *ngIf="formGroup.get('confirm_password')?.errors?.['missMatch'] && formGroup.get('confirm_password')?.touched" + class="error">Passwords do not match</p> + </div> + </form> + <button [disabled]="!formGroup.valid || (signup && formGroup.get('confirm_password')?.errors?.['missMatch'])" + (click)="submit()" [ngClass]="{ valid: formGroup.valid }" class="blueButton"> + @if (login) { LOGIN } @else { SIGNUP } + </button> + </div> +</div> \ No newline at end of file -- GitLab From caa6c136f98fa7a88baa97107a943005e2a09097 Mon Sep 17 00:00:00 2001 From: D3B1RUM4N <elies1.mek03@gmail.com> Date: Fri, 6 Dec 2024 00:51:25 +0100 Subject: [PATCH 3/3] style: change css for button --- src/app/modules/profile/sign/sign.component.css | 16 ++++++++++++++++ src/app/modules/profile/sign/sign.component.html | 3 ++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/app/modules/profile/sign/sign.component.css b/src/app/modules/profile/sign/sign.component.css index c3dd038..4b55ee1 100644 --- a/src/app/modules/profile/sign/sign.component.css +++ b/src/app/modules/profile/sign/sign.component.css @@ -81,5 +81,21 @@ form { .blueButton { height: 10%; +} +.wrongButton { + display: flex; + justify-content: center; + align-items: center; + background: #b9b9b9; + color: #FFFFFF; + font-weight: bold; + font-size: 5vmin; + border-radius: 10px; + border-color: #FFFFFF; + border-width: 4px; + border-style: solid; + height: 10%; + width: 100%; + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } \ No newline at end of file diff --git a/src/app/modules/profile/sign/sign.component.html b/src/app/modules/profile/sign/sign.component.html index 8a24df4..b75216c 100644 --- a/src/app/modules/profile/sign/sign.component.html +++ b/src/app/modules/profile/sign/sign.component.html @@ -26,7 +26,8 @@ </div> </form> <button [disabled]="!formGroup.valid || (signup && formGroup.get('confirm_password')?.errors?.['missMatch'])" - (click)="submit()" [ngClass]="{ valid: formGroup.valid }" class="blueButton"> + (click)="submit()" [ngClass]="{ wrongButton: !formGroup.valid, + blueButton: formGroup.valid }"> @if (login) { LOGIN } @else { SIGNUP } </button> </div> -- GitLab