adjust button style

app/javascript/template_builder/i18n.js

@@ -673,7 +673,7 @@ const it = {
   no_revisions_yet: 'Nessuna revisione ancora',
   viewing_revision_from: 'Visualizzazione revisione del {date}',
   connect_google_drive: 'Connetti Google Drive',
-  submitting: 'Invio in corso'
+  submitting: 'Invio'
 }
 
 const pt = {
@@ -1125,7 +1125,7 @@ const fr = {
   no_revisions_yet: 'Aucune révision pour le moment',
   viewing_revision_from: 'Affichage de la révision du {date}',
   connect_google_drive: 'Connecter Google Drive',
-  submitting: 'Soumission en cours'
+  submitting: 'Soumission'
 }
 
 const de = {
@@ -1351,7 +1351,7 @@ const de = {
   no_revisions_yet: 'Noch keine Revisionen',
   viewing_revision_from: 'Ansicht der Revision vom {date}',
   connect_google_drive: 'Google Drive verbinden',
-  submitting: 'Wird eingereicht'
+  submitting: 'Übermittlung'
 }
 
 const nl = {

app/javascript/template_builder/replace.vue

@@ -2,42 +2,42 @@
   <div class="inline-flex items-stretch replace-document-control">
     <label
       :for="inputId"
-      class="btn btn-neutral btn-xs text-white transition-none replace-document-button"
+      class="btn btn-neutral btn-xs transition-none replace-document-button"
-      :class="[{ 'opacity-100': isLoading }, showGoogleDriveDropdown ? 'rounded-r-none pr-1.5' : '']"
+      :class="{ 'opacity-100': isLoading, 'pr-0': showGoogleDriveDropdown && !isLoading }"
     >
-      {{ message }}
+      <div class="flex items-center justify-between w-full h-full">
-    </label>
+        <span class="flex items-center space-x-2 w-full justify-center text-white">
-    <span
+          {{ message }}
-      v-if="showGoogleDriveDropdown"
+        </span>
-      class="dropdown dropdown-end"
+        <span
-      @click.stop
+          v-if="showGoogleDriveDropdown && !isLoading"
-    >
+          class="dropdown dropdown-end inline h-full"
-      <label
+          style="width: 30px"
-        tabindex="0"
+        >
-        class="btn btn-neutral btn-xs text-white rounded-l-none border-l border-white/30 px-1 transition-none cursor-pointer flex items-center"
+          <label
-      >
+            tabindex="0"
-        <IconChevronDown
+            class="flex items-center h-full cursor-pointer text-white"
-          width="12"
-          stroke-width="2.5"
-        />
-      </label>
-      <ul
-        tabindex="0"
-        :style="{  minWidth: '130px', backgroundColor: backgroundColor }"
-        class="mt-1.5 dropdown-content p-1 shadow-lg rounded-lg border border-neutral-200 z-50 bg-white"
-      >
-        <li>
-          <button
-            type="button"
-            class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
-            @click.prevent="openGoogleDriveModal"
           >
-            <IconBrandGoogleDrive class="w-4 h-4 flex-shrink-0" />
+            <IconChevronDown class="w-4 h-4 flex-shrink-0" />
-            <span>Google Drive</span>
+          </label>
-          </button>
+          <ul
-        </li>
+            tabindex="0"
-      </ul>
+            :style="{ backgroundColor }"
-    </span>
+            class="dropdown-content p-2 mt-2 shadow menu text-base mb-1 rounded-box text-right !text-base-content"
+          >
+            <li>
+              <button
+                type="button"
+                @click.prevent="openGoogleDriveModal"
+              >
+                <IconBrandGoogleDrive class="w-4 h-4 flex-shrink-0" />
+                <span class="whitespace-nowrap text-sm normal-case font-medium">Google Drive</span>
+              </button>
+            </li>
+          </ul>
+        </span>
+      </div>
+    </label>
     <form
       ref="form"
       class="hidden"