From 247c5f6ec45c7ceb4a2dcfbe633a76928fb10a82 Mon Sep 17 00:00:00 2001
From: Ognjen Cirkovic <ciraboxkg@gmail.com>
Date: Tue, 26 Apr 2022 23:53:53 +0200
Subject: Ispravljen dizajn na profile stranici. Promenje boje kod alert
 dialoga.

---
 .../alert-dialog/alert-dialog.component.css        |  3 +
 .../alert-dialog/alert-dialog.component.html       | 16 +++---
 .../src/app/_pages/profile/profile.component.css   | 51 +++++------------
 .../src/app/_pages/profile/profile.component.html  | 66 +++++++++++++---------
 4 files changed, 66 insertions(+), 70 deletions(-)

(limited to 'frontend/src/app')

diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css
index e69de29b..bdfd06c9 100644
--- a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css
+++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css
@@ -0,0 +1,3 @@
+mat-dialog-container{
+    background: var(ns-bg-dark-50) !important;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html
index 82365193..2d7e4d86 100644
--- a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html
+++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html
@@ -1,7 +1,9 @@
-<h2 mat-dialog-title class="text-muted">{{data.title}}</h2>
-<div mat-dialog-content class="mt-4" style="color: rgb(81, 76, 76);">
-  {{data.message}}
-</div>
-<div mat-dialog-actions class="d-flex justify-content-center mt-4">
-  <button mat-button cdkFocusInitial (click)="onOkClick()" style="background-color: lightgray;">OK</button>
-</div>
\ No newline at end of file
+
+
+  <h2 mat-dialog-title >{{data.title}}</h2>
+  <div mat-dialog-content class="mt-4 text-offwhite" >
+    {{data.message}}
+  </div>
+  <div mat-dialog-actions class="d-flex justify-content-center mt-4">
+    <button mat-raised-button cdkFocusInitial (click)="onOkClick()" color="basic">OK</button>
+  </div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/profile/profile.component.css b/frontend/src/app/_pages/profile/profile.component.css
index 5565d105..428870da 100644
--- a/frontend/src/app/_pages/profile/profile.component.css
+++ b/frontend/src/app/_pages/profile/profile.component.css
@@ -1,44 +1,21 @@
-body{margin-top:20px;
-background-color:#f2f6fc;
-color:#69707a;
+.card{
+    background-color: transparent;
+    color:var(--offwhite)
 }
-.img-account-profile {
-    height: 10rem;
-    border: 1px solid lightgray;
-}
-.rounded-circle {
-    border-radius: 50% !important;
-}
-.card .card-header {
-    font-weight: 500;
-}
-.card-header:first-child {
-    border-radius: 0.35rem 0.35rem 0 0;
+
+.card-header{
+    background-color: var(--ns-primary-50);
+    color:var(--offwhite)
 }
-.card-header {
-    padding: 1rem 1.35rem;
-    margin-bottom: 0;
-    background-color: rgba(33, 40, 50, 0.03);
-    border-bottom: 1px solid rgba(33, 40, 50, 0.125);
+.card-body{
+    background-color: var(--ns-bg-dark-50);
 }
-.form-control, .dataTable-input {
-    display: block;
+
+mat-form-field{
     width: 100%;
-    padding: 0.875rem 1.125rem;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1;
-    color: #69707a;
-    background-color: #fff;
-    background-clip: padding-box;
-    border: 1px solid #c5ccd6;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    border-radius: 0.35rem;
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
-.selectedPicture {
-    border: 2px solid darkgray;
+.danger-Text{
+    color:var(--ns-warn)
 }
+
diff --git a/frontend/src/app/_pages/profile/profile.component.html b/frontend/src/app/_pages/profile/profile.component.html
index 557d69fd..37df4f14 100644
--- a/frontend/src/app/_pages/profile/profile.component.html
+++ b/frontend/src/app/_pages/profile/profile.component.html
@@ -27,17 +27,21 @@
                             <div class="row gx-3 mb-3">
                                 <!-- Form Group (password)-->
                                 <div class="col-md-6">
-                                    <label class="small mb-1" for="inputPassword">Važeća lozinka</label>
-                                    <input class="form-control" id="inputPassword" name="inputPassword" type="password" [(ngModel)]="this.oldPass" placeholder="Trenutna lozinka">
-                                    <small *ngIf="wrongPassBool" class="form-text text-danger">Neispravna lozinka.</small>
-                                    <small *ngIf="wrongOldPassBool" class="form-text text-danger">Pogrešan format.</small>
+                                    <small *ngIf="wrongPassBool" class="form-text danger-Text">Neispravna lozinka.</small>
+                                    <mat-form-field appearance="fill">
+                                        <mat-label>Važeća lozinka</mat-label>
+                                        <input matInput id="inputPassword" name="inputPassword" type="password" placeholder="" [(ngModel)]="this.oldPass">
+                                      </mat-form-field>
+                                    <small *ngIf="wrongOldPassBool" class="form-text danger-Text">Pogrešan format.</small>
                                 </div>
                                 <!-- Form Group (new password)-->
                                 <div class="col-md-6">
-                                    <label class="small mb-1" for="inputNewPassword">Nova lozinka</label>
-                                    <input class="form-control" id="inputNewPassword" name="inputNewPassword" type="password" [(ngModel)]="this.newPass1" placeholder="Ukucaj novu lozinku">
-                                    <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
-                                    <small *ngIf="wrongNewPass1Bool" class="form-text text-danger">Pogrešan format.</small>
+                                    <mat-form-field appearance="fill">
+                                        <mat-label>Nova lozinka</mat-label>
+                                        <input matInput id="inputNewPassword" name="inputNewPassword" type="password" placeholder="" [(ngModel)]="this.newPass1">
+                                      </mat-form-field>
+                                    <small *ngIf="wrongNewPassBool" class="form-text danger-Text">Lozinke se ne podudaraju.</small>
+                                    <small *ngIf="wrongNewPass1Bool" class="form-text danger-Text">Pogrešan format.</small>
                                 </div>
                             </div>
     
@@ -46,15 +50,17 @@
                                 <div class="col-md-6">
                                     <div class="col text-center">
                                         <!-- Save changes button-->
-                                        <button class="btn btn-primary text-center mt-4" type="button" (click)="savePasswordChanges()">Promeni lozinku</button>
+                                        <button mat-raised-button color="primary" (click)="savePasswordChanges()">Promeni lozinku</button>
                                     </div>
                                 </div>
                                 <!-- Form Group (new password again)-->
                                 <div class="col-md-6">
-                                    <label class="small mb-1" for="inputNewPasswordAgain">Ponovo nova lozinka</label>
-                                    <input class="form-control" id="inputNewPasswordAgain" name="inputNewPasswordAgain" type="password" [(ngModel)]="this.newPass2" placeholder="Ukucaj novu lozinku">
-                                    <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
-                                    <small *ngIf="wrongNewPass2Bool" class="form-text text-danger">Pogrešan format.</small>
+                                    <mat-form-field appearance="fill">
+                                        <mat-label>Ponovo nova lozinka</mat-label>
+                                        <input matInput id="inputNewPasswordAgain" name="inputNewPasswordAgain" placeholder="" type="password" [(ngModel)]="this.newPass2">
+                                    </mat-form-field>
+                                    <small *ngIf="wrongNewPassBool" class="form-text danger-Text">Lozinke se ne podudaraju.</small>
+                                    <small *ngIf="wrongNewPass2Bool" class="form-text danger-Text">Pogrešan format.</small>
                                 </div>
                             </div>
                         </div>
@@ -74,15 +80,19 @@
                         <div class="row gx-3 mb-3">
                             <!-- Form Group (username)-->
                             <div class="col-md-6">
-                                <label class="small mb-1" for="inputUsername">Korisničko ime (kako će ostali korisnici videti tvoje ime)</label>
-                                <input class="form-control" id="inputUsername" name="inputUsername" type="text" [(ngModel)]="this.username">
-                                <small *ngIf="wrongUsernameBool" class="form-text text-danger">Pogrešan format.</small>
+                                <mat-form-field appearance="fill">
+                                    <mat-label>Korisničko ime (kako će ostali korisnici videti tvoje ime)</mat-label>
+                                    <input matInput id="inputUsername" name="inputUsername" type="text" [(ngModel)]="this.username">
+                                </mat-form-field>
+                                <small *ngIf="wrongUsernameBool" class="form-text danger-Text">Pogrešan format.</small>
                             </div>
                             <!-- Form Group (email address)-->
                             <div class="col-md-6">
-                                <label class="small mb-1" for="inputEmailAddress">Email adresa</label>
-                                <input class="form-control" id="inputEmailAddress" name="inputEmailAddress" type="email" [(ngModel)]="this.email">
-                                <small *ngIf="wrongEmailBool" class="form-text text-danger">Pogrešan format.</small>
+                                <mat-form-field appearance="fill">
+                                    <mat-label>Email adresa</mat-label>
+                                    <input matInput id="inputEmailAddress" name="inputEmailAddress" type="email" [(ngModel)]="this.email">
+                                </mat-form-field>
+                                <small *ngIf="wrongEmailBool" class="form-text danger-Text">Pogrešan format.</small>
                             </div>
                         </div>
 
@@ -90,15 +100,19 @@
                         <div class="row gx-3 mb-3">
                             <!-- Form Group (first name)-->
                             <div class="col-md-6">
-                                <label class="small mb-1" for="inputFirstName">Ime</label>
-                                <input class="form-control" id="inputFirstName" name="inputFirstName" type="text" [(ngModel)]="this.firstName">
-                                <small *ngIf="wrongFirstNameBool" class="form-text text-danger">Pogrešan format.</small>
+                                <mat-form-field appearance="fill">
+                                    <mat-label>Ime</mat-label>
+                                    <input matInput id="inputFirstName" name="inputFirstName" type="text" [(ngModel)]="this.firstName">
+                                </mat-form-field>
+                                <small *ngIf="wrongFirstNameBool" class="form-text danger-Text">Pogrešan format.</small>
                             </div>
                             <!-- Form Group (last name)-->
                             <div class="col-md-6">
-                                <label class="small mb-1" for="inputLastName">Prezime</label>
-                                <input class="form-control" id="inputLastName" name="inputLastName" type="text" [(ngModel)]="this.lastName">
-                                <small *ngIf="wrongLastNameBool" class="form-text text-danger">Pogrešan format.</small>
+                                <mat-form-field appearance="fill">
+                                    <mat-label>Prezime</mat-label>
+                                    <input matInput id="inputLastName" name="inputLastName" type="text" [(ngModel)]="this.lastName">
+                                </mat-form-field>
+                                <small *ngIf="wrongLastNameBool" class="form-text danger-Text">Pogrešan format.</small>
                             </div>
                         </div>
 
@@ -121,7 +135,7 @@
                         <div class="row mt-5">
                             <div class="col text-center">
                                 <!-- Save changes button-->
-                                <button class="btn btn-primary text-center" type="button" (click)="saveInfoChanges()">Sačuvaj izmene</button>
+                                <button mat-raised-button color="primary" (click)="saveInfoChanges()" >Sačuvaj izmene</button>
                             </div>
                         </div>
                     </form>
-- 
cgit v1.2.3