Convert buttons to links.

.github/stale.yml

@@ -0,0 +1,19 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+  - enhancement
+  - bug
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

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;

lang/de-DE.json

@@ -13,7 +13,7 @@
   "button.save": "Speichern",
   "button.view-details": "Details anzeigen",
   "button.websites": "Webseiten",
-  "footer.powered-by": "Powered by",
+  "footer.powered-by": "Powered by {name}",
   "header.nav.dashboard": "Übersicht",
   "header.nav.settings": "Einstellungen",
   "label.administrator": "Administrator",

lang/en-US.json

@@ -13,7 +13,7 @@
   "button.save": "Save",
   "button.view-details": "View details",
   "button.websites": "Websites",
-  "footer.powered-by": "Powered by",
+  "footer.powered-by": "Powered by {name}",
   "header.nav.dashboard": "Dashboard",
   "header.nav.settings": "Settings",
   "label.administrator": "Administrator",

lang/es-MX.json

@@ -13,7 +13,7 @@
   "button.save": "Guardar",
   "button.view-details": "Ver detalles",
   "button.websites": "Sitios",
-  "footer.powered-by": "Desarrollado con",
+  "footer.powered-by": "Desarrollado con {name}",
   "header.nav.dashboard": "Panel de control",
   "header.nav.settings": "Configuraciones",
   "label.administrator": "Administrador",

lang/ja-JP.json

@@ -13,7 +13,7 @@
   "button.save": "保存",
   "button.view-details": "詳細表示",
   "button.websites": "Webサイト",
-  "footer.powered-by": "Powered by",
+  "footer.powered-by": "Powered by {name}",
   "header.nav.dashboard": "ダッシュボード",
   "header.nav.settings": "設定",
   "label.administrator": "管理者",

lang/nl-NL.json

@@ -13,7 +13,7 @@
   "button.save": "Opslaan",
   "button.view-details": "Meer details",
   "button.websites": "Websites",
-  "footer.powered-by": "mogelijk gemaakt door",
+  "footer.powered-by": "mogelijk gemaakt door {name}",
   "header.nav.dashboard": "Dashboard",
   "header.nav.settings": "Instellingen",
   "label.administrator": "Administrator",

lang/ru-RU.json

@@ -13,7 +13,7 @@
   "button.save": "Сохранить",
   "button.view-details": "Посмотреть детали",
   "button.websites": "Сайты",
-  "footer.powered-by": "на движке",
+  "footer.powered-by": "на движке {name}",
   "header.nav.dashboard": "Информационная панель",
   "header.nav.settings": "Настройки",
   "label.administrator": "Администратор",

lang/tr-TR.json

@@ -13,7 +13,7 @@
   "button.save": "Kaydet",
   "button.view-details": "Detayı incele",
   "button.websites": "Web siteleri",
-  "footer.powered-by": "Sağlayıcı:",
+  "footer.powered-by": "Sağlayıcı: {name}",
   "header.nav.dashboard": "Kontrol Paneli",
   "header.nav.settings": "Ayarlar",
   "label.administrator": "Yönetici",

lang/zh-CN.json

@@ -13,7 +13,7 @@
   "button.save": "保存",
   "button.view-details": "查看更多",
   "button.websites": "网站",
-  "footer.powered-by": "运行",
+  "footer.powered-by": "运行 {name}",
   "header.nav.dashboard": "仪表板",
   "header.nav.settings": "设置",
   "label.administrator": "管理员",

styles/index.css

@@ -56,7 +56,25 @@ select {
 a,
 a:active,
 a:visited {
-  color: var(--primary400);
+  position: relative;
+  color: #2c2c2c;
+  text-decoration: none;
+}
+
+a:before {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  width: 0;
+  height: 2px;
+  background: #2680eb;
+  opacity: 0.5;
+  transition: width 100ms;
+}
+
+a:hover:before {
+  width: 100%;
+  transition: width 100ms;
 }
 
 input[type='text'],