Messages for devices so they can be localized.

components/common/RefreshButton.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
 import { setDateRange } from 'redux/actions/websites';
 import Button from './Button';
 import Refresh from 'assets/redo.svg';
@@ -24,5 +25,13 @@ export default function RefreshButton({ websiteId }) {
     setLoading(false);
   }, [completed]);
 
-  return <Button icon={loading ? <Dots /> : <Refresh />} size="small" onClick={handleClick} />;
+  return (
+    <Button
+      icon={loading ? <Dots /> : <Refresh />}
+      tooltip={<FormattedMessage id="button.refresh" defaultMessage="Refresh" />}
+      tooltipId="button-refresh"
+      size="small"
+      onClick={handleClick}
+    />
+  );
 }

components/layout/Footer.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import Link from 'components/common/Link';
 import styles from './Footer.module.css';
 
 export default function Footer() {
@@ -11,12 +12,12 @@ export default function Footer() {
         <div>
           <FormattedMessage
             id="footer.powered-by"
-            defaultMessage="Powered by {name} {version}"
+            defaultMessage="Powered by {name}"
             values={{
               name: (
-                <a href="https://umami.is">
+                <Link href="https://umami.is">
                   <b>umami</b>
-                </a>
+                </Link>
               ),
             }}
           />

components/messages.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+export const labels = defineMessages({
+  unknown: { id: 'label.unknown', defaultMessage: 'Unknown' },
+});
+
+export const devices = defineMessages({
+  desktop: { id: 'device.desktop', defaultMessage: 'Desktop' },
+  laptop: { id: 'device.laptop', defaultMessage: 'Laptop' },
+  tablet: { id: 'device.tablet', defaultMessage: 'Tablet' },
+  mobile: { id: 'device.mobile', defaultMessage: 'Mobile' },
+});
+
+export function getDeviceMessage(device) {
+  return <FormattedMessage {...(devices[device] || labels.unknown)} />;
+}

components/metrics/DevicesTable.js

@@ -2,6 +2,7 @@ import React from 'react';
 import MetricsTable from './MetricsTable';
 import { deviceFilter } from 'lib/filters';
 import { FormattedMessage } from 'react-intl';
+import { getDeviceMessage } from 'components/messages';
 
 export default function DevicesTable({ websiteId, limit, onExpand }) {
   return (
@@ -12,6 +13,7 @@ export default function DevicesTable({ websiteId, limit, onExpand }) {
       websiteId={websiteId}
       limit={limit}
       dataFilter={deviceFilter}
+      renderLabel={({ x }) => getDeviceMessage(x)}
       onExpand={onExpand}
     />
   );

components/metrics/WebsiteHeader.module.css

@@ -6,6 +6,7 @@
 
 .link {
   font-size: var(--font-size-small);
+  font-weight: 600;
 }
 
 .link svg {

components/settings/WebsiteSettings.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
+import Link from 'components/common/Link';
 import Table from 'components/common/Table';
 import Button from 'components/common/Button';
 import PageHeader from 'components/layout/PageHeader';
@@ -16,7 +17,7 @@ import Pen from 'assets/pen.svg';
 import Trash from 'assets/trash.svg';
 import Plus from 'assets/plus.svg';
 import Code from 'assets/code.svg';
-import Link from 'assets/link.svg';
+import LinkIcon from 'assets/link.svg';
 import useFetch from 'hooks/useFetch';
 import styles from './WebsiteSettings.module.css';
 
@@ -34,7 +35,7 @@ export default function WebsiteSettings() {
     <ButtonLayout>
       {row.share_id && (
         <Button
-          icon={<Link />}
+          icon={<LinkIcon />}
           size="small"
           tooltip={<FormattedMessage id="tooltip.get-share-url" defaultMessage="Get share URL" />}
           tooltipId={`button-share-${row.website_id}`}
@@ -63,11 +64,18 @@ export default function WebsiteSettings() {
     </ButtonLayout>
   );
 
+  const DetailsLink = ({ website_id, name }) => (
+    <Link href="/website/[...id]" as={`/website/${website_id}/${name}`}>
+      {name}
+    </Link>
+  );
+
   const columns = [
     {
       key: 'name',
       label: <FormattedMessage id="label.name" defaultMessage="Name" />,
       className: 'col-6 col-xl-4',
+      render: DetailsLink,
     },
     {
       key: 'domain',