adjust selector

app/views/devise/shared/_select_server.html.erb

@@ -9,18 +9,20 @@
       <a href="https://docuseal.eu<%= request.fullpath.gsub('docuseal.com', 'docuseal.eu') %>" class="relative btn bg-base-200 join-item w-40 <%= 'bg-base-300' if eu_server %>">
         <%= svg_icon 'eu_flag', class: 'w-5 h-5' %>
         Europe
-        <span id="eu_server_alert" class="absolute flex space-x-1 hidden" style="top: -1.5rem;">
+        <% unless eu_server %>
-          <span class="text-xs font-normal leading-none text-base-content normal-case">
+          <span id="eu_server_alert" class="absolute flex space-x-0.5 hidden" style="top: -1.5rem;">
-            <%= t('eu_data_residency') %>
+            <span class="text-xs font-normal leading-none text-base-content normal-case">
+              <%= t('eu_data_residency') %>
+            </span>
+            <%= svg_icon 'corner_right_down', class: 'w-4 h-5 stroke-1 shrink-0 pt-1' %>
           </span>
-          <%= svg_icon 'corner_right_down', class: 'w-4 h-5 stroke-1 shrink-0 pt-1' %>
+        <% end %>
-        </span>
       </a>
     </div>
   </div>
   <div id="us_server_selector" class="flex justify-center hidden">
     <div class="dropdown">
-      <label tabindex="0" class="relative btn btn-sm btn-outline normal-case border-base-content/20 w-36">
+      <label tabindex="0" class="relative btn btn-sm bg-transparent font-medium normal-case border-base-content/20 justify-start" style="width: 141px; padding: 0 20px">
         <% if eu_server %>
           <%= svg_icon 'eu_flag', class: 'w-5 h-5' %>
           <span>EU Cloud</span>
@@ -28,7 +30,7 @@
           <%= svg_icon 'usa_flag', class: 'w-5 h-5' %>
           <span>US Cloud</span>
         <% end %>
-        <%= svg_icon 'chevron_down', class: 'w-4 h-4 absolute right-1' %>
+        <%= svg_icon 'chevron_down', class: 'mr-1 w-4 h-4 absolute right-1' %>
       </label>
       <ul tabindex="0" class="dropdown-content z-[1] menu border border-base-content/20 mt-1 bg-base-100 rounded-box w-36">
         <li>

app/views/scripts/_server_selector.html.erb

@@ -1,21 +1,22 @@
 <script>
-  customElements.define('server-selector', class extends HTMLElement {
+  if (!window.customElements.get('server-selector')) {
-    connectedCallback() {
+    customElements.define('server-selector', class extends HTMLElement {
-      const usServerSelector = this.querySelector('#us_server_selector');
+      connectedCallback() {
-      const globalServerSelector = this.querySelector('#global_server_selector');
+        const usServerSelector = this.querySelector('#us_server_selector');
-      const euServerAlert = this.querySelector('#eu_server_alert');
+        const globalServerSelector = this.querySelector('#global_server_selector');
-      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+        const euServerAlert = this.querySelector('#eu_server_alert');
-      const usTimezones = /^(?:America\/(?:New_York|Detroit|Kentucky\/(?:Louisville|Monticello)|Indiana\/(?:Indianapolis|Vincennes|Winamac|Marengo|Petersburg|Vevay|Tell_City|Knox)|Chicago|Menominee|North_Dakota\/(?:Center|New_Salem|Beulah)|Denver|Boise|Phoenix|Los_Angeles|Anchorage|Juneau|Sitka|Metlakatla|Yakutat|Nome|Adak)|Pacific\/Honolulu)$/;
+        const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-      const euTimezones = /^Europe\/(?:Vienna|Brussels|Sofia|Zagreb|Nicosia|Prague|Copenhagen|Tallinn|Helsinki|Paris|Berlin|Athens|Budapest|Dublin|Rome|Riga|Vilnius|Luxembourg|Valletta|Amsterdam|Warsaw|Lisbon|Bratislava|Ljubljana|Madrid|Stockholm|Bucharest)$/;
+        const usTimezones = /^(?:America\/(?:New_York|Detroit|Kentucky|Indiana|Chicago|Menominee|North_Dakota|Denver|Boise|Phoenix|Los_Angeles|Anchorage|Juneau|Sitka|Metlakatla|Yakutat|Nome|Adak)|Pacific\/Honolulu)/;
 
-      if (usTimezones.test(timezone)) {
+        if (usTimezones.test(timezone)) {
-        usServerSelector.classList.remove('hidden');
+          usServerSelector.classList.remove('hidden');
-      } else if (euTimezones.test(timezone)) {
+        } else if (timezone.includes('Europe')) {
-        globalServerSelector.classList.remove('hidden');
+          globalServerSelector.classList.remove('hidden');
-        euServerAlert.classList.remove('hidden');
+          euServerAlert.classList.remove('hidden');
-      } else {
+        } else {
-        globalServerSelector.classList.remove('hidden');
+          globalServerSelector.classList.remove('hidden');
+        }
       }
-    }
+    });
-  });
+  }
 </script>