aesthetics

Author: odeimaiz

services/static-webserver/client/source/class/osparc/ui/form/IntlTelInput.js

@@ -167,6 +167,7 @@ qx.Class.define("osparc.ui.form.IntlTelInput", {
 
       const textColor = qx.theme.manager.Color.getInstance().resolve("text");
       const bgColor = qx.theme.manager.Color.getInstance().resolve("input_background");
+      const productColor = qx.theme.manager.Color.getInstance().resolve("product-color");
       const height = isCompact ? 24 : 25;
 
       phoneNumber.set({
@@ -196,6 +197,7 @@ qx.Class.define("osparc.ui.form.IntlTelInput", {
 
       document.documentElement.style.setProperty('--country-list-dropdown-bg', bgColor);
       document.documentElement.style.setProperty('--country-list-dropdown-text', textColor);
+      document.documentElement.style.setProperty('--border-bottom-color-focused', productColor);
     },
 
     __convertInputToPhoneInput: function() {

services/static-webserver/client/source/resource/intl-tel-input/css/intlTelInput.css

@@ -943,13 +943,18 @@
 .iti__flag.iti__np {
   background-color: transparent; }
 
+/* osparc */
 .iti input {
   border: none !important;
-  border-bottom: 1px solid var(--q-color-border, green) !important;
+  border-bottom: 1px solid var(--border-bottom-color, rgb(9, 89, 122)) !important;
   outline: none !important;
   box-shadow: none !important;
 }
 
 .iti input:focus {
-  border-bottom: 1px solid var(--q-color-focus, red) !important;
+  border-bottom: 1px solid var(--border-bottom-color-focused) !important;
+}
+
+.iti input:invalid {
+  border-bottom: 1px solid red !important;
 }