more aesthetics

Author: odeimaiz

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

@@ -167,24 +167,24 @@ 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 height = isCompact ? 23 : 25;
+      const height = isCompact ? 24 : 25;
 
+      phoneNumber.set({
+        minWidth: 185,
+        maxHeight: height,
+        margin: 0,
+        marginTop: 2,
+      });
       if (isCompact) {
         phoneNumber.set({
-          margin: 0,
           marginLeft: -1,
         });
       } else {
         phoneNumber.set({
-          marginTop: 2,
           marginLeft: 2,
           marginRight: 2,
         })
       }
-      phoneNumber.set({
-        minWidth: 185,
-        maxHeight: height,
-      });
 
       if (itiInput) {
         itiInput.a.style["width"] = feedbackIcon.isVisible() ? "185px" : "215px";

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

@@ -942,3 +942,14 @@
 
 .iti__flag.iti__np {
   background-color: transparent; }
+
+.iti input {
+  border: none !important;
+  border-bottom: 1px solid var(--q-color-border, green) !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.iti input:focus {
+  border-bottom: 1px solid var(--q-color-focus, red) !important;
+}