From 3f123c28e1fbfba5b8e503e7f2fa3073c334b2b8 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 9 Jan 2021 01:17:04 +0200
Subject: [PATCH] user page country with name

---
 components/u/AvatarWithInfo.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/components/u/AvatarWithInfo.tsx b/components/u/AvatarWithInfo.tsx
index 7095c20d8..c22b80106 100644
--- a/components/u/AvatarWithInfo.tsx
+++ b/components/u/AvatarWithInfo.tsx
@@ -13,7 +13,7 @@ import MyLink from "components/common/MyLink";
 import SubText from "components/common/SubText";
 import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
-import { getEmojiFlag } from "countries-list";
+import { countries, getEmojiFlag } from "countries-list";
 import { getFullUsername } from "lib/strings";
 import { useMyTheme } from "lib/useMyTheme";
 import useUser from "lib/useUser";
@@ -70,12 +70,19 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({
             <Heading fontFamily="'Rubik', sans-serif" size="lg">
               {getFullUsername(user)}
             </Heading>
-            {user.profile?.country && (
-              <Box as="span" ml={2}>
-                {getEmojiFlag(user.profile.country)}
-              </Box>
-            )}
           </Flex>
+          {user.profile?.country && (
+            <Box mx="auto" my={1}>
+              <Box as="span" mr={1}>
+                {getEmojiFlag(user.profile.country)}{" "}
+              </Box>
+              {
+                Object.entries(countries).find(
+                  ([key]) => key === user.profile!.country
+                )![1].name
+              }
+            </Box>
+          )}
           <Flex alignItems="center" justifyContent="center">
             <Flex flexWrap="wrap" alignItems="center" justifyContent="center">
               {user.profile?.twitterName && (