Update date filter buttons.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

src/components/input/WebsiteDateFilter.js

@@ -8,7 +8,6 @@ import styles from './WebsiteDateFilter.module.css';
 export function WebsiteDateFilter({ websiteId }) {
   const [dateRange, setDateRange] = useDateRange(websiteId);
   const { value, startDate, endDate, selectedUnit } = dateRange;
-
   const isFutureDate =
     value !== 'all' && isAfter(incrementDateRange(dateRange, -1).startDate, new Date());
 
@@ -21,7 +20,21 @@ export function WebsiteDateFilter({ websiteId }) {
   };
 
   return (
-    <>
+    <Flexbox justifyContent="center" gap={10}>
+      {value !== 'all' && (
+        <Flexbox justifyContent="center" className={styles.buttons}>
+          <Button onClick={() => handleIncrement(1)}>
+            <Icon rotate={90}>
+              <Icons.ChevronDown />
+            </Icon>
+          </Button>
+          <Button onClick={() => handleIncrement(-1)} disabled={isFutureDate}>
+            <Icon rotate={270}>
+              <Icons.ChevronDown />
+            </Icon>
+          </Button>
+        </Flexbox>
+      )}
       <DateFilter
         className={styles.dropdown}
         value={value}
@@ -31,22 +44,7 @@ export function WebsiteDateFilter({ websiteId }) {
         onChange={handleChange}
         showAllTime={true}
       />
-      {value !== 'all' && (
-        <Flexbox justifyContent="center" gap={10} className={styles.container}>
-          <Button onClick={() => handleIncrement(1)}>
-            <Icon rotate={90}>
-              <Icons.ChevronDown />
-            </Icon>
-          </Button>
-
-          <Button onClick={() => handleIncrement(-1)} disabled={isFutureDate}>
-            <Icon rotate={270}>
-              <Icons.ChevronDown />
-            </Icon>
-          </Button>
     </Flexbox>
-      )}
-    </>
   );
 }
 

src/components/input/WebsiteDateFilter.module.css

@@ -1,3 +1,14 @@
 .dropdown {
   min-width: 200px;
 }
+
+.buttons button:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.buttons button:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 1px solid var(--base400) !important;
+}

src/components/layout/AppLayout.module.css

@@ -10,7 +10,7 @@
   width: 100vw;
   grid-column: 1;
   grid-row: 1 / 2;
-  z-index: 1;
+  z-index: var(--z-index-popup);
 }
 
 .body {

src/components/metrics/FilterTags.js

@@ -1,8 +1,8 @@
 import { safeDecodeURI } from 'next-basics';
 import { Button, Icon, Icons, Text } from 'react-basics';
 import usePageQuery from 'components/hooks/usePageQuery';
-import styles from './FilterTags.module.css';
 import useMessages from 'components/hooks/useMessages';
+import styles from './FilterTags.module.css';
 
 export function FilterTags({ params }) {
   const { formatMessage, labels } = useMessages();
@@ -26,6 +26,7 @@ export function FilterTags({ params }) {
 
   return (
     <div className={styles.filters}>
+      <div className={styles.label}>{formatMessage(labels.filters)}</div>
       {Object.keys(params).map(key => {
         if (!params[key]) {
           return null;

src/components/metrics/FilterTags.module.css

@@ -4,19 +4,23 @@
   gap: 10px;
 }
 
+.label {
+  font-weight: 700;
+}
+
 .tag {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
   font-size: var(--font-size-sm);
-  border: 1px solid var(--base600);
+  border: 1px solid var(--blue400);
   border-radius: var(--border-radius);
-  line-height: 30px;
-  padding: 0 8px;
+  padding: 8px 16px;
   cursor: pointer;
+  background: var(--blue100);
 }
 
 .tag:hover {
-  background: var(--base75);
+  background: var(--blue200);
 }

src/components/pages/websites/WebsiteDetailsPage.js

@@ -22,12 +22,12 @@ export default function WebsiteDetailsPage({ websiteId }) {
   return (
     <Page loading={isLoading} error={error}>
       <WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
-      <WebsiteMetricsBar websiteId={websiteId} sticky={true} />
-      <WebsiteChart websiteId={websiteId} />
       <FilterTags
         websiteId={websiteId}
         params={{ url, referrer, os, browser, device, country, region, city, title }}
       />
+      <WebsiteMetricsBar websiteId={websiteId} sticky={true} />
+      <WebsiteChart websiteId={websiteId} />
       {!website && <Loading icon="dots" style={{ minHeight: 300 }} />}
       {website && (
         <>

src/components/pages/websites/WebsiteMetricsBar.js

@@ -10,7 +10,7 @@ import { formatShortTime } from 'lib/format';
 import { Button, Column, Icon, Icons, Popup, PopupTrigger, Row } from 'react-basics';
 import styles from './WebsiteMetricsBar.module.css';
 
-export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
+export function WebsiteMetricsBar({ websiteId, showFilter = true, showRefresh = true, sticky }) {
   const { formatMessage, labels } = useMessages();
 
   const { get, useQuery } = useApi();
@@ -161,8 +161,8 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
       <Column defaultSize={12} xl={4}>
         <div className={styles.actions}>
           {showFilter && <WebsiteFilterButton />}
+          {showRefresh && <RefreshButton websiteId={websiteId} />}
           <WebsiteDateFilter websiteId={websiteId} />
-          <RefreshButton websiteId={websiteId} />
         </div>
       </Column>
     </Row>