From bda6395d9d96843291dc699229c98cdd4d1103b5 Mon Sep 17 00:00:00 2001
From: Pablo Bonilla <pbonilla29@hotmail.com>
Date: Fri, 9 Jul 2021 00:19:21 -0600
Subject: [PATCH] Add custom data survey form styles

---
 .../account/settings/settings.component.html  | 32 ++++++++++---
 .../webapp/content/scss/paper-dashboard.scss  |  6 ++-
 .../paper-dashboard/_datasurvey-form.scss     | 46 +++++++++++++++++++
 .../paper-dashboard/_datasurvey-global.scss   | 12 +++++
 4 files changed, 88 insertions(+), 8 deletions(-)
 create mode 100644 src/main/webapp/content/scss/paper-dashboard/_datasurvey-form.scss
 create mode 100644 src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss

diff --git a/src/main/webapp/app/account/settings/settings.component.html b/src/main/webapp/app/account/settings/settings.component.html
index 483e48b..68d5f1a 100644
--- a/src/main/webapp/app/account/settings/settings.component.html
+++ b/src/main/webapp/app/account/settings/settings.component.html
@@ -172,16 +172,24 @@
     <div class="col-lg-4 mr-lg-5">
       <div class="row">
         <div class="w-100">
-          <p><b>Perfil</b></p>
+          <p class="ds-title">Perfil</p>
         </div>
         <div>
-          <p>Información general de su usuario, el correo electrónico es su identificador en DataSurvey.</p>
+          <p class="ds-subtitle">Información general de su usuario, el correo electrónico es su identificador en DataSurvey.</p>
         </div>
       </div>
     </div>
 
     <!-- Form -->
-    <form class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
+    <form
+      autocomplete="off"
+      class="ds-form 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>
@@ -258,16 +266,26 @@
     <div class="col-lg-4 mr-lg-5">
       <div class="row">
         <div class="w-100">
-          <p><b>Contraseña</b></p>
+          <p class="ds-title">Contraseña</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>
+          <p class="ds-subtitle">
+            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">
+    <form
+      autocomplete="off"
+      class="ds-form 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>
@@ -359,7 +377,7 @@
           class="ds-btn ds-btn--secondary"
           (click)="previousState()"
         >
-          <fa-icon icon="ban"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
+          <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
         </button>
 
         <button
diff --git a/src/main/webapp/content/scss/paper-dashboard.scss b/src/main/webapp/content/scss/paper-dashboard.scss
index b3fc97f..4b59f86 100644
--- a/src/main/webapp/content/scss/paper-dashboard.scss
+++ b/src/main/webapp/content/scss/paper-dashboard.scss
@@ -35,7 +35,6 @@
 // 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';
@@ -90,3 +89,8 @@
 
 @import 'paper-dashboard/responsive';
 @import 'paper-dashboard/media-queries';
+
+// Data Survey
+@import 'paper-dashboard/datasurvey-buttons';
+@import 'paper-dashboard/datasurvey-form';
+@import 'paper-dashboard/datasurvey-global';
diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-form.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-form.scss
new file mode 100644
index 0000000..058ef24
--- /dev/null
+++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-form.scss
@@ -0,0 +1,46 @@
+// Form variables
+$form-background: #f1f5f9;
+
+.ds-form {
+  .form-group label {
+    transition: all 0.3s ease-in-out;
+  }
+
+  .form-group:focus-within {
+    label,
+    input {
+      color: #313747;
+    }
+  }
+
+  input {
+    background-color: $form-background;
+    border-radius: 15px;
+    border: 1.75px solid transparent;
+    outline: 0;
+    padding: 1rem !important;
+    color: #757d94;
+
+    &:focus,
+    &:active {
+      background-color: $form-background;
+      border: 1.75px solid #2962ff;
+      // color: #313747;
+    }
+
+    &:read-only {
+      background-color: $form-background;
+      cursor: default;
+
+      &:focus,
+      &:active {
+        border: 1.75px solid transparent;
+        color: #757d94;
+      }
+    }
+  }
+
+  label {
+    color: #757d94;
+  }
+}
diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss
new file mode 100644
index 0000000..109cc9c
--- /dev/null
+++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss
@@ -0,0 +1,12 @@
+.ds-title {
+  color: #313747;
+  font-weight: 900;
+  letter-spacing: 0.025rem;
+  text-transform: uppercase;
+  font-size: 1.2rem;
+}
+
+.ds-subtitle {
+  color: #757d94;
+  font-size: 0.9rem;
+}