Merge pull request #3061 from codecrafters-io/feat/language-dropdown-enhance-button-layout-2

feat(language-dropdown): enhance button layout and logo display

Author: rohitpaulk

app/components/language-dropdown-link.hbs

@@ -11,12 +11,12 @@
   </div>
   <div>
     {{#if @isSelected}}
-      {{svg-jar "check-circle" class="w-4 fill-current text-teal-500"}}
+      {{svg-jar "check-circle" class="w-5 fill-current text-teal-500"}}
     {{else if (and @isRequested (not @isSelected))}}
-      {{svg-jar "exclamation" class="w-4 fill-current text-yellow-500"}}
+      {{svg-jar "exclamation" class="w-5 fill-current text-yellow-500"}}
     {{else}}
-      <img src={{@language.grayLogoUrl}} alt={{@language.name}} class="w-4 h-4 block group-hover:hidden" />
-      <img src={{@language.tealLogoUrl}} alt={{@language.name}} class="w-4 h-4 hidden group-hover:block" />
+      <img src={{@language.grayLogoUrl}} alt={{@language.name}} class="w-5 h-5 opacity-50 block group-hover:hidden" />
+      <img src={{@language.tealLogoUrl}} alt={{@language.name}} class="w-5 h-5 hidden group-hover:block" />
     {{/if}}
   </div>
 </div>

app/components/language-dropdown.hbs

@@ -3,12 +3,19 @@
     <dd.Trigger>
       <button
         type="button"
-        class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-white/10
+        class="group inline-flex justify-center items-center w-full gap-x-1 rounded-md border border-gray-300 dark:border-white/10
           {{if dd.isOpen 'bg-gray-50 dark:bg-gray-800' 'bg-white dark:bg-gray-900'}}
-          shadow-xs px-4 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-hidden"
+          shadow-xs py-2
+          {{if @selectedLanguage 'pl-2 pr-3' 'px-3'}}
+          text-sm font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-hidden"
         data-test-language-dropdown-trigger
       >
-        <span class="mr-1" data-test-current-language-name>
+        {{#if @selectedLanguage}}
+          <img src={{@selectedLanguage.grayLogoUrl}} alt={{@selectedLanguage.name}} class="w-6 h-6 block group-hover:hidden mr-0.5" />
+          <img src={{@selectedLanguage.tealLogoUrl}} alt={{@selectedLanguage.name}} class="w-6 h-6 hidden group-hover:block mr-0.5" />
+        {{/if}}
+
+        <span data-test-current-language-name>
           {{#if this.isAllLanguagesOptionSelected}}
             All Languages
           {{else}}