More deletes. Fixed sticky header.

components/metrics/MetricCard.module.css

@@ -6,10 +6,9 @@
 }
 
 .value {
-  font-size: var(--font-size-2xl);
-  line-height: 40px;
-  min-height: 40px;
-  font-weight: 600;
+  min-height: 36px;
+  font-size: 36px;
+  font-weight: 700;
   white-space: nowrap;
 }
 

components/metrics/MetricsTable.js

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
-import { Loading, Icons } from 'react-basics';
+import { Loading, Icon, Text, Button } from 'react-basics';
 import { defineMessages, useIntl } from 'react-intl';
+import Link from 'next/link';
 import firstBy from 'thenby';
 import classNames from 'classnames';
-import Link from 'components/common/Link';
 import useApi from 'hooks/useApi';
 import { percentFilter } from 'lib/filters';
 import useDateRange from 'hooks/useDateRange';
@@ -11,6 +11,7 @@ import usePageQuery from 'hooks/usePageQuery';
 import ErrorMessage from 'components/common/ErrorMessage';
 import DataTable from './DataTable';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
+import Icons from 'components/icons';
 import styles from './MetricsTable.module.css';
 
 const messages = defineMessages({
@@ -78,14 +79,15 @@ export default function MetricsTable({
       {data && !error && <DataTable {...props} data={filteredData} className={className} />}
       <div className={styles.footer}>
         {data && !error && limit && (
-          <Link
-            icon={<Icons.ArrowRight />}
-            href={router.pathname}
-            as={resolve({ view: type })}
-            size="small"
-            iconRight
-          >
-            {formatMessage(messages.more)}
+          <Link href={router.pathname} as={resolve({ view: type })}>
+            <a>
+              <Button variant="quiet">
+                <Text>{formatMessage(messages.more)}</Text>
+                <Icon size="sm">
+                  <Icons.ArrowRight />
+                </Icon>
+              </Button>
+            </a>
           </Link>
         )}
       </div>

components/metrics/WebsiteChart.js

@@ -39,7 +39,7 @@ export default function WebsiteChart({
   const { get, useQuery } = useApi();
 
   const { data, isLoading, error } = useQuery(
-    ['websites:pageviews', { websiteId, modified, url, referrer, os, browser, device, country }],
+    ['websites:pageviews', websiteId, modified, url, referrer, os, browser, device, country],
     () =>
       get(`/websites/${websiteId}/pageviews`, {
         startAt: +startDate,
@@ -82,10 +82,6 @@ export default function WebsiteChart({
     }
   }
 
-  if (isLoading) {
-    return <Loading icon="dots" />;
-  }
-
   return (
     <>
       <WebsiteHeader websiteId={websiteId} title={title} domain={domain}>