From ffd75ad4d577525a17ad9d429354a45797e0d17c Mon Sep 17 00:00:00 2001 From: MrZhiin Date: Sun, 20 Sep 2020 11:04:44 +0800 Subject: [PATCH 01/22] Update Simplified Chinese language --- lang/zh-CN.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lang/zh-CN.json b/lang/zh-CN.json index 9c6ddda4..a51a42be 100644 --- a/lang/zh-CN.json +++ b/lang/zh-CN.json @@ -11,7 +11,7 @@ "button.login": "登录", "button.more": "更多", "button.refresh": "刷新", - "button.reset": "Reset", + "button.reset": "重置", "button.save": "保存", "button.single-day": "单日", "button.view-details": "查看更多", @@ -21,7 +21,7 @@ "label.current-password": "目前密码", "label.custom-range": "自定义时间段", "label.dashboard": "仪表板", - "label.default-date-range": "Default date range", + "label.default-date-range": "默认日期范围", "label.domain": "域名", "label.enable-share-url": "激活共享链接", "label.invalid": "输入无效", @@ -40,7 +40,7 @@ "label.this-month": "本月", "label.this-week": "本周", "label.this-year": "今年", - "label.timezone": "Timezone", + "label.timezone": "时区", "label.today": "今天", "label.unknown": "未知", "label.username": "用户名", From c9a6e29cac739601978b9c19193dbe6fccca5d64 Mon Sep 17 00:00:00 2001 From: Kamino <67395018+err931@users.noreply.github.com> Date: Sun, 20 Sep 2020 15:04:31 +0900 Subject: [PATCH 02/22] Update Japanese lang --- lang/ja-JP.json | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/lang/ja-JP.json b/lang/ja-JP.json index 27d3ca34..b15e0c92 100644 --- a/lang/ja-JP.json +++ b/lang/ja-JP.json @@ -5,23 +5,23 @@ "button.cancel": "キャンセル", "button.change-password": "パスワード変更", "button.copy-to-clipboard": "クリップボードにコピー", - "button.date-range": "Date range", + "button.date-range": "期間", "button.delete": "削除", "button.edit": "編集", "button.login": "ログイン", "button.more": "さらに表示", - "button.refresh": "Refresh", - "button.reset": "Reset", + "button.refresh": "更新", + "button.reset": "リセット", "button.save": "保存", - "button.single-day": "Single day", + "button.single-day": "一日のみ", "button.view-details": "詳細表示", "label.accounts": "アカウント", "label.administrator": "管理者", "label.confirm-password": "パスワード（確認）", "label.current-password": "現在のパスワード", - "label.custom-range": "Custom range", + "label.custom-range": "期間を指定する", "label.dashboard": "ダッシュボード", - "label.default-date-range": "Default date range", + "label.default-date-range": "最初に表示する期間", "label.domain": "ドメイン", "label.enable-share-url": "共有リンクを有効にする", "label.invalid": "無効", @@ -40,9 +40,9 @@ "label.this-month": "今月", "label.this-week": "今週", "label.this-year": "今年", - "label.timezone": "Timezone", + "label.timezone": "タイムゾーン", "label.today": "今日", - "label.unknown": "Unknown", + "label.unknown": "不明", "label.username": "ユーザー名", "label.websites": "Webサイト", "message.active-users": "{x}人が閲覧中です。", @@ -67,10 +67,10 @@ "metrics.bounce-rate": "直帰率", "metrics.browsers": "ブラウザ", "metrics.countries": "国", - "metrics.device.desktop": "Desktop", - "metrics.device.laptop": "Laptop", - "metrics.device.mobile": "Mobile", - "metrics.device.tablet": "Tablet", + "metrics.device.desktop": "デスクトップ", + "metrics.device.laptop": "ノートPC", + "metrics.device.mobile": "携帯電話", + "metrics.device.tablet": "タブレット", "metrics.devices": "デバイス", "metrics.events": "イベント", "metrics.filter.combined": "パスまで", From d94c5c7dbe50b362ee14dcde6582f7b3c6cfdada Mon Sep 17 00:00:00 2001 From: ym-project Date: Sun, 20 Sep 2020 15:00:23 +0800 Subject: [PATCH 03/22] update russian --- lang/ru-RU.json | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/lang/ru-RU.json b/lang/ru-RU.json index 5cbedf0b..b9e19336 100644 --- a/lang/ru-RU.json +++ b/lang/ru-RU.json @@ -5,15 +5,15 @@ "button.cancel": "Отменить", "button.change-password": "Изменить пароль", "button.copy-to-clipboard": "Скопировать в буфер обмена", - "button.date-range": "Date range", + "button.date-range": "Диапазон дат", "button.delete": "Удалить", "button.edit": "Редактировать", "button.login": "Войти", "button.more": "Больше", - "button.refresh": "Refresh", - "button.reset": "Reset", + "button.refresh": "Обновить", + "button.reset": "Сбросить", "button.save": "Сохранить", - "button.single-day": "Single day", + "button.single-day": "Один день", "button.view-details": "Посмотреть детали", "label.accounts": "Аккаунты", "label.administrator": "Администратор", @@ -21,7 +21,7 @@ "label.current-password": "Текущий пароль", "label.custom-range": "Другой период", "label.dashboard": "Информационная панель", - "label.default-date-range": "Default date range", + "label.default-date-range": "Диапазон дат по-умолчанию", "label.domain": "Домен", "label.enable-share-url": "Разрешить делиться ссылкой", "label.invalid": "Некорректный", @@ -40,9 +40,9 @@ "label.this-month": "Этот месяц", "label.this-week": "Эта неделя", "label.this-year": "Этот год", - "label.timezone": "Timezone", + "label.timezone": "Часовой пояс", "label.today": "Сегодня", - "label.unknown": "Unknown", + "label.unknown": "Неизвестно", "label.username": "Имя пользователя", "label.websites": "Сайты", "message.active-users": "{x} текущих посетителей", @@ -57,7 +57,7 @@ "message.no-data-available": "Нет данных.", "message.no-websites-configured": "У вас нет настроенных сайтов.", "message.page-not-found": "Страница не найдена.", - "message.powered-by": "на движке {name}", + "message.powered-by": "На движке {name}", "message.save-success": "Успешно сохранено.", "message.share-url": "Это публичная ссылка для {target}.", "message.track-stats": "Чтобы отслеживать статистику для {target}, поместите следующий код в раздел {head} вашего сайта.", @@ -67,10 +67,10 @@ "metrics.bounce-rate": "Отказы", "metrics.browsers": "Браузеры", "metrics.countries": "Страны", - "metrics.device.desktop": "Desktop", - "metrics.device.laptop": "Laptop", - "metrics.device.mobile": "Mobile", - "metrics.device.tablet": "Tablet", + "metrics.device.desktop": "Настольный компьютер", + "metrics.device.laptop": "Ноутбук", + "metrics.device.mobile": "Смартфон", + "metrics.device.tablet": "Планшет", "metrics.devices": "Устройства", "metrics.events": "События", "metrics.filter.combined": "Объединенные", From aa265d1d426396788d52e49b874e69e132510c74 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sun, 20 Sep 2020 01:33:39 -0700 Subject: [PATCH 04/22] Dark mode. --- components/common/Button.module.css | 3 +- components/common/ButtonGroup.module.css | 4 +- components/common/Dropdown.module.css | 2 +- components/common/Link.module.css | 4 +- components/common/Menu.module.css | 4 +- components/common/Modal.module.css | 4 +- components/common/NavMenu.module.css | 2 + components/common/Toast.module.css | 2 +- components/common/WorldMap.js | 60 ++++++++++++------- components/common/WorldMap.module.css | 1 - components/forms/DatePickerForm.js | 2 +- components/layout/FormLayout.module.css | 2 +- components/layout/Header.js | 13 ++-- components/layout/Layout.js | 2 +- components/layout/Layout.module.css | 6 ++ components/metrics/BarChart.js | 26 +++++++- components/metrics/BarChart.module.css | 2 +- components/metrics/MetricsTable.module.css | 2 +- .../{common => settings}/LanguageButton.js | 4 +- .../LanguageButton.module.css | 0 components/settings/ThemeButton.js | 13 ++++ components/settings/TimezoneSetting.js | 4 +- hooks/useLocale.js | 8 +-- hooks/useTheme.js | 21 +++++++ lib/constants.js | 32 ++++++++++ package.json | 2 +- redux/actions/app.js | 17 ++++-- styles/index.css | 10 +++- styles/variables.css | 29 +++++++++ 29 files changed, 221 insertions(+), 60 deletions(-) create mode 100644 components/layout/Layout.module.css rename components/{common => settings}/LanguageButton.js (95%) rename components/{common => settings}/LanguageButton.module.css (100%) create mode 100644 components/settings/ThemeButton.js create mode 100644 hooks/useTheme.js diff --git a/components/common/Button.module.css b/components/common/Button.module.css index faae656b..351f5ecc 100644 --- a/components/common/Button.module.css +++ b/components/common/Button.module.css @@ -3,6 +3,7 @@ justify-content: center; align-items: center; font-size: var(--font-size-normal); + color: var(--gray900); background: var(--gray100); padding: 8px 16px; border-radius: 4px; @@ -18,7 +19,7 @@ } .button:active { - color: initial; + color: var(--gray700); } .large { diff --git a/components/common/ButtonGroup.module.css b/components/common/ButtonGroup.module.css index d18a8e9c..bc60f8d3 100644 --- a/components/common/ButtonGroup.module.css +++ b/components/common/ButtonGroup.module.css @@ -7,6 +7,7 @@ .group .button { border-radius: 0; + color: var(--gray800); background: var(--gray50); border-left: 1px solid var(--gray500); padding: 4px 8px; @@ -24,6 +25,7 @@ margin: 0; } -.selected { +.group .button.selected { + color: var(--gray900); font-weight: 600; } diff --git a/components/common/Dropdown.module.css b/components/common/Dropdown.module.css index 250e6c29..4b94f58f 100644 --- a/components/common/Dropdown.module.css +++ b/components/common/Dropdown.module.css @@ -20,5 +20,5 @@ } .icon { - padding-left: 10px; + padding-left: 20px; } diff --git a/components/common/Link.module.css b/components/common/Link.module.css index d6dc0536..24d8f84c 100644 --- a/components/common/Link.module.css +++ b/components/common/Link.module.css @@ -2,7 +2,7 @@ a.link, a.link:active, a.link:visited { position: relative; - color: #2c2c2c; + color: var(--gray900); text-decoration: none; } @@ -12,7 +12,7 @@ a.link:before { bottom: -2px; width: 0; height: 2px; - background: #2680eb; + background: var(--primary400); opacity: 0.5; transition: width 100ms; } diff --git a/components/common/Menu.module.css b/components/common/Menu.module.css index 9bcd642f..65551837 100644 --- a/components/common/Menu.module.css +++ b/components/common/Menu.module.css @@ -8,14 +8,14 @@ .option { font-size: var(--font-size-small); font-weight: normal; - background: #fff; + background: var(--gray50); padding: 4px 16px; cursor: pointer; white-space: nowrap; } .option:hover { - background: #f5f5f5; + background: var(--gray100); } .float { diff --git a/components/common/Modal.module.css b/components/common/Modal.module.css index 3702e774..bf2491c7 100644 --- a/components/common/Modal.module.css +++ b/components/common/Modal.module.css @@ -16,8 +16,8 @@ right: 0; bottom: 0; margin: auto; - background: var(--gray900); - opacity: 0.1; + background: #000; + opacity: 0.5; } .content { diff --git a/components/common/NavMenu.module.css b/components/common/NavMenu.module.css index c5d6c9db..7be73973 100644 --- a/components/common/NavMenu.module.css +++ b/components/common/NavMenu.module.css @@ -1,4 +1,5 @@ .menu { + color: var(--gray800); border: 1px solid var(--gray500); border-radius: 4px; overflow: hidden; @@ -16,5 +17,6 @@ } .selected { + color: var(--gray900); font-weight: 600; } diff --git a/components/common/Toast.module.css b/components/common/Toast.module.css index bfcd26bb..a65abfd1 100644 --- a/components/common/Toast.module.css +++ b/components/common/Toast.module.css @@ -9,7 +9,7 @@ justify-content: space-between; align-items: center; padding: 8px 16px; - color: var(--gray50); + color: var(--msgColor); background: var(--green400); margin: auto; z-index: 2; diff --git a/components/common/WorldMap.js b/components/common/WorldMap.js index f10dd542..f6eec8d6 100644 --- a/components/common/WorldMap.js +++ b/components/common/WorldMap.js @@ -1,44 +1,57 @@ -import React, { useState } from 'react'; +import React, { useState, useMemo } from 'react'; import ReactTooltip from 'react-tooltip'; +import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps'; import classNames from 'classnames'; import tinycolor from 'tinycolor2'; -import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps'; +import useTheme from 'hooks/useTheme'; +import { THEME_COLORS } from 'lib/constants'; import styles from './WorldMap.module.css'; const geoUrl = '/world-110m.json'; -export default function WorldMap({ - data, - className, - baseColor = '#e9f3fd', - fillColor = '#f5f5f5', - strokeColor = '#2680eb', - hoverColor = '#2680eb', -}) { +export default function WorldMap({ data, className }) { const [tooltip, setTooltip] = useState(); + const [theme] = useTheme(); + const colors = useMemo( + () => ({ + baseColor: THEME_COLORS[theme].primary, + fillColor: THEME_COLORS[theme].gray100, + strokeColor: THEME_COLORS[theme].primary, + hoverColor: THEME_COLORS[theme].primary, + }), + [theme], + ); function getFillColor(code) { - if (code === 'AQ') return '#ffffff'; + if (code === 'AQ') return; const country = data?.find(({ x }) => x === code); - return country ? tinycolor(baseColor).darken(country.z) : fillColor; + + if (!country) { + return colors.fillColor; + } + + return tinycolor(colors.baseColor)[theme === 'light' ? 'lighten' : 'darken']( + 40 * (1.0 - country.z / 100), + ); } - function getStrokeColor(code) { - return code === 'AQ' ? '#ffffff' : strokeColor; - } - - function getHoverColor(code) { - return code === 'AQ' ? '#ffffff' : hoverColor; + function getOpacity(code) { + return code === 'AQ' ? 0 : 1; } function handleHover({ ISO_A2: code, NAME: name }) { + if (code === 'AQ') return; const country = data?.find(({ x }) => x === code); setTooltip(`${name}: ${country?.y || 0} visitors`); } return ( -
- +
+ {({ geographies }) => { @@ -50,10 +63,11 @@ export default function WorldMap({ key={geo.rsmKey} geography={geo} fill={getFillColor(code)} - stroke={getStrokeColor(code)} + stroke={colors.strokeColor} + opacity={getOpacity(code)} style={{ default: { outline: 'none' }, - hover: { outline: 'none', fill: getHoverColor(code) }, + hover: { outline: 'none', fill: colors.hoverColor }, pressed: { outline: 'none' }, }} onMouseOver={() => handleHover(geo.properties)} @@ -65,7 +79,7 @@ export default function WorldMap({ - {tooltip} + {tooltip}
); } diff --git a/components/common/WorldMap.module.css b/components/common/WorldMap.module.css index bf84d697..c2528038 100644 --- a/components/common/WorldMap.module.css +++ b/components/common/WorldMap.module.css @@ -1,5 +1,4 @@ .container { overflow: hidden; position: relative; - background: #fff; } diff --git a/components/forms/DatePickerForm.js b/components/forms/DatePickerForm.js index f8b6416e..673cd7bd 100644 --- a/components/forms/DatePickerForm.js +++ b/components/forms/DatePickerForm.js @@ -6,7 +6,7 @@ import Button from 'components/common/Button'; import { FormButtons } from 'components/layout/FormLayout'; import { getDateRangeValues } from 'lib/date'; import styles from './DatePickerForm.module.css'; -import ButtonGroup from '../common/ButtonGroup'; +import ButtonGroup from 'components/common/ButtonGroup'; const FILTER_DAY = 0; const FILTER_RANGE = 1; diff --git a/components/layout/FormLayout.module.css b/components/layout/FormLayout.module.css index 0b82ee7c..90e1b8c2 100644 --- a/components/layout/FormLayout.module.css +++ b/components/layout/FormLayout.module.css @@ -39,7 +39,7 @@ } .msg { - color: var(--gray50); + color: var(--msgColor); background: var(--red400); font-size: var(--font-size-small); padding: 4px 8px; diff --git a/components/layout/Header.js b/components/layout/Header.js index f275bda3..46c9b3e4 100644 --- a/components/layout/Header.js +++ b/components/layout/Header.js @@ -3,11 +3,12 @@ import { FormattedMessage } from 'react-intl'; import { useSelector } from 'react-redux'; import classNames from 'classnames'; import Link from 'components/common/Link'; -import UserButton from '../common/UserButton'; -import Icon from '../common/Icon'; +import UserButton from 'components/common/UserButton'; +import Icon from 'components/common/Icon'; +import LanguageButton from 'components/settings/LanguageButton'; +import ThemeButton from 'components/settings/ThemeButton'; import Logo from 'assets/logo.svg'; import styles from './Header.module.css'; -import LanguageButton from '../common/LanguageButton'; export default function Header() { const user = useSelector(state => state.user); @@ -32,10 +33,14 @@ export default function Header() { + ) : ( - + <> + + + )}
diff --git a/components/layout/Layout.js b/components/layout/Layout.js index 021745cc..b16a0717 100644 --- a/components/layout/Layout.js +++ b/components/layout/Layout.js @@ -16,8 +16,8 @@ export default function Layout({ title, children, header = true, footer = true } {header &&
}
{children}
-
{footer &&