Redesigned filter bar.

src/components/icons.ts

@@ -6,6 +6,7 @@ import Bolt from 'assets/bolt.svg';
 import Calendar from 'assets/calendar.svg';
 import Change from 'assets/change.svg';
 import Clock from 'assets/clock.svg';
+import Compare from 'assets/compare.svg';
 import Dashboard from 'assets/dashboard.svg';
 import Eye from 'assets/eye.svg';
 import Gear from 'assets/gear.svg';
@@ -32,6 +33,7 @@ const icons = {
   Calendar,
   Change,
   Clock,
+  Compare,
   Dashboard,
   Eye,
   Gear,

src/components/messages.ts

@@ -247,6 +247,7 @@ export const labels = defineMessages({
     id: 'label.journey-description',
     defaultMessage: 'Understand how users nagivate through your website.',
   },
+  compare: { id: 'label.compare', defaultMessage: 'Compare' },
 });
 
 export const messages = defineMessages({

src/components/metrics/FilterTags.module.css

@@ -2,6 +2,12 @@
   display: flex;
   align-items: center;
   gap: 10px;
+  background: var(--base75);
+  padding: 10px 20px;
+  border: 1px solid var(--base400);
+  border-radius: 8px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
 }
 
 .label {
@@ -12,12 +18,13 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 10px;
-  background: var(--base75);
+  gap: 4px;
+  font-size: 12px;
+  background: var(--base50);
   border: 1px solid var(--base400);
   border-radius: var(--border-radius);
   box-shadow: 1px 1px 1px var(--base500);
-  padding: 8px 16px;
+  padding: 6px 14px;
   cursor: pointer;
 }
 
@@ -27,6 +34,8 @@
 
 .close {
   font-weight: 700;
+  align-self: center;
+  margin-left: auto;
 }
 
 .name,

src/components/metrics/FilterTags.tsx

@@ -13,6 +13,7 @@ import FieldFilterEditForm from 'app/(main)/reports/[reportId]/FieldFilterEditFo
 import { OPERATOR_PREFIXES } from 'lib/constants';
 import { isSearchOperator, parseParameterValue } from 'lib/params';
 import styles from './FilterTags.module.css';
+import WebsiteFilterButton from 'app/(main)/websites/[websiteId]/WebsiteFilterButton';
 
 export function FilterTags({
   websiteId,
@@ -100,6 +101,7 @@ export function FilterTags({
           </PopupTrigger>
         );
       })}
+      <WebsiteFilterButton websiteId={websiteId} alignment="center" showText={false} />
       <Button className={styles.close} variant="quiet" onClick={handleResetFilter}>
         <Icon>
           <Icons.Close />

src/components/metrics/MetricCard.module.css

@@ -2,10 +2,17 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-height: 90px;
   min-width: 140px;
 }
 
+.card:first-child {
+  padding-left: 0;
+}
+
+.card:last-child {
+  border: 0;
+}
+
 .value {
   display: flex;
   align-items: center;

src/components/metrics/MetricCard.tsx

@@ -27,9 +27,6 @@ export const MetricCard = ({
 
   return (
     <div className={classNames(styles.card, className)}>
-      <animated.div className={styles.value} title={props?.x as any}>
-        {props?.x?.to(x => format(x))}
-      </animated.div>
       <div className={styles.label}>
         {label}
         {~~change !== 0 && !hideComparison && (
@@ -45,6 +42,9 @@ export const MetricCard = ({
           </animated.span>
         )}
       </div>
+      <animated.div className={styles.value} title={props?.x as any}>
+        {props?.x?.to(x => format(x))}
+      </animated.div>
     </div>
   );
 };