From 2d9523f963d29f9db209657e25c4e7a87c3f8bc3 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Tue, 15 Sep 2020 20:34:30 -0700
Subject: [PATCH] Messages for devices so they can be localized.

---
 components/common/RefreshButton.js          | 11 ++++++++++-
 components/layout/Footer.js                 |  7 ++++---
 components/messages.js                      | 17 +++++++++++++++++
 components/metrics/DevicesTable.js          |  2 ++
 components/metrics/WebsiteHeader.module.css |  1 +
 components/settings/WebsiteSettings.js      | 12 ++++++++++--
 lang/de-DE.json                             |  6 ++++++
 lang/en-US.json                             |  6 ++++++
 lang/es-MX.json                             |  6 ++++++
 lang/fr-FR.json                             |  8 +++++++-
 lang/ja-JP.json                             |  6 ++++++
 lang/mn-MN.json                             |  8 +++++++-
 lang/nl-NL.json                             |  6 ++++++
 lang/ru-RU.json                             |  6 ++++++
 lang/tr-TR.json                             |  6 ++++++
 lang/zh-CN.json                             |  6 ++++++
 lib/constants.js                            |  7 -------
 lib/filters.js                              |  9 ++++-----
 styles/index.css                            | 20 +-------------------
 19 files changed, 111 insertions(+), 39 deletions(-)
 create mode 100644 components/messages.js

diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js
index 60d0976e..b3e00a27 100644
--- a/components/common/RefreshButton.js
+++ b/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}
+    />
+  );
 }
diff --git a/components/layout/Footer.js b/components/layout/Footer.js
index eecc9121..41810f26 100644
--- a/components/layout/Footer.js
+++ b/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>
               ),
             }}
           />
diff --git a/components/messages.js b/components/messages.js
new file mode 100644
index 00000000..4f0a67c8
--- /dev/null
+++ b/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)} />;
+}
diff --git a/components/metrics/DevicesTable.js b/components/metrics/DevicesTable.js
index 0f9c54e7..c37d18ea 100644
--- a/components/metrics/DevicesTable.js
+++ b/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}
     />
   );
diff --git a/components/metrics/WebsiteHeader.module.css b/components/metrics/WebsiteHeader.module.css
index a1413132..71ff5b1b 100644
--- a/components/metrics/WebsiteHeader.module.css
+++ b/components/metrics/WebsiteHeader.module.css
@@ -6,6 +6,7 @@
 
 .link {
   font-size: var(--font-size-small);
+  font-weight: 600;
 }
 
 .link svg {
diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js
index 3bcf6bb4..e38fd198 100644
--- a/components/settings/WebsiteSettings.js
+++ b/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',
diff --git a/lang/de-DE.json b/lang/de-DE.json
index 5be46132..00c20e89 100644
--- a/lang/de-DE.json
+++ b/lang/de-DE.json
@@ -10,9 +10,14 @@
   "button.edit": "Bearbeiten",
   "button.login": "Anmelden",
   "button.more": "Mehr",
+  "button.refresh": "Refresh",
   "button.save": "Speichern",
   "button.view-details": "Details anzeigen",
   "button.websites": "Webseiten",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
   "footer.powered-by": "Powered by {name}",
   "header.nav.dashboard": "Übersicht",
   "header.nav.settings": "Einstellungen",
@@ -37,6 +42,7 @@
   "label.this-week": "Diese Woche",
   "label.this-year": "Dieses Jahr",
   "label.today": "Heute",
+  "label.unknown": "Unknown",
   "label.username": "Benutzername",
   "message.confirm-delete": "Sind sie sich sicher {target} zu löschen?",
   "message.copied": "In Zwischenablage kopiert!",
diff --git a/lang/en-US.json b/lang/en-US.json
index 20d82dd0..20730d0c 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -10,9 +10,14 @@
   "button.edit": "Edit",
   "button.login": "Login",
   "button.more": "More",
+  "button.refresh": "Refresh",
   "button.save": "Save",
   "button.view-details": "View details",
   "button.websites": "Websites",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
   "footer.powered-by": "Powered by {name}",
   "header.nav.dashboard": "Dashboard",
   "header.nav.settings": "Settings",
@@ -37,6 +42,7 @@
   "label.this-week": "This week",
   "label.this-year": "This year",
   "label.today": "Today",
+  "label.unknown": "Unknown",
   "label.username": "Username",
   "message.confirm-delete": "Are your sure you want to delete {target}?",
   "message.copied": "Copied!",
diff --git a/lang/es-MX.json b/lang/es-MX.json
index 75fee3b7..3e357272 100644
--- a/lang/es-MX.json
+++ b/lang/es-MX.json
@@ -10,9 +10,14 @@
   "button.edit": "Editar",
   "button.login": "Iniciar sesión",
   "button.more": "Más",
+  "button.refresh": "Refresh",
   "button.save": "Guardar",
   "button.view-details": "Ver detalles",
   "button.websites": "Sitios",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
   "footer.powered-by": "Desarrollado con {name}",
   "header.nav.dashboard": "Panel de control",
   "header.nav.settings": "Configuraciones",
@@ -37,6 +42,7 @@
   "label.this-week": "Esta semana",
   "label.this-year": "Este año",
   "label.today": "Hoy",
+  "label.unknown": "Unknown",
   "label.username": "Nombre de usuario",
   "message.confirm-delete": "¿Estás seguro(a) de querer eliminar {target}?",
   "message.copied": "Copiado!",
diff --git a/lang/fr-FR.json b/lang/fr-FR.json
index f333ade5..1561d3be 100644
--- a/lang/fr-FR.json
+++ b/lang/fr-FR.json
@@ -10,10 +10,15 @@
   "button.edit": "Modifier",
   "button.login": "Connexion",
   "button.more": "Plus",
+  "button.refresh": "Refresh",
   "button.save": "Sauvegarder",
   "button.view-details": "Voir les details",
   "button.websites": "Sites",
-  "footer.powered-by": "Propulsé par",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
+  "footer.powered-by": "Propulsé par {name}",
   "header.nav.dashboard": "Tableau de bord",
   "header.nav.settings": "Paramètres",
   "label.administrator": "Administrateur",
@@ -37,6 +42,7 @@
   "label.this-week": "Cette semaine",
   "label.this-year": "Cette année",
   "label.today": "Aujourd'hui",
+  "label.unknown": "Unknown",
   "label.username": "Nom d'utilisateur",
   "message.confirm-delete": "Êtes-vous sur de vouloir supprimer {target}?",
   "message.copied": "Copié !",
diff --git a/lang/ja-JP.json b/lang/ja-JP.json
index 7b14ed06..643c4f9d 100644
--- a/lang/ja-JP.json
+++ b/lang/ja-JP.json
@@ -10,9 +10,14 @@
   "button.edit": "編集",
   "button.login": "ログイン",
   "button.more": "さらに表示",
+  "button.refresh": "Refresh",
   "button.save": "保存",
   "button.view-details": "詳細表示",
   "button.websites": "Webサイト",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
   "footer.powered-by": "Powered by {name}",
   "header.nav.dashboard": "ダッシュボード",
   "header.nav.settings": "設定",
@@ -37,6 +42,7 @@
   "label.this-week": "今週",
   "label.this-year": "今年",
   "label.today": "今日",
+  "label.unknown": "Unknown",
   "label.username": "ユーザー名",
   "message.confirm-delete": "{target}を削除してもよろしいですか？",
   "message.copied": "コピーしました！",
diff --git a/lang/mn-MN.json b/lang/mn-MN.json
index 2b4d7743..6a399a4e 100644
--- a/lang/mn-MN.json
+++ b/lang/mn-MN.json
@@ -10,10 +10,15 @@
   "button.edit": "Засах",
   "button.login": "Нэвтрэх",
   "button.more": "Цааш",
+  "button.refresh": "Refresh",
   "button.save": "Хадгалах",
   "button.view-details": "Дэлгэрүүлж харах",
   "button.websites": "Вебүүд",
-  "footer.powered-by": "Powered by",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
+  "footer.powered-by": "Powered by {name}",
   "header.nav.dashboard": "Хянах самбар",
   "header.nav.settings": "Тохиргоо",
   "label.administrator": "Админ",
@@ -37,6 +42,7 @@
   "label.this-week": "Энэ долоо хоног",
   "label.this-year": "Энэ жил",
   "label.today": "Өнөөдөр",
+  "label.unknown": "Unknown",
   "label.username": "Хэрэглэгчийн нэр",
   "message.confirm-delete": "Та {target}-г устгахдаа итгэлтэй байна уу?",
   "message.copied": "Хуулсан!",
diff --git a/lang/nl-NL.json b/lang/nl-NL.json
index c535da48..f273b227 100644
--- a/lang/nl-NL.json
+++ b/lang/nl-NL.json
@@ -10,9 +10,14 @@
   "button.edit": "Bewerken",
   "button.login": "Inloggen",
   "button.more": "Toon meer",
+  "button.refresh": "Refresh",
   "button.save": "Opslaan",
   "button.view-details": "Meer details",
   "button.websites": "Websites",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
   "footer.powered-by": "mogelijk gemaakt door {name}",
   "header.nav.dashboard": "Dashboard",
   "header.nav.settings": "Instellingen",
@@ -37,6 +42,7 @@
   "label.this-week": "Deze week",
   "label.this-year": "Dit jaar",
   "label.today": "Vandaag",
+  "label.unknown": "Unknown",
   "label.username": "Gebruikersnaam",
   "message.confirm-delete": "Weet je zeker dat je {target} wilt verwijderen?",
   "message.copied": "Gekopiëerd!",
diff --git a/lang/ru-RU.json b/lang/ru-RU.json
index f254a58a..caf72c64 100644
--- a/lang/ru-RU.json
+++ b/lang/ru-RU.json
@@ -10,9 +10,14 @@
   "button.edit": "Редактировать",
   "button.login": "Войти",
   "button.more": "Больше",
+  "button.refresh": "Refresh",
   "button.save": "Сохранить",
   "button.view-details": "Посмотреть детали",
   "button.websites": "Сайты",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
   "footer.powered-by": "на движке {name}",
   "header.nav.dashboard": "Информационная панель",
   "header.nav.settings": "Настройки",
@@ -37,6 +42,7 @@
   "label.this-week": "Эта неделя",
   "label.this-year": "Этот год",
   "label.today": "Сегодня",
+  "label.unknown": "Unknown",
   "label.username": "Имя пользователя",
   "message.confirm-delete": "Вы уверены, что хотите удалить {target}?",
   "message.copied": "Скопировано!",
diff --git a/lang/tr-TR.json b/lang/tr-TR.json
index ff4de5b3..1ca1221e 100644
--- a/lang/tr-TR.json
+++ b/lang/tr-TR.json
@@ -10,9 +10,14 @@
   "button.edit": "Düzenle",
   "button.login": "Giriş Yap",
   "button.more": "Detaylı göster",
+  "button.refresh": "Refresh",
   "button.save": "Kaydet",
   "button.view-details": "Detayı incele",
   "button.websites": "Web siteleri",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
   "footer.powered-by": "Sağlayıcı: {name}",
   "header.nav.dashboard": "Kontrol Paneli",
   "header.nav.settings": "Ayarlar",
@@ -37,6 +42,7 @@
   "label.this-week": "Bu hafta",
   "label.this-year": "Bu yıl",
   "label.today": "Bugün",
+  "label.unknown": "Unknown",
   "label.username": "Kullanıcı adı",
   "message.confirm-delete": "{target} kaydını silmek istediğinizden emin misiniz?",
   "message.copied": "Panoya kopyalandı!",
diff --git a/lang/zh-CN.json b/lang/zh-CN.json
index 3fa4f1c6..e5348a1a 100644
--- a/lang/zh-CN.json
+++ b/lang/zh-CN.json
@@ -10,9 +10,14 @@
   "button.edit": "编辑",
   "button.login": "登录",
   "button.more": "更多",
+  "button.refresh": "Refresh",
   "button.save": "保存",
   "button.view-details": "查看更多",
   "button.websites": "网站",
+  "device.desktop": "Desktop",
+  "device.laptop": "Laptop",
+  "device.mobile": "Mobile",
+  "device.tablet": "Tablet",
   "footer.powered-by": "运行 {name}",
   "header.nav.dashboard": "仪表板",
   "header.nav.settings": "设置",
@@ -37,6 +42,7 @@
   "label.this-week": "本周",
   "label.this-year": "今年",
   "label.today": "今天",
+  "label.unknown": "Unknown",
   "label.username": "用户名",
   "message.confirm-delete": "你确定要删除{target}吗?",
   "message.copied": "复制成功!",
diff --git a/lib/constants.js b/lib/constants.js
index 4f5c6e4c..27fa2461 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -54,13 +54,6 @@ export const DESKTOP_OS = [
 
 export const MOBILE_OS = ['iOS', 'Android OS', 'BlackBerry OS', 'Windows Mobile', 'Amazon OS'];
 
-export const DEVICES = {
-  desktop: 'Desktop',
-  laptop: 'Laptop',
-  tablet: 'Tablet',
-  mobile: 'Mobile',
-};
-
 export const BROWSERS = {
   aol: 'AOL',
   edge: 'Edge',
diff --git a/lib/filters.js b/lib/filters.js
index 0430e437..e4d9e48c 100644
--- a/lib/filters.js
+++ b/lib/filters.js
@@ -1,5 +1,5 @@
 import firstBy from 'thenby';
-import { BROWSERS, ISO_COUNTRIES, DEVICES } from './constants';
+import { BROWSERS, ISO_COUNTRIES } from './constants';
 import { removeTrailingSlash, getDomainName } from './url';
 
 export const urlFilter = (data, { raw }) => {
@@ -118,15 +118,14 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {
 };
 
 export const browserFilter = data =>
-  data.map(({ x, y }) => ({ x: BROWSERS[x], y })).filter(({ x }) => x);
+  data.map(({ x, y }) => ({ x: BROWSERS[x] || x, y })).filter(({ x }) => x);
 
 export const osFilter = data => data.filter(({ x }) => x);
 
-export const deviceFilter = data =>
-  data.map(({ x, y }) => ({ x: DEVICES[x], y })).filter(({ x }) => x);
+export const deviceFilter = data => data.filter(({ x }) => x);
 
 export const countryFilter = data =>
-  data.map(({ x, y }) => ({ x: ISO_COUNTRIES[x], y })).filter(({ x }) => x);
+  data.map(({ x, y }) => ({ x: ISO_COUNTRIES[x] || x, y })).filter(({ x }) => x);
 
 export const percentFilter = data => {
   const total = data.reduce((n, { y }) => n + y, 0);
diff --git a/styles/index.css b/styles/index.css
index 619feecf..5435364f 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -56,25 +56,7 @@ select {
 a,
 a:active,
 a:visited {
-  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;
+  color: var(--primary400);
 }
 
 input[type='text'],