aesthetics

Author: odeimaiz

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

@@ -70,11 +70,16 @@ qx.Class.define("osparc.widget.IntlTelInput", {
 
   statics: {
     updateStyle: function(itiInput, checkIcon) {
+      const textColor = qx.theme.manager.Color.getInstance().resolve("text");
+      const bgColor = qx.theme.manager.Color.getInstance().resolve("input_background");
       itiInput.a.style["width"] = checkIcon && checkIcon.isVisible() ? "185px" : "215px";
       itiInput.a.style["height"] = "26px";
       itiInput.a.style["borderWidth"] = "0px";
-      itiInput.a.style["backgroundColor"] = qx.theme.manager.Color.getInstance().resolve("input_background");
-      itiInput.a.style["color"] = qx.theme.manager.Color.getInstance().resolve("text");
+      itiInput.a.style["backgroundColor"] = bgColor;
+      itiInput.a.style["color"] = textColor;
+
+      document.documentElement.style.setProperty('--country-list-dropdown-bg', bgColor);
+      document.documentElement.style.setProperty('--country-list-dropdown-text', textColor);
     }
   },
 
@@ -124,7 +129,8 @@ qx.Class.define("osparc.widget.IntlTelInput", {
             .then(data => callback(data.country_code))
             .catch(() => callback("ch"));
         },
-        preferredCountries: []
+        preferredCountries: [],
+        dropdownContainer: document.body,
       });
       const themeManager = qx.theme.manager.Meta.getInstance();
       themeManager.addListener("changeTheme", () => this.self().updateStyle(iti));

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

@@ -53,9 +53,15 @@
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
     /* osparc */
-    background-color: #202426;
-    margin: 1px;
+    font-size: 13px;
+    font-family: 'Manrope', sans-serif;
+    margin: 0px;
+    margin-left: -1px;
     border-radius: 4px;
+    border-top-left-radius: 0px;
+    border: 0px;
+    background: var(--country-list-dropdown-bg);
+    color: var(--country-list-dropdown-text);
   }
     .iti__country-list--dropup {
       bottom: 100%;