From 3686de93a8d08031f0930dfcec929df92eb218f0 Mon Sep 17 00:00:00 2001
From: Pablo Bonilla <pbonilla29@hotmail.com>
Date: Thu, 8 Jul 2021 23:01:07 -0600
Subject: [PATCH] Add custom data survey buttons

---
 .../account/settings/settings.component.html  | 392 +++++++++---------
 .../webapp/content/scss/paper-dashboard.scss  |   1 +
 .../paper-dashboard/_datasurvey-buttons.scss  |  43 ++
 3 files changed, 236 insertions(+), 200 deletions(-)
 create mode 100644 src/main/webapp/content/scss/paper-dashboard/_datasurvey-buttons.scss

diff --git a/src/main/webapp/app/account/settings/settings.component.html b/src/main/webapp/app/account/settings/settings.component.html
index 33e3201..483e48b 100644
--- a/src/main/webapp/app/account/settings/settings.component.html
+++ b/src/main/webapp/app/account/settings/settings.component.html
@@ -167,219 +167,211 @@
 -------------------------------------------------------------------------------
 -->
 
-<div>
-  <div class="row justify-content-center">
-    <div class="row w-75 pb-lg-5 pr-lg-5 mb-5" style="border-bottom: 1px solid #e7ebf3">
-      <div class="col-lg-4 mr-lg-5">
-        <div class="row">
-          <div class="w-100">
-            <p><b>Perfil</b></p>
-          </div>
-          <div>
-            <p>Información general de su usuario, el correo electrónico es su identificador en DataSurvey.</p>
-          </div>
+<div class="row justify-content-center">
+  <div class="row w-75 pb-lg-5 pr-lg-5 mb-5" style="border-bottom: 1px solid #e7ebf3">
+    <div class="col-lg-4 mr-lg-5">
+      <div class="row">
+        <div class="w-100">
+          <p><b>Perfil</b></p>
         </div>
-      </div>
-
-      <!-- Form -->
-      <div class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
-        <div class="row mb-2">
-          <div class="form-group w-100">
-            <label class="form-control-label" for="field_email">Correo electrónico</label>
-            <input
-              type="text"
-              class="form-control"
-              name="email"
-              id="field_email"
-              data-cy="email"
-              formControlName="email"
-              [readonly]="true"
-            />
-            <div *ngIf="editForm.get('email')!.invalid && (editForm.get('email')!.dirty || editForm.get('email')!.touched)">
-              <small
-                class="form-text text-danger"
-                *ngIf="editForm.get('email')?.errors?.required"
-                jhiTranslate="entity.validation.required"
-              >
-                This field is required.
-              </small>
-            </div>
-          </div>
-        </div>
-        <div class="row mb-2">
-          <div class="form-group w-100">
-            <label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.nombre" for="field_nombre">Nombre</label>
-            <input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
-            <div *ngIf="editForm.get('nombre')!.invalid && (editForm.get('nombre')!.dirty || editForm.get('nombre')!.touched)">
-              <small
-                class="form-text text-danger"
-                *ngIf="editForm.get('nombre')?.errors?.required"
-                jhiTranslate="entity.validation.required"
-              >
-                This field is required.
-              </small>
-            </div>
-          </div>
-        </div>
-        <div class="row mb-2">
-          <div class="form-group w-100">
-            <label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.fechaNacimiento" for="field_fechaNacimiento"
-              >Fecha de nacimiento</label
-            >
-            <div class="d-flex">
-              <input
-                id="field_fechaNacimiento"
-                data-cy="fechaNacimiento"
-                type="datetime-local"
-                class="form-control"
-                name="fechaNacimiento"
-                formControlName="fechaNacimiento"
-                placeholder="YYYY-MM-DD HH:mm"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="row mb-2">
-          <div class="form-group w-100">
-            <label for="iconoPerfil">Ícono de perfil</label>
-            <div class="d-flex">
-              <jhi-swiper style="width: 22.5rem !important" [data]="profileIcons" (onSelectEvent)="selectIcon($event)"></jhi-swiper>
-            </div>
-          </div>
-        </div>
-        <div class="row">
-          <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
-            <fa-icon icon="ban"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
-          </button>
-
-          <button
-            type="submit"
-            id="save-entity"
-            data-cy="entityCreateSaveButton"
-            [disabled]="editForm.invalid || isSaving"
-            class="btn btn-primary"
-          >
-            <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
-          </button>
+        <div>
+          <p>Información general de su usuario, el correo electrónico es su identificador en DataSurvey.</p>
         </div>
       </div>
     </div>
 
-    <div class="row w-75 pb-lg-5 pr-lg-5">
-      <div class="col-lg-4 mr-lg-5">
-        <div class="row">
-          <div class="w-100">
-            <p><b>Contraseña</b></p>
-          </div>
-          <div>
-            <p>Utilice una contraseña segura al realizar el cambio, este dato debe ser secreto ya que provee acceso a su cuenta.</p>
+    <!-- Form -->
+    <form class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
+      <div class="row mb-2">
+        <div class="form-group w-100">
+          <label class="form-control-label" for="field_email">Correo electrónico</label>
+          <input type="text" class="form-control" name="email" id="field_email" data-cy="email" formControlName="email" [readonly]="true" />
+          <div *ngIf="editForm.get('email')!.invalid && (editForm.get('email')!.dirty || editForm.get('email')!.touched)">
+            <small class="form-text text-danger" *ngIf="editForm.get('email')?.errors?.required" jhiTranslate="entity.validation.required">
+              This field is required.
+            </small>
           </div>
         </div>
       </div>
-
-      <!-- Form -->
-      <div class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="passwordForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="passwordForm">
-        <div class="row mb-3 pb-3" style="border-bottom: 1px solid #e7ebf3">
-          <div class="form-group w-100">
-            <label class="form-control-label" for="field_password">Contraseña actual</label>
-            <input
-              type="text"
-              class="form-control"
-              name="password"
-              id="field_password"
-              data-cy="password"
-              formControlName="password"
-              placeholder="Su contraseña actual"
-            />
-            <div
-              *ngIf="
-                passwordForm.get('password')!.invalid && (passwordForm.get('password')!.dirty || passwordForm.get('password')!.touched)
-              "
-            >
-              <small
-                class="form-text text-danger"
-                *ngIf="passwordForm.get('password')?.errors?.required"
-                jhiTranslate="entity.validation.required"
-              >
-                This field is required.
-              </small>
-            </div>
+      <div class="row mb-2">
+        <div class="form-group w-100">
+          <label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.nombre" for="field_nombre">Nombre</label>
+          <input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
+          <div *ngIf="editForm.get('nombre')!.invalid && (editForm.get('nombre')!.dirty || editForm.get('nombre')!.touched)">
+            <small class="form-text text-danger" *ngIf="editForm.get('nombre')?.errors?.required" jhiTranslate="entity.validation.required">
+              This field is required.
+            </small>
           </div>
         </div>
-        <div class="row mb-2">
-          <div class="form-group w-100">
-            <label class="form-control-label" for="field_passwordNew">Contraseña nueva</label>
-            <input
-              type="text"
-              class="form-control"
-              name="passwordNew"
-              id="field_passwordNew"
-              data-cy="passwordNew"
-              formControlName="passwordNew"
-              placeholder="Contraseña nueva"
-            />
-            <div
-              *ngIf="
-                passwordForm.get('passwordNew')!.invalid &&
-                (passwordForm.get('passwordNew')!.dirty || passwordForm.get('passwordNew')!.touched)
-              "
-            >
-              <small
-                class="form-text text-danger"
-                *ngIf="passwordForm.get('passwordNew')?.errors?.required"
-                jhiTranslate="entity.validation.required"
-              >
-                This field is required.
-              </small>
-            </div>
-          </div>
-        </div>
-
-        <div class="row mb-2">
-          <div class="form-group w-100">
-            <label class="form-control-label" for="field_passwordNewConfirm">Confirmar contraseña nueva</label>
-            <input
-              type="text"
-              class="form-control"
-              name="passwordNewConfirm"
-              id="field_passwordNewConfirm"
-              data-cy="passwordNewConfirm"
-              formControlName="passwordNewConfirm"
-              placeholder="Contraseña nueva"
-            />
-            <div
-              *ngIf="
-                passwordForm.get('passwordNewConfirm')!.invalid &&
-                (passwordForm.get('passwordNewConfirm')!.dirty || passwordForm.get('passwordNewConfirm')!.touched)
-              "
-            >
-              <small
-                class="form-text text-danger"
-                *ngIf="passwordForm.get('passwordNewConfirm')?.errors?.required"
-                jhiTranslate="entity.validation.required"
-              >
-                This field is required.
-              </small>
-            </div>
-          </div>
-        </div>
-
-        <div class="row">
-          <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
-            <fa-icon icon="ban"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
-          </button>
-
-          <button
-            type="submit"
-            id="save-entity"
-            data-cy="entityCreateSaveButton"
-            [disabled]="passwordForm.invalid || isSaving"
-            class="btn btn-primary"
+      </div>
+      <div class="row mb-2">
+        <div class="form-group w-100">
+          <label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.fechaNacimiento" for="field_fechaNacimiento"
+            >Fecha de nacimiento</label
           >
-            <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
-          </button>
+          <div class="d-flex">
+            <input
+              id="field_fechaNacimiento"
+              data-cy="fechaNacimiento"
+              type="datetime-local"
+              class="form-control"
+              name="fechaNacimiento"
+              formControlName="fechaNacimiento"
+              placeholder="YYYY-MM-DD HH:mm"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="row mb-4">
+        <div class="form-group w-100">
+          <label for="iconoPerfil">Ícono de perfil</label>
+          <div class="d-flex">
+            <jhi-swiper style="width: 22.5rem !important" [data]="profileIcons" (onSelectEvent)="selectIcon($event)"></jhi-swiper>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <button
+          type="button"
+          id="cancel-save"
+          data-cy="entityCreateCancelButton"
+          class="ds-btn ds-btn--secondary"
+          (click)="previousState()"
+        >
+          <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
+        </button>
+
+        <button
+          type="submit"
+          id="save-entity"
+          data-cy="entityCreateSaveButton"
+          [disabled]="editForm.invalid || isSaving"
+          class="ds-btn ds-btn--primary"
+        >
+          &nbsp;<span jhiTranslate="entity.action.save">Save</span>
+        </button>
+      </div>
+    </form>
+  </div>
+
+  <div class="row w-75 pb-lg-5 pr-lg-5">
+    <div class="col-lg-4 mr-lg-5">
+      <div class="row">
+        <div class="w-100">
+          <p><b>Contraseña</b></p>
+        </div>
+        <div>
+          <p>Utilice una contraseña segura al realizar el cambio, este dato debe ser secreto ya que provee acceso a su cuenta.</p>
         </div>
       </div>
     </div>
+
+    <!-- Form -->
+    <form class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="passwordForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="passwordForm">
+      <div class="row mb-3 pb-3" style="border-bottom: 1px solid #e7ebf3">
+        <div class="form-group w-100">
+          <label class="form-control-label" for="field_password">Contraseña actual</label>
+          <input
+            type="text"
+            class="form-control"
+            name="password"
+            id="field_password"
+            data-cy="password"
+            formControlName="password"
+            placeholder="Su contraseña actual"
+          />
+          <div
+            *ngIf="passwordForm.get('password')!.invalid && (passwordForm.get('password')!.dirty || passwordForm.get('password')!.touched)"
+          >
+            <small
+              class="form-text text-danger"
+              *ngIf="passwordForm.get('password')?.errors?.required"
+              jhiTranslate="entity.validation.required"
+            >
+              This field is required.
+            </small>
+          </div>
+        </div>
+      </div>
+      <div class="row mb-2">
+        <div class="form-group w-100">
+          <label class="form-control-label" for="field_passwordNew">Contraseña nueva</label>
+          <input
+            type="text"
+            class="form-control"
+            name="passwordNew"
+            id="field_passwordNew"
+            data-cy="passwordNew"
+            formControlName="passwordNew"
+            placeholder="Contraseña nueva"
+          />
+          <div
+            *ngIf="
+              passwordForm.get('passwordNew')!.invalid &&
+              (passwordForm.get('passwordNew')!.dirty || passwordForm.get('passwordNew')!.touched)
+            "
+          >
+            <small
+              class="form-text text-danger"
+              *ngIf="passwordForm.get('passwordNew')?.errors?.required"
+              jhiTranslate="entity.validation.required"
+            >
+              This field is required.
+            </small>
+          </div>
+        </div>
+      </div>
+
+      <div class="row mb-4">
+        <div class="form-group w-100">
+          <label class="form-control-label" for="field_passwordNewConfirm">Confirmar contraseña nueva</label>
+          <input
+            type="text"
+            class="form-control"
+            name="passwordNewConfirm"
+            id="field_passwordNewConfirm"
+            data-cy="passwordNewConfirm"
+            formControlName="passwordNewConfirm"
+            placeholder="Contraseña nueva"
+          />
+          <div
+            *ngIf="
+              passwordForm.get('passwordNewConfirm')!.invalid &&
+              (passwordForm.get('passwordNewConfirm')!.dirty || passwordForm.get('passwordNewConfirm')!.touched)
+            "
+          >
+            <small
+              class="form-text text-danger"
+              *ngIf="passwordForm.get('passwordNewConfirm')?.errors?.required"
+              jhiTranslate="entity.validation.required"
+            >
+              This field is required.
+            </small>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <button
+          type="button"
+          id="cancel-save"
+          data-cy="entityCreateCancelButton"
+          class="ds-btn ds-btn--secondary"
+          (click)="previousState()"
+        >
+          <fa-icon icon="ban"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
+        </button>
+
+        <button
+          type="submit"
+          id="save-entity"
+          data-cy="entityCreateSaveButton"
+          [disabled]="passwordForm.invalid || isSaving"
+          class="ds-btn ds-btn--primary"
+        >
+          <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
+        </button>
+      </div>
+    </form>
   </div>
 </div>
diff --git a/src/main/webapp/content/scss/paper-dashboard.scss b/src/main/webapp/content/scss/paper-dashboard.scss
index 1b8d69d..b3fc97f 100644
--- a/src/main/webapp/content/scss/paper-dashboard.scss
+++ b/src/main/webapp/content/scss/paper-dashboard.scss
@@ -35,6 +35,7 @@
 // Core CSS
 @import 'paper-dashboard/nucleo-outline';
 @import 'paper-dashboard/buttons';
+@import 'paper-dashboard/datasurvey-buttons';
 @import 'paper-dashboard/social-buttons';
 @import 'paper-dashboard/animated-buttons';
 @import 'paper-dashboard/inputs';
diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-buttons.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-buttons.scss
new file mode 100644
index 0000000..668aa23
--- /dev/null
+++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-buttons.scss
@@ -0,0 +1,43 @@
+.ds-btn {
+  border-width: $border-thick;
+  font-weight: 400;
+  font-size: 0.9rem;
+  line-height: $line-height;
+  // text-transform: uppercase;
+  border: none;
+  margin: 10px 5px;
+  border-radius: $border-radius-small;
+  padding: $padding-btn-vertical $padding-btn-horizontal;
+  cursor: pointer;
+
+  border-radius: 5px;
+  font-weight: 500;
+  letter-spacing: 0.025rem;
+
+  position: relative;
+  top: 0;
+  transition: all 0.1s ease-in-out;
+}
+
+.ds-btn--primary {
+  background-color: #2962ff;
+  color: #fff;
+
+  &:hover {
+    background-color: #1c44b2;
+    top: -3px;
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;
+  }
+}
+
+.ds-btn--secondary {
+  background-color: transparent;
+  color: #2962ff;
+
+  &:hover {
+    background-color: #f7f9ff;
+    color: #1c44b2;
+    top: -3px;
+    box-shadow: rgba(80, 80, 80, 0.15) 0px 5px 15px;
+  }
+}