frontend: use 1x1 flags for ch, np and va

Some flags have a square format (1:1 ratio).
BitBoxSwiss · Mar 16, 2023 · ca193b8 · ca193b8
1 parent 6abb5f3
commit ca193b8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/frontends/web/node_vendor/flag-icons/css/flag-icons.css b/frontends/web/node_vendor/flag-icons/css/flag-icons.css
@@ -15,9 +15,11 @@
 .fi:before {
   content: '\00a0';
 }
+/* squareflags should occupy same space as 4x3 flags
 .fi.fis {
   width: 1em;
 }
+*/
 .fi-xx {
   background-image: url(../flags/4x3/xx.svg);
 }

diff --git a/frontends/web/src/routes/buy/components/countryselect.tsx b/frontends/web/src/routes/buy/components/countryselect.tsx
@@ -33,9 +33,15 @@ type TProps = {
 }
 
 const SelectedRegionIcon = ({ regionCode }: { regionCode: string }) => {
-  return <span>
-    {regionCode === '' ? <Globe className={styles.globe} /> : <span className={`fi fi-${regionCode} ${styles.flag}`}></span>}
-  </span>;
+  const squareFlag = ['ch', 'np', 'va'].includes(regionCode) ? 'fis' : '';
+  return (
+    <span>
+      { regionCode === ''
+        ? (<Globe className={styles.globe} />)
+        : (<span className={`fi fi-${regionCode} ${styles.flag} ${squareFlag}`}></span>)
+      }
+    </span>
+  );
 };
 
 const SelectSingleValue: FunctionComponent<SingleValueProps<TOption>> = (props) => {