Updated filter tags.

components/metrics/FilterTags.js

@@ -32,15 +32,13 @@ export default function FilterTags({ websiteId, params, onClick }) {
           return null;
         }
         return (
-          <div key={key} className={styles.tag}>
-            <Button onClick={() => handleCloseFilter(key)} variant="primary" size="sm">
-              <Text>
-                <b>{`${key}`}</b> — {`${safeDecodeURI(params[key])}`}
-              </Text>
-              <Icon>
-                <Icons.Close />
-              </Icon>
-            </Button>
+          <div key={key} className={styles.tag} onClick={() => handleCloseFilter(key)}>
+            <Text>
+              <b>{`${key}`}</b> = {`${safeDecodeURI(params[key])}`}
+            </Text>
+            <Icon>
+              <Icons.Close />
+            </Icon>
           </div>
         );
       })}

components/metrics/FilterTags.module.css

@@ -1,11 +1,22 @@
 .filters {
   display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
+  gap: 10px;
 }
 
 .tag {
-  text-align: center;
-  margin-bottom: 10px;
-  margin-right: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  font-size: var(--font-size-sm);
+  border: 1px solid var(--base600);
+  border-radius: var(--border-radius);
+  line-height: 30px;
+  padding: 0 8px;
+  cursor: pointer;
+}
+
+.tag:hover {
+  background: var(--base75);
 }

components/pages/settings/teams/TeamWebsitesTable.js

@@ -17,14 +17,14 @@ import { labels } from 'components/messages';
 import useUser from 'hooks/useUser';
 import useApi from 'hooks/useApi';
 
-export default function TeamWebsitesTable({ teamId, data = [], onSave }) {
+export default function TeamWebsitesTable({ data = [], onSave }) {
   const { formatMessage } = useIntl();
   const { user } = useUser();
   const { del, useMutation } = useApi();
-  const { mutate } = useMutation(data => del(`/teamWebsites/${data.teamWebsiteId}`));
+  const { mutate } = useMutation(({ teamWebsiteId }) => del(`/teamWebsites/${teamWebsiteId}`));
 
   const columns = [
-    { name: 'name', label: formatMessage(labels.name), style: { flex: 2 } },
+    { name: 'name', label: formatMessage(labels.name) },
     { name: 'domain', label: formatMessage(labels.domain) },
     { name: 'action', label: ' ' },
   ];