From 9345c9ac9ee62beca5bf45dff3af57f1cd061dcf Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Tue, 25 Apr 2023 21:18:03 -0700
Subject: [PATCH] Apply CSS to flag icons.

---
 components/common/FilterLink.js         | 16 +++++++---------
 components/common/FilterLink.module.css |  8 ++++++--
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/components/common/FilterLink.js b/components/common/FilterLink.js
index d0c4f1c1..30cdc025 100644
--- a/components/common/FilterLink.js
+++ b/components/common/FilterLink.js
@@ -13,18 +13,16 @@ export function FilterLink({ id, value, label, externalUrl, children, className
   const selected = query[id] === value;
 
   return (
-    <div className={classNames(styles.row, className)}>
+    <div
+      className={classNames(styles.row, className, {
+        [styles.inactive]: active && !selected,
+        [styles.active]: active && selected,
+      })}
+    >
       {children}
       {!value && `(${label || formatMessage(labels.unknown)})`}
       {value && (
-        <Link
-          href={resolveUrl({ [id]: value })}
-          className={classNames(styles.label, {
-            [styles.inactive]: active && !selected,
-            [styles.active]: active && selected,
-          })}
-          replace
-        >
+        <Link href={resolveUrl({ [id]: value })} className={styles.label} replace>
           {safeDecodeURI(label || value)}
         </Link>
       )}
diff --git a/components/common/FilterLink.module.css b/components/common/FilterLink.module.css
index 6736db6c..894d6e00 100644
--- a/components/common/FilterLink.module.css
+++ b/components/common/FilterLink.module.css
@@ -4,11 +4,15 @@
   gap: 10px;
 }
 
-.row .inactive {
+.row.inactive {
   color: var(--base500);
 }
 
-.row .active {
+.row.inactive img {
+  opacity: 0.35;
+}
+
+.row.active {
   color: var(--base900);
   font-weight: 600;
 }