shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): use country-flag-icons instead of country-flag-emoji for RegionSelector (#1011)

Browse Source
This commit is contained in:
TheCatLady
2021-02-27 20:42:09 -05:00
committed by GitHub
parent 9ce88abcc8
commit abcd7c9975
3 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/RegionSelector/index.tsx
View File

@@ -1,10 +1,11 @@
import React, { useEffect, useMemo, useState } from 'react';
import { Listbox, Transition } from '@headlessui/react';
import { countryCodeEmoji } from 'country-code-emoji';
import useSWR from 'swr';
import type { Region } from '../../../server/lib/settings';
import { defineMessages, useIntl } from 'react-intl';
import useSettings from '../../hooks/useSettings';
import { hasFlag } from 'country-flag-icons';
import 'country-flag-icons/3x2/flags.css';
const messages = defineMessages({
regionDefault: 'All Regions',
@@ -64,11 +65,15 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
<div className="relative">
<span className="inline-block w-full rounded-md shadow-sm">
<Listbox.Button className="relative flex items-center w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
{selectedRegion && selectedRegion.iso_3166_1 !== 'all' && (
<span className="h-4 mr-2 overflow-hidden text-lg leading-4">
{countryCodeEmoji(selectedRegion.iso_3166_1)}
</span>
)}
{selectedRegion &&
selectedRegion.iso_3166_1 !== 'all' &&
hasFlag(selectedRegion?.iso_3166_1) && (
<span className="h-4 mr-2 overflow-hidden text-base leading-4">
<span
className={`flag:${selectedRegion?.iso_3166_1}`}
/>
</span>
)}
<span className="block truncate">
{selectedRegion && selectedRegion.iso_3166_1 !== 'all'
? intl.formatDisplayName(selectedRegion.iso_3166_1, {
@@ -180,7 +185,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
<span
className={`${
selected ? 'font-semibold' : 'font-normal'
} block truncate`}
} block truncate pl-8`}
>
{intl.formatMessage(messages.regionDefault)}
</span>
@@ -217,8 +222,14 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
: 'text-gray-300'
} cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
>
<span className="mr-2 text-lg">
{countryCodeEmoji(region.iso_3166_1)}
<span className="mr-2 text-base">
<span
className={
hasFlag(region.iso_3166_1)
? `flag:${region.iso_3166_1}`
: 'pr-6'
}
/>
</span>
<span
className={`${