From 57c3d03cc87773ffeed782f0f59a41ca2e61c5ff Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Fri, 31 Mar 2023 22:01:36 -0700
Subject: [PATCH] Removed Tag component.

---
 components/common/Tag.js                         |  8 --------
 components/common/Tag.module.css                 |  7 -------
 components/metrics/QueryParametersTable.js       | 10 +++++-----
 .../metrics/QueryParametersTable.module.css      | 16 ++++++++++++++++
 4 files changed, 21 insertions(+), 20 deletions(-)
 delete mode 100644 components/common/Tag.js
 delete mode 100644 components/common/Tag.module.css
 create mode 100644 components/metrics/QueryParametersTable.module.css

diff --git a/components/common/Tag.js b/components/common/Tag.js
deleted file mode 100644
index d30f0d0f..00000000
--- a/components/common/Tag.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import classNames from 'classnames';
-import styles from './Tag.module.css';
-
-function Tag({ className, children }) {
-  return <span className={classNames(styles.tag, className)}>{children}</span>;
-}
-
-export default Tag;
diff --git a/components/common/Tag.module.css b/components/common/Tag.module.css
deleted file mode 100644
index a872a7bf..00000000
--- a/components/common/Tag.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.tag {
-  padding: 4px 6px;
-  border-radius: 4px;
-  margin-right: 10px;
-  color: var(--primary400);
-  background: var(--blue100);
-}
diff --git a/components/metrics/QueryParametersTable.js b/components/metrics/QueryParametersTable.js
index 8ed75bea..e8404bb4 100644
--- a/components/metrics/QueryParametersTable.js
+++ b/components/metrics/QueryParametersTable.js
@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { safeDecodeURI } from 'next-basics';
-import Tag from 'components/common/Tag';
 import FilterButtons from 'components/common/FilterButtons';
 import { paramFilter } from 'lib/filters';
 import { FILTER_RAW, FILTER_COMBINED } from 'lib/constants';
 import MetricsTable from './MetricsTable';
 import useMessages from 'hooks/useMessages';
+import styles from './QueryParametersTable.module.css';
 
 const filters = {
   [FILTER_RAW]: null,
@@ -38,10 +38,10 @@ export default function QueryParametersTable({ websiteId, showFilters, ...props
           filter === FILTER_RAW ? (
             x
           ) : (
-            <>
-              <Tag>{safeDecodeURI(p)}</Tag>
-              {safeDecodeURI(v)}
-            </>
+            <div className={styles.item}>
+              <div className={styles.param}>{safeDecodeURI(p)}</div>
+              <div className={styles.value}>{safeDecodeURI(v)}</div>
+            </div>
           )
         }
         delay={0}
diff --git a/components/metrics/QueryParametersTable.module.css b/components/metrics/QueryParametersTable.module.css
new file mode 100644
index 00000000..ba5ca54a
--- /dev/null
+++ b/components/metrics/QueryParametersTable.module.css
@@ -0,0 +1,16 @@
+.item {
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 1px;
+}
+
+.param {
+  padding: 0 8px;
+  color: var(--primary400);
+  background: var(--blue100);
+  border-radius: 4px;
+}
+
+.value {
+  padding: 0 8px;
+}