Convert buttons to links.

components/metrics/WebsiteHeader.js

@@ -1,17 +1,15 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useRouter } from 'next/router';
+import Link from 'components/common/Link';
 import PageHeader from 'components/layout/PageHeader';
-import Button from 'components/common/Button';
 import ActiveUsers from './ActiveUsers';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteHeader.module.css';
 import RefreshButton from '../common/RefreshButton';
 import ButtonLayout from '../layout/ButtonLayout';
+import Icon from '../common/Icon';
 
 export default function WebsiteHeader({ websiteId, title, showLink = false }) {
-  const router = useRouter();
-
   return (
     <PageHeader>
       <div className={styles.title}>{title}</div>
@@ -19,19 +17,14 @@ export default function WebsiteHeader({ websiteId, title, showLink = false }) {
       <ButtonLayout>
         <RefreshButton websiteId={websiteId} />
         {showLink && (
-          <Button
-            icon={<Arrow />}
-            onClick={() =>
-              router.push('/website/[...id]', `/website/${websiteId}/${title}`, {
-                shallow: true,
-              })
-            }
-            size="small"
+          <Link
+            href="/website/[...id]"
+            as={`/website/${websiteId}/${title}`}
+            className={styles.link}
           >
-            <div>
-              <FormattedMessage id="button.view-details" defaultMessage="View details" />
-            </div>
-          </Button>
+            <FormattedMessage id="button.view-details" defaultMessage="View details" />
+            <Icon icon={<Arrow />} size="small" />
+          </Link>
         )}
       </ButtonLayout>
     </PageHeader>