Find a way around icon - text misalignment issue in codex buttons (#837)

chukarave · guergana · web-flow · commit 9da2f8b7406d · 2024-01-22T15:39:34.000+01:00
* make text in all icon buttons its own span and style that

* remove padding as it worsens the issue on chrome

* Add explicit alignment to the icon as well

Co-authored-by: Guergana Tzatchkova &lt;guergana.tzatchkova@wikimedia.de&gt;

---------

Co-authored-by: Guergana Tzatchkova &lt;guergana.tzatchkova@wikimedia.de&gt;
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
@@ -11,7 +11,7 @@
                     @click="faqDialog = true"
                 >
                     <cdx-icon :icon="cdxIconInfo" />
-                    {{ $i18n('faq-button') }}
+                    <span class="text-with-icon-button">{{ $i18n('faq-button') }}</span>
                 </cdx-button>
             </header>
             <cdx-dialog id="faq-dialog"
@@ -74,7 +74,7 @@
                     :disabled="loading"
                 >
                     <cdx-icon :icon="cdxIconDie" />
-                    {{ $i18n('random-mismatches') }}
+                    <span class="text-with-icon-button">{{ $i18n('random-mismatches') }}</span>
                 </cdx-button>
             </div>
             <form id="items-form" @submit.prevent="send">
diff --git a/resources/js/Pages/Layout.vue b/resources/js/Pages/Layout.vue
@@ -10,7 +10,7 @@
                     <LanguageSelectorButton :aria-label="$i18n('toggle-language-selector-button')"
                         @click="onToggleLanguageSelector">
                         <cdx-icon :icon="cdxIconLanguage" />
-                        {{ currentLanguageAutonym }}
+                        <span class="text-with-icon-button">{{ currentLanguageAutonym }}</span>
                     </LanguageSelectorButton>
                     <LanguageSelector v-show="showLanguageSelector" ref="languageSelector"
                         @close="onCloseLanguageSelector" @select="onChangeLanguage">
diff --git a/resources/js/Pages/Results.vue b/resources/js/Pages/Results.vue
@@ -4,7 +4,7 @@
         <inertia-head title="Mismatch Finder - Results" />
         <cdx-button class="back-button" @click="() => $inertia.get('/', {})">
             <cdx-icon :icon="cdxIconArrowPrevious" />
-            {{ $i18n('results-back-button') }}
+            <span class="text-with-icon-button">{{ $i18n('results-back-button') }}</span>
         </cdx-button>
         <section id="description-section">
             <header class="description-header">
@@ -16,7 +16,7 @@
                     @click="instructionsDialog = true"
                 >
                     <cdx-icon :icon="cdxIconInfo" />
-                    {{$i18n('results-instructions-button')}}
+                    <span class="text-with-icon-button">{{$i18n('results-instructions-button')}}</span>
                 </cdx-button>
             </header>
 
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
@@ -348,6 +348,14 @@ dl.import-meta .download-csv {
 // is marked as resolved.
 .cdx-button {
     @include ui-text-M($font-weight-bold);
+
+    .text-with-icon-button {
+        vertical-align: text-top;
+        padding-left: 5px;
+    .cdx-icon {
+        vertical-align: text-top;
+    }
+  }
 }
 
 .svg {
