use twemoji for flags (#831)

app/helpers/application_helper.rb

@@ -36,9 +36,16 @@ module ApplicationHelper
   end
 
   def country_to_emoji(country_code)
-    # Hack to turn country code into the country's flag
-    # https://stackoverflow.com/a/50859942
-    country_code.tr("A-Z", "\u{1F1E6}-\u{1F1FF}")
+    return "" unless country_code.present?
+    c = country_code.upcase.chars.map { |c| (0x1F1E6 + c.ord - "A".ord).to_s(16) }
+    t = c.join("-")
+
+    image_tag(
+      "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/#{t}.svg",
+      alt: "#{country_code} flag",
+      class: "inline-block w-5 h-5 align-middle",
+      loading: "lazy"
+    )
   end
 
   # infer country from timezone

app/views/leaderboards/index.html.erb

@@ -9,7 +9,7 @@
         class: "px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 #{@period_type == :last_7_days ? 'bg-primary text-white' : 'text-muted bg-darkless hover:text-white'}" %>
     </div>
 
-    <% if current_user && !current_user.github_uid.blank? %>
+    <% if current_user && current_user.github_uid.blank? %>
       <div class="bg-darker border border-primary rounded-lg p-4 mb-6">
         <%= link_to "Connect your GitHub", "/auth/github", class: "bg-primary hover:bg-primary/50 text-white font-medium mr-2 px-4 py-2 rounded-lg transition-colors duration-200" %> to qualify for the leaderboard.
       </div>

app/views/shared/_user_mention.html.erb

@@ -28,7 +28,7 @@ end %>">
     <% end %>
   </span>
   <% if user.country_code.present? && (country = ISO3166::Country.new(user.country_code)) %>
-    <span title="<%= country.common_name %>">
+    <span title="<%= country.common_name %>" class="flex items-center">
       <%= country_to_emoji(user.country_code) %>
     </span>
   <% end %>