From eed5c0646f9a3c6d092edc9173e2c2eb7d52c80e Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 27 Dec 2022 22:28:28 +0200
Subject: [PATCH] User page: Use image for flag

---
 app/components/Flag.tsx            | 18 ++++++++++++++++--
 app/routes/u.$identifier.tsx       |  1 -
 app/routes/u.$identifier/index.tsx |  3 ++-
 app/styles/u.css                   |  6 +-----
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/app/components/Flag.tsx b/app/components/Flag.tsx
index 1c6026eae..ad98901a2 100644
--- a/app/components/Flag.tsx
+++ b/app/components/Flag.tsx
@@ -1,3 +1,17 @@
-export function Flag({ countryCode }: { countryCode: string }) {
-  return <div className={`twf twf-${countryCode.toLowerCase()}`} />;
+import clsx from "clsx";
+
+export function Flag({
+  countryCode,
+  tiny = false,
+}: {
+  countryCode: string;
+  tiny?: boolean;
+}) {
+  return (
+    <div
+      className={clsx(`twf twf-${countryCode.toLowerCase()}`, {
+        "twf-s": tiny,
+      })}
+    />
+  );
 }
diff --git a/app/routes/u.$identifier.tsx b/app/routes/u.$identifier.tsx
index 3ccd39ebd..cbe0e6176 100644
--- a/app/routes/u.$identifier.tsx
+++ b/app/routes/u.$identifier.tsx
@@ -93,7 +93,6 @@ export const loader = async ({ request, params }: LoaderArgs) => {
     country:
       countryObj && user.country
         ? {
-            emoji: countryObj.emoji,
             code: user.country,
             name:
               translatedCountry({
diff --git a/app/routes/u.$identifier/index.tsx b/app/routes/u.$identifier/index.tsx
index b1618e580..bd6b9b1c9 100644
--- a/app/routes/u.$identifier/index.tsx
+++ b/app/routes/u.$identifier/index.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import invariant from "tiny-invariant";
 import { Avatar } from "~/components/Avatar";
 import { Badge } from "~/components/Badge";
+import { Flag } from "~/components/Flag";
 import { TwitchIcon } from "~/components/icons/Twitch";
 import { TwitterIcon } from "~/components/icons/Twitter";
 import { YouTubeIcon } from "~/components/icons/YouTube";
@@ -37,7 +38,7 @@ export default function UserInfoPage() {
         </h2>
         {data.country ? (
           <div className="u__country">
-            <span className="u__country-emoji">{data.country.emoji}</span>{" "}
+            <Flag countryCode={data.country.code} tiny />{" "}
             <span className="u__country-name" data-testid="country">
               {data.country.name}
             </span>
diff --git a/app/styles/u.css b/app/styles/u.css
index 1bca4f715..d90d0ea9b 100644
--- a/app/styles/u.css
+++ b/app/styles/u.css
@@ -27,7 +27,7 @@
 .u__country {
   display: flex;
   align-items: center;
-  gap: var(--s-1);
+  gap: var(--s-1-5);
   grid-area: country;
   line-height: 0.75;
 }
@@ -37,10 +37,6 @@
   font-weight: var(--bold);
 }
 
-.u__country-emoji {
-  font-size: var(--fonts-lg);
-}
-
 .u__socials {
   display: flex;
   justify-content: center;