Improves flag icons

Author: samejr

apps/webapp/app/assets/icons/RegionIcons.tsx

@@ -17,96 +17,48 @@ export function FlagIcon({
 
 export function FlagUSA({ className }: { className?: string }) {
   return (
-    <svg
-      className={className}
-      width="96"
-      height="72"
-      viewBox="0 0 96 72"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_566_17653)">
-        <g clipPath="url(#clip1_566_17653)">
-          <rect width="95.9062" height="71.9297" transform="translate(0 0.00311279)" fill="white" />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M0 0.00311279H95.9062V71.9328H0V0.00311279Z"
-            fill="#F7FCFF"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M0 43.9601V49.9543H95.9062V43.9601H0Z"
-            fill="#E31D1C"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M0 54.9494V60.9436H95.9062V54.9494H0Z"
-            fill="#E31D1C"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M0 21.9817V27.9758H95.9062V21.9817H0Z"
-            fill="#E31D1C"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M0 65.9387V71.9328H95.9062V65.9387H0Z"
-            fill="#E31D1C"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M0 32.9709V38.965H95.9062V32.9709H0Z"
-            fill="#E31D1C"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M0 0.00311279V5.99725H95.9062V0.00311279H0Z"
-            fill="#E31D1C"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M0 10.9923V16.9865H95.9062V10.9923H0Z"
-            fill="#E31D1C"
-          />
-          <rect y="0.00311279" width="59.9414" height="38.9619" fill="#2E42A5" />
-          <path
-            d="M6.15027 29.8778H8.30261L6.61218 31.5985L7.26648 34.3124L5.16101 32.787L2.98523 34.3124L3.72058 31.5985L1.78796 29.8778H4.3114L5.15808 27.663L6.15027 29.8778ZM18.1385 29.8778H20.2909L18.6005 31.5985L19.2548 34.3124L17.1493 32.787L14.9735 34.3124L15.7089 31.5985L13.7762 29.8778H16.2997L17.1464 27.663L18.1385 29.8778ZM30.1268 29.8778H32.2792L30.5887 31.5985L31.243 34.3124L29.1376 32.787L26.9618 34.3124L27.6971 31.5985L25.7645 29.8778H28.288L29.1346 27.663L30.1268 29.8778ZM42.1151 29.8778H44.2675L42.577 31.5985L43.2313 34.3124L41.1259 32.787L38.9501 34.3124L39.6854 31.5985L37.7528 29.8778H40.2762L41.1229 27.663L42.1151 29.8778ZM54.1034 29.8778H56.2557L54.5653 31.5985L55.2196 34.3124L53.1141 32.787L50.9384 34.3124L51.6737 31.5985L49.7411 29.8778H52.2645L53.1112 27.663L54.1034 29.8778ZM12.1444 23.8837H14.2968L12.6063 25.6044L13.2606 28.3183L11.1552 26.7929L8.97937 28.3183L9.71472 25.6044L7.7821 23.8837H10.3055L11.1522 21.6689L12.1444 23.8837ZM24.1327 23.8837H26.285L24.5946 25.6044L25.2489 28.3183L23.1434 26.7929L20.9677 28.3183L21.703 25.6044L19.7704 23.8837H22.2938L23.1405 21.6689L24.1327 23.8837ZM36.121 23.8837H38.2733L36.5829 25.6044L37.2372 28.3183L35.1317 26.7929L32.9559 28.3183L33.6913 25.6044L31.7587 23.8837H34.2821L35.1288 21.6689L36.121 23.8837ZM48.1093 23.8837H50.2616L48.5712 25.6044L49.2255 28.3183L47.12 26.7929L44.9442 28.3183L45.6796 25.6044L43.7469 23.8837H46.2704L47.1171 21.6689L48.1093 23.8837ZM6.15027 17.8896H8.30261L6.61218 19.6103L7.26648 22.3241L5.16101 20.7987L2.98523 22.3241L3.72058 19.6103L1.78796 17.8896H4.3114L5.15808 15.6747L6.15027 17.8896ZM18.1385 17.8896H20.2909L18.6005 19.6103L19.2548 22.3241L17.1493 20.7987L14.9735 22.3241L15.7089 19.6103L13.7762 17.8896H16.2997L17.1464 15.6747L18.1385 17.8896ZM30.1268 17.8896H32.2792L30.5887 19.6103L31.243 22.3241L29.1376 20.7987L26.9618 22.3241L27.6971 19.6103L25.7645 17.8896H28.288L29.1346 15.6747L30.1268 17.8896ZM42.1151 17.8896H44.2675L42.577 19.6103L43.2313 22.3241L41.1259 20.7987L38.9501 22.3241L39.6854 19.6103L37.7528 17.8896H40.2762L41.1229 15.6747L42.1151 17.8896ZM54.1034 17.8896H56.2557L54.5653 19.6103L55.2196 22.3241L53.1141 20.7987L50.9384 22.3241L51.6737 19.6103L49.7411 17.8896H52.2645L53.1112 15.6747L54.1034 17.8896ZM12.1444 11.8954H14.2968L12.6063 13.6161L13.2606 16.33L11.1552 14.8046L8.97937 16.33L9.71472 13.6161L7.7821 11.8954H10.3055L11.1522 9.68057L12.1444 11.8954ZM24.1327 11.8954H26.285L24.5946 13.6161L25.2489 16.33L23.1434 14.8046L20.9677 16.33L21.703 13.6161L19.7704 11.8954H22.2938L23.1405 9.68057L24.1327 11.8954ZM36.121 11.8954H38.2733L36.5829 13.6161L37.2372 16.33L35.1317 14.8046L32.9559 16.33L33.6913 13.6161L31.7587 11.8954H34.2821L35.1288 9.68057L36.121 11.8954ZM48.1093 11.8954H50.2616L48.5712 13.6161L49.2255 16.33L47.12 14.8046L44.9442 16.33L45.6796 13.6161L43.7469 11.8954H46.2704L47.1171 9.68057L48.1093 11.8954ZM6.15125 5.90128H8.30261L6.61218 7.62198L7.26648 10.3358L5.16101 8.81046L2.98621 10.3358L3.72058 7.62198L1.78796 5.90128H4.3114L5.15808 3.68643L6.15125 5.90128ZM18.1385 5.90128H20.2909L18.6005 7.62198L19.2548 10.3358L17.1493 8.81046L14.9735 10.3358L15.7089 7.62198L13.7762 5.90128H16.2997L17.1464 3.68643L18.1385 5.90128ZM30.1268 5.90128H32.2792L30.5887 7.62198L31.243 10.3358L29.1376 8.81046L26.9618 10.3358L27.6971 7.62198L25.7645 5.90128H28.288L29.1346 3.68643L30.1268 5.90128ZM42.1151 5.90128H44.2675L42.577 7.62198L43.2313 10.3358L41.1259 8.81046L38.9501 10.3358L39.6854 7.62198L37.7528 5.90128H40.2762L41.1229 3.68643L42.1151 5.90128ZM54.1034 5.90128H56.2557L54.5653 7.62198L55.2196 10.3358L53.1141 8.81046L50.9384 10.3358L51.6737 7.62198L49.7411 5.90128H52.2645L53.1112 3.68643L54.1034 5.90128Z"
-            fill="#F7FCFF"
-          />
-        </g>
-        <rect
-          y="0.00311279"
-          width="95.9062"
-          height="71.9297"
-          fill="url(#paint0_linear_566_17653)"
-          style={{ mixBlendMode: "overlay" }}
+    <svg className={className} viewBox="0 0 96 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_18908_83688)">
+        <rect x="0.09375" width="95.9062" height="71.9297" rx="5.99414" fill="white" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.09375 0V8.0065H96.0937V0H0.09375Z"
+          fill="#E31D1C"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.09375 16.0131V24.0196H96.0937V16.0131H0.09375Z"
+          fill="#E31D1C"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.09375 31.9791V39.9856H96.0937V31.9791H0.09375Z"
+          fill="#E31D1C"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.09375 47.9921V55.9986H96.0937V47.9921H0.09375Z"
+          fill="#E31D1C"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0.09375 63.9584V71.9649H96.0937V63.9584H0.09375Z"
+          fill="#E31D1C"
+        />
+        <rect x="0.09375" width="60" height="40" fill="#2E52B2" />
+        <path
+          d="M50.9424 29.8628H53.0938L51.4033 31.5835L52.0576 34.2974L49.9531 32.772L47.7773 34.2974L48.5117 31.5835L46.5791 29.8628H49.1035L49.9502 27.6479L50.9424 29.8628ZM11.3486 29.2515H13.5L11.8096 30.9712L12.4639 33.686L10.3594 32.1606L8.18359 33.686L8.91797 30.9712L6.98633 29.2515H9.50977L10.3564 27.0366L11.3486 29.2515ZM24.5469 29.2515H26.6982L25.0078 30.9712L25.6621 33.686L23.5566 32.1606L21.3818 33.686L22.1162 30.9712L20.1836 29.2515H22.708L23.5537 27.0366L24.5469 29.2515ZM37.7441 29.2515H39.8955L38.2051 30.9712L38.8604 33.686L36.7549 32.1606L34.5791 33.686L35.3135 30.9712L33.3818 29.2515H35.9053L36.752 27.0366L37.7441 29.2515ZM50.9424 18.9077H53.0938L51.4033 20.6284L52.0576 23.3423L49.9521 21.8169L47.7773 23.3423L48.5117 20.6284L46.5791 18.9077H49.1025L49.9492 16.6929L50.9424 18.9077ZM11.3486 18.6021H13.5L11.8096 20.3218L12.4639 23.0366L10.3594 21.5112L8.18359 23.0366L8.91797 20.3218L6.98535 18.6021H9.50977L10.3555 16.3872L11.3486 18.6021ZM24.5459 18.6021H26.6973L25.0068 20.3218L25.6621 23.0366L23.5566 21.5112L21.3809 23.0366L22.1152 20.3218L20.1836 18.6021H22.707L23.5537 16.3872L24.5459 18.6021ZM37.7441 18.6021H39.8955L38.2051 20.3218L38.8594 23.0366L36.7549 21.5112L34.5791 23.0366L35.3135 20.3218L33.3809 18.6021H35.9053L36.752 16.3872L37.7441 18.6021ZM11.3486 7.95264H13.5L11.8096 9.67334L12.4639 12.3872L10.3594 10.8618L8.18359 12.3872L8.91797 9.67334L6.98535 7.95264H9.50977L10.3555 5.73779L11.3486 7.95264ZM24.5459 7.95264H26.6973L25.0068 9.67334L25.6621 12.3872L23.5566 10.8618L21.3809 12.3872L22.1152 9.67334L20.1836 7.95264H22.707L23.5537 5.73779L24.5459 7.95264ZM37.7441 7.95264H39.8955L38.2051 9.67334L38.8594 12.3872L36.7549 10.8618L34.5791 12.3872L35.3135 9.67334L33.3809 7.95264H35.9053L36.752 5.73779L37.7441 7.95264ZM50.9424 7.95264H53.0938L51.4033 9.67334L52.0576 12.3872L49.9521 10.8618L47.7773 12.3872L48.5117 9.67334L46.5791 7.95264H49.1025L49.9492 5.73779L50.9424 7.95264Z"
+          fill="white"
         />
       </g>
       <defs>
-        <linearGradient
-          id="paint0_linear_566_17653"
-          x1="47.9531"
-          y1="0.00311279"
-          x2="47.9531"
-          y2="71.9328"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="white" stopOpacity="0.7" />
-          <stop offset="1" stopOpacity="0.3" />
-        </linearGradient>
-        <clipPath id="clip0_566_17653">
-          <rect y="0.00311279" width="95.9062" height="71.9297" rx="5.99414" fill="white" />
-        </clipPath>
-        <clipPath id="clip1_566_17653">
-          <rect width="95.9062" height="71.9297" fill="white" transform="translate(0 0.00311279)" />
+        <clipPath id="clip0_18908_83688">
+          <rect x="0.09375" width="95.9062" height="71.9297" rx="5.99414" fill="white" />
         </clipPath>
       </defs>
     </svg>
@@ -115,99 +67,40 @@ export function FlagUSA({ className }: { className?: string }) {
 
 export function FlagEurope({ className }: { className?: string }) {
   return (
-    <svg
-      className={className}
-      width="96"
-      height="72"
-      viewBox="0 0 96 72"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_18900_83553)">
-        <g clipPath="url(#clip1_18900_83553)">
-          <rect width="95.9062" height="71.9297" transform="translate(0.09375)" fill="white" />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M0.140564 0.0351562H96.0468V71.9648H0.140564V0.0351562Z"
-            fill="#193DB8"
-          />
-          <path
-            d="M48.0937 7.1554L47.1547 10.0424H44.1204L46.5766 11.8247L45.6375 14.7118L48.0937 12.9295L50.5499 14.7118L49.6109 11.8247L52.0671 10.0424H49.0327L48.0937 7.1554Z"
-            fill="#F6CD46"
-          />
-          <path
-            d="M49.0327 60.1754L48.0937 57.2883L47.1547 60.1754H44.1204L46.5766 61.9577L45.6375 64.8447L48.0937 63.0624L50.5499 64.8447L49.6109 61.9577L52.0671 60.1754H49.0327Z"
-            fill="#F6CD46"
-          />
-          <path
-            d="M23.0273 37.996L25.4834 39.7783L24.5444 36.8913L27.0006 35.109H23.9663L23.0273 32.2219L22.0882 35.109H19.0539L21.5101 36.8913L20.5711 39.7783L23.0273 37.996Z"
-            fill="#F6CD46"
-          />
-          <path
-            d="M35.5588 10.5138L34.6234 13.4008H31.5854L34.0416 15.1831L33.1062 18.0702L35.5588 16.2879L38.0149 18.0702L37.0796 15.1831L39.5321 13.4008H36.4978L35.5588 10.5138Z"
-            fill="#F6CD46"
-          />
-          <path
-            d="M26.3856 19.6866L25.4466 22.5737H22.4122L24.8684 24.3597L23.9294 27.2467L26.3856 25.4607L28.8418 27.2467L27.9028 24.3597L30.359 22.5737H27.3246L26.3856 19.6866Z"
-            fill="#F6CD46"
-          />
-          <path
-            d="M27.3246 47.6401L26.3856 44.7531L25.4466 47.6401H22.4122L24.8684 49.4261L23.9294 52.3131L26.3856 50.5271L28.8418 52.3131L27.9028 49.4261L30.359 47.6401H27.3246Z"
-            fill="#F6CD46"
-          />
-          <path
-            d="M36.4978 56.8171L35.5588 53.9301L34.6234 56.8171H31.5854L34.0416 58.5994L33.1062 61.4864L35.5588 59.7041L38.0149 61.4864L37.0796 58.5994L39.5321 56.8171H36.4978Z"
-            fill="#F6CD46"
-          />
-          <path
-            d="M77.1335 35.109H74.0992L73.1601 32.2219L72.2211 35.109H69.1868L71.643 36.8913L70.7039 39.7783L73.1601 37.996L75.6163 39.7783L74.6773 36.8913L77.1335 35.109Z"
-            fill="#F6CD46"
-          />
-          <path
-            d="M60.6288 10.5138L59.6898 13.4008H56.6555L59.108 15.1831L58.1726 18.0702L60.6288 16.2879L63.0813 18.0702L62.146 15.1831L64.6022 13.4008H61.5642L60.6288 10.5138Z"
-            fill="#F6CD46"
-          />
-          <path
-            d="M68.2844 24.3597L67.3454 27.2467L69.8016 25.4607L72.2578 27.2467L71.3188 24.3597L73.775 22.5737H70.7406L69.8016 19.6866L68.8626 22.5737H65.8282L68.2844 24.3597Z"
-            fill="#F6CD46"
-          />
-          <path
-            d="M70.7406 47.6401L69.8016 44.7531L68.8626 47.6401H65.8282L68.2844 49.4261L67.3454 52.3131L69.8016 50.5271L72.2578 52.3131L71.3188 49.4261L73.775 47.6401H70.7406Z"
-            fill="#F6CD46"
-          />
-          <path
-            d="M61.5642 56.8171L60.6288 53.9301L59.6898 56.8171H56.6555L59.108 58.5994L58.1726 61.4864L60.6288 59.7041L63.0813 61.4864L62.146 58.5994L64.6022 56.8171H61.5642Z"
-            fill="#F6CD46"
-          />
-        </g>
-        <rect
-          x="0.09375"
-          width="95.9062"
-          height="71.9297"
-          fill="url(#paint0_linear_18900_83553)"
-          style={{ mixBlendMode: "overlay" }}
-        />
-      </g>
-      <defs>
-        <linearGradient
-          id="paint0_linear_18900_83553"
-          x1="48.0469"
-          y1="0"
-          x2="48.0469"
-          y2="71.9297"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="white" stopOpacity="0.7" />
-          <stop offset="1" stopOpacity="0.3" />
-        </linearGradient>
-        <clipPath id="clip0_18900_83553">
-          <rect x="0.09375" width="95.9062" height="71.9297" rx="5.99414" fill="white" />
-        </clipPath>
-        <clipPath id="clip1_18900_83553">
-          <rect width="95.9062" height="71.9297" fill="white" transform="translate(0.09375)" />
-        </clipPath>
-      </defs>
+    <svg className={className} viewBox="0 0 96 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="0.09375" width="95.9062" height="71.9297" rx="5.99414" fill="#2E52B2" />
+      <path
+        d="M30.1359 9.60876L28.2171 15.508H22.017L27.0358 19.1573L25.1171 25.0565L30.1359 21.4072L35.1547 25.0565L33.236 19.1573L38.2548 15.508H32.0546L30.1359 9.60876Z"
+        fill="#F6CD46"
+      />
+      <path
+        d="M48.0469 2.29382L46.1282 8.19302H39.928L44.9468 11.8424L43.0281 17.7416L48.0469 14.0922L53.0657 17.7416L51.147 11.8424L56.1658 8.19302H49.9656L48.0469 2.29382Z"
+        fill="#F6CD46"
+      />
+      <path
+        d="M65.9577 10.0177L64.039 15.9169H57.8388L62.8576 19.5663L60.9389 25.4655L65.9577 21.8161L70.9766 25.4655L69.0578 19.5663L74.0766 15.9169H67.8765L65.9577 10.0177Z"
+        fill="#F6CD46"
+      />
+      <path
+        d="M73.5861 27.4231L71.6673 33.3223H65.4672L70.486 36.9717L68.5672 42.8709L73.5861 39.2215L78.6049 42.8709L76.6862 36.9717L81.705 33.3223H75.5048L73.5861 27.4231Z"
+        fill="#F6CD46"
+      />
+      <path
+        d="M65.9577 46.0563L64.039 51.9555H57.8388L62.8576 55.6048L60.9389 61.504L65.9577 57.8547L70.9766 61.504L69.0578 55.6048L74.0766 51.9555H67.8765L65.9577 46.0563Z"
+        fill="#F6CD46"
+      />
+      <path
+        d="M48.0469 53.7802L46.1282 59.6794H39.928L44.9468 63.3287L43.0281 69.2279L48.0469 65.5785L53.0657 69.2279L51.147 63.3287L56.1658 59.6794H49.9656L48.0469 53.7802Z"
+        fill="#F6CD46"
+      />
+      <path
+        d="M30.1359 46.0563L28.2171 51.9555H22.017L27.0358 55.6048L25.1171 61.504L30.1359 57.8547L35.1547 61.504L33.236 55.6048L38.2548 51.9555H32.0546L30.1359 46.0563Z"
+        fill="#F6CD46"
+      />
+      <path
+        d="M22.5077 27.4231L20.589 33.3223H14.3888L19.4076 36.9717L17.4889 42.8709L22.5077 39.2215L27.5266 42.8709L25.6078 36.9717L30.6266 33.3223H24.4265L22.5077 27.4231Z"
+        fill="#F6CD46"
+      />
     </svg>
   );
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.regions/route.tsx

@@ -201,10 +201,7 @@ export default function Page() {
                             <TableCell>
                               <span className="flex items-center gap-2">
                                 {region.location ? (
-                                  <FlagIcon
-                                    region={region.location}
-                                    className="aspect-auto h-3 w-4"
-                                  />
+                                  <FlagIcon region={region.location} className="size-5" />
                                 ) : null}
                                 {region.description ?? "–"}
                               </span>