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
; +import clsx from "clsx"; + +export function Flag({ + countryCode, + tiny = false, +}: { + countryCode: string; + tiny?: boolean; +}) { + return ( +
+ ); } 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() { {data.country ? (
- {data.country.emoji}{" "} + {" "} {data.country.name} 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;