Add custom data survey buttons

src/main/webapp/app/account/settings/settings.component.html

@@ -167,7 +167,6 @@
 -------------------------------------------------------------------------------
 -->
 
-<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">
@@ -182,25 +181,13 @@
     </div>
 
     <!-- Form -->
-      <div class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
+    <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
+          <input type="text" class="form-control" name="email" id="field_email" data-cy="email" formControlName="email" [readonly]="true" />
-              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
+            <small class="form-text text-danger" *ngIf="editForm.get('email')?.errors?.required" jhiTranslate="entity.validation.required">
-                class="form-text text-danger"
-                *ngIf="editForm.get('email')?.errors?.required"
-                jhiTranslate="entity.validation.required"
-              >
               This field is required.
             </small>
           </div>
@@ -211,11 +198,7 @@
           <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
+            <small class="form-text text-danger" *ngIf="editForm.get('nombre')?.errors?.required" jhiTranslate="entity.validation.required">
-                class="form-text text-danger"
-                *ngIf="editForm.get('nombre')?.errors?.required"
-                jhiTranslate="entity.validation.required"
-              >
               This field is required.
             </small>
           </div>
@@ -239,7 +222,7 @@
           </div>
         </div>
       </div>
-        <div class="row mb-2">
+      <div class="row mb-4">
         <div class="form-group w-100">
           <label for="iconoPerfil">Ícono de perfil</label>
           <div class="d-flex">
@@ -248,8 +231,14 @@
         </div>
       </div>
       <div class="row">
-          <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
+        <button
-            <fa-icon icon="ban"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
+          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
@@ -257,12 +246,12 @@
           id="save-entity"
           data-cy="entityCreateSaveButton"
           [disabled]="editForm.invalid || isSaving"
-            class="btn btn-primary"
+          class="ds-btn ds-btn--primary"
         >
-            <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
+          &nbsp;<span jhiTranslate="entity.action.save">Save</span>
         </button>
       </div>
-      </div>
+    </form>
   </div>
 
   <div class="row w-75 pb-lg-5 pr-lg-5">
@@ -278,7 +267,7 @@
     </div>
 
     <!-- Form -->
-      <div class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="passwordForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="passwordForm">
+    <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>
@@ -292,9 +281,7 @@
             placeholder="Su contraseña actual"
           />
           <div
-              *ngIf="
+            *ngIf="passwordForm.get('password')!.invalid && (passwordForm.get('password')!.dirty || passwordForm.get('password')!.touched)"
-                passwordForm.get('password')!.invalid && (passwordForm.get('password')!.dirty || passwordForm.get('password')!.touched)
-              "
           >
             <small
               class="form-text text-danger"
@@ -335,7 +322,7 @@
         </div>
       </div>
 
-        <div class="row mb-2">
+      <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
@@ -365,7 +352,13 @@
       </div>
 
       <div class="row">
-          <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
+        <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>
 
@@ -374,12 +367,11 @@
           id="save-entity"
           data-cy="entityCreateSaveButton"
           [disabled]="passwordForm.invalid || isSaving"
-            class="btn btn-primary"
+          class="ds-btn ds-btn--primary"
         >
           <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
         </button>
       </div>
-      </div>
+    </form>
-    </div>
   </div>
 </div>

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';

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;
+  }
+}