Convert buttons to links.

components/common/Link.module.css

@@ -1,12 +1,12 @@
-.link,
-.link:active,
-.link:visited {
+a.link,
+a.link:active,
+a.link:visited {
   position: relative;
   color: #2c2c2c;
   text-decoration: none;
 }
 
-.link:before {
+a.link:before {
   content: '';
   position: absolute;
   bottom: -2px;
@@ -17,7 +17,7 @@
   transition: width 100ms;
 }
 
-.link:hover:before {
+a.link:hover:before {
   width: 100%;
   transition: width 100ms;
 }

components/layout/ButtonLayout.module.css

@@ -1,7 +1,8 @@
 .buttons {
   display: flex;
+  align-items: center;
 }
 
-.buttons button + button {
+.buttons button + * {
   margin-left: 10px;
 }

components/layout/Footer.js

@@ -1,21 +1,26 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import classNames from 'classnames';
-import Button from 'components/common/Button';
-import Logo from 'assets/logo.svg';
 import styles from './Footer.module.css';
 
 export default function Footer() {
   const version = process.env.VERSION;
   return (
     <footer className="container">
-      <div className={classNames(styles.footer, 'row justify-content-center')}>
-        <FormattedMessage id="footer.powered-by" defaultMessage="Powered by" />
-        <a href="https://umami.is">
-          <Button className={styles.button} icon={<Logo />} size="small">
-            <b>umami</b>
-          </Button>
-        </a>
+      <div className={styles.footer}>
+        <div />
+        <div>
+          <FormattedMessage
+            id="footer.powered-by"
+            defaultMessage="Powered by {name} {version}"
+            values={{
+              name: (
+                <a href="https://umami.is">
+                  <b>umami</b>
+                </a>
+              ),
+            }}
+          />
+        </div>
         <div>{`v${version}`}</div>
       </div>
     </footer>

components/layout/Footer.module.css

@@ -5,11 +5,3 @@
   font-size: var(--font-size-small);
   min-height: 100px;
 }
-
-.footer a {
-  text-decoration: none;
-}
-
-.button {
-  margin: 0 5px;
-}

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>

components/metrics/WebsiteHeader.module.css

@@ -4,10 +4,14 @@
   line-height: var(--font-size-large);
 }
 
-.button {
+.link {
   font-size: var(--font-size-small);
 }
 
+.link svg {
+  margin-left: 10px;
+}
+
 @media only screen and (max-width: 576px) {
   .active {
     display: none;