.dockerignore

@@ -4,4 +4,3 @@ Dockerfile
 .gitignore
 .DS_Store
 node_modules
-.idea

.eslintrc.json

@@ -46,7 +46,6 @@
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
     "import/no-anonymous-default-export": "off",
-    "import/no-named-as-default": "off",
     "@next/next/no-img-element": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-explicit-any": "off",

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -1,32 +0,0 @@
-name: "🐛 Bug Report"
-description: Create a bug report for Umami.
-body:
-  - type: textarea
-    attributes:
-      label: Describe the Bug
-      description: A clear and concise description of what the bug is.
-    validations:
-      required: true
-  - type: dropdown
-    attributes:
-      label: Database
-      description: What database are you using?
-      options:
-        - PostgreSQL
-        - MySQL
-        - Umami Cloud
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: Relevant log output
-      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
-      render: shell
-  - type: input
-    attributes:
-      label: Which browser are you using? (if relevant)
-      description: 'For example: Chrome, Edge, Firefox, etc'
-  - type: input
-    attributes:
-      label: How are you deploying your application? (if relevant)
-      description: 'For example: Vercel, Railway, Docker, etc'

.github/ISSUE_TEMPLATE/2.feature_request.yml

@@ -1,10 +0,0 @@
-name: "✨ Feature Request"
-description: Create a feature or enhancement request for Umami.
-labels: ['enhancement']
-body:
-  - type: textarea
-    attributes:
-      label: Describe the feature or enhancement
-      description: A clear and concise description of what the feature or enhancement is.
-    validations:
-      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -1,6 +0,0 @@
-
-blank_issues_enabled: false
-contact_links:
-  - name: "🤔 Ask a question"
-    url: https://github.com/umami-software/umami/discussions
-    about: Ask questions and discuss with other community members.

.github/workflows/cd-manual.yml

@@ -18,7 +18,7 @@ jobs:
         db-type: [postgresql, mysql]
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
 
       - uses: mr-smithers-excellent/docker-build-push@v6
         name: Build & push Docker image for ${{ matrix.db-type }}

.github/workflows/cd.yml

@@ -3,6 +3,7 @@ name: Create docker images
 on: [create]
 
 jobs:
+
   build:
     name: Build, push, and deploy
     if: ${{ startsWith(github.ref, 'refs/tags/v') }}
@@ -13,7 +14,7 @@ jobs:
         db-type: [postgresql, mysql]
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
 
       - name: Set env
         run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV

.gitignore

@@ -17,7 +17,6 @@ node_modules
 /build
 /public/script.js
 /geo
-/dist
 
 # misc
 .DS_Store

.prettierignore

@@ -1 +1 @@
-/public/script.js
+/public/

README.md

@@ -1,6 +1,6 @@
 # umami
 
-Umami MAMI is a simple, fast, privacy-focused alternative to Google Analytics.
+Umami is a simple, fast, privacy-focused alternative to Google Analytics.
 
 ## Getting started
 

components/common/EmptyPlaceholder.js

@@ -1,7 +1,7 @@
 import { Icon, Text, Flexbox } from 'react-basics';
 import Logo from 'assets/logo.svg';
 
-export function EmptyPlaceholder({ message, children }) {
+function EmptyPlaceholder({ message, children }) {
   return (
     <Flexbox direction="column" alignItems="center" justifyContent="center" gap={60} height={600}>
       <Icon size="xl">

components/common/ErrorBoundary.js

@@ -1,33 +0,0 @@
-/* eslint-disable no-console */
-import { ErrorBoundary as Boundary } from 'react-error-boundary';
-import { Button } from 'react-basics';
-import useMessages from 'hooks/useMessages';
-import styles from './ErrorBoundry.module.css';
-
-const logError = (error, info) => {
-  console.error(error, info.componentStack);
-};
-
-export function ErrorBoundary({ children }) {
-  const { formatMessage, messages } = useMessages();
-
-  const fallbackRender = ({ error, resetErrorBoundary }) => {
-    console.log({ error });
-    return (
-      <div className={styles.error} role="alert">
-        <h1>{formatMessage(messages.error)}</h1>
-        <h3>{error.message}</h3>
-        <pre>{error.stack}</pre>
-        <Button onClick={resetErrorBoundary}>OK</Button>
-      </div>
-    );
-  };
-
-  return (
-    <Boundary fallbackRender={fallbackRender} onError={logError}>
-      {children}
-    </Boundary>
-  );
-}
-
-export default ErrorBoundary;

components/common/ErrorBoundry.module.css

@@ -1,19 +0,0 @@
-.error {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  z-index: var(--z-index-overlay);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 600px;
-  gap: 20px;
-}
-
-.error button {
-  align-self: center;
-}

components/common/ErrorMessage.js

@@ -2,7 +2,7 @@ import { Icon, Icons, Text } from 'react-basics';
 import styles from './ErrorMessage.module.css';
 import useMessages from 'hooks/useMessages';
 
-export function ErrorMessage() {
+export default function ErrorMessage() {
   const { formatMessage, messages } = useMessages();
 
   return (
@@ -14,5 +14,3 @@ export function ErrorMessage() {
     </div>
   );
 }
-
-export default ErrorMessage;

components/common/Favicon.js

@@ -5,7 +5,7 @@ function getHostName(url) {
   return match && match.length > 1 ? match[1] : null;
 }
 
-export function Favicon({ domain, ...props }) {
+function Favicon({ domain, ...props }) {
   const hostName = domain ? getHostName(domain) : null;
 
   return hostName ? (

components/common/Favicon.module.css

@@ -1,3 +1,3 @@
 .favicon {
-  margin-inline-end: 8px;
+  margin-right: 8px;
 }

components/common/FilterButtons.js

@@ -1,6 +1,6 @@
 import { ButtonGroup, Button, Flexbox } from 'react-basics';
 
-export function FilterButtons({ items, selectedKey, onSelect }) {
+export default function FilterButtons({ items, selectedKey, onSelect }) {
   return (
     <Flexbox justifyContent="center">
       <ButtonGroup items={items} selectedKey={selectedKey} onSelect={onSelect}>
@@ -9,5 +9,3 @@ export function FilterButtons({ items, selectedKey, onSelect }) {
     </Flexbox>
   );
 }
-
-export default FilterButtons;

components/common/FilterLink.js

@@ -6,23 +6,24 @@ import usePageQuery from 'hooks/usePageQuery';
 import useMessages from 'hooks/useMessages';
 import styles from './FilterLink.module.css';
 
-export function FilterLink({ id, value, label, externalUrl, children, className }) {
+export default function FilterLink({ id, value, label, externalUrl }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl, query } = usePageQuery();
   const active = query[id] !== undefined;
   const selected = query[id] === value;
 
   return (
-    <div
+    <div className={styles.row}>
-      className={classNames(styles.row, className, {
+      {!value && `(${label || formatMessage(labels.unknown)})`}
+      {value && (
+        <Link
+          href={resolveUrl({ [id]: value })}
+          className={classNames(styles.label, {
             [styles.inactive]: active && !selected,
             [styles.active]: active && selected,
           })}
+          replace
         >
-      {children}
-      {!value && `(${label || formatMessage(labels.unknown)})`}
-      {value && (
-        <Link href={resolveUrl({ [id]: value })} className={styles.label} replace>
           {safeDecodeURI(label || value)}
         </Link>
       )}
@@ -36,5 +37,3 @@ export function FilterLink({ id, value, label, externalUrl, children, className
     </div>
   );
 }
-
-export default FilterLink;

components/common/FilterLink.module.css

@@ -1,25 +1,20 @@
 .row {
   display: flex;
   align-items: center;
-  gap: 10px;
 }
 
-.row.inactive {
+.row .inactive {
   color: var(--base500);
 }
 
-.row.inactive img {
+.row .active {
-  opacity: 0.35;
-}
-
-.row.active {
   color: var(--base900);
   font-weight: 600;
 }
 
 .row .link {
   display: none;
-  margin-inline-start: 20px;
+  margin-left: 20px;
 }
 
 .row .label {

components/common/HamburgerButton.js

@@ -5,7 +5,7 @@ import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 import useConfig from 'hooks/useConfig';
 
-export function HamburgerButton() {
+export default function HamburgerButton() {
   const { formatMessage, labels } = useMessages();
   const [active, setActive] = useState(false);
   const { cloudMode } = useConfig();
@@ -57,5 +57,3 @@ export function HamburgerButton() {
     </>
   );
 }
-
-export default HamburgerButton;

components/common/HoverTooltip.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Tooltip } from 'react-basics';
 import styles from './HoverTooltip.module.css';
 
-export function HoverTooltip({ tooltip }) {
+export default function HoverTooltip({ tooltip }) {
   const [position, setPosition] = useState({ x: -1000, y: -1000 });
 
   useEffect(() => {
@@ -23,5 +23,3 @@ export function HoverTooltip({ tooltip }) {
     </div>
   );
 }
-
-export default HoverTooltip;

components/common/MobileMenu.js

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import styles from './MobileMenu.module.css';
 
-export function MobileMenu({ items = [], onClose }) {
+export default function MobileMenu({ items = [], onClose }) {
   const { pathname } = useRouter();
 
   const Items = ({ items, className }) => (
@@ -34,5 +34,3 @@ export function MobileMenu({ items = [], onClose }) {
     </div>
   );
 }
-
-export default MobileMenu;

components/common/NoData.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import styles from './NoData.module.css';
 import useMessages from 'hooks/useMessages';
 
-export function NoData({ className }) {
+function NoData({ className }) {
   const { formatMessage, messages } = useMessages();
 
   return (

components/common/SettingsTable.js

@@ -1,7 +1,7 @@
 import { Table, TableHeader, TableBody, TableRow, TableCell, TableColumn } from 'react-basics';
 import styles from './SettingsTable.module.css';
 
-export function SettingsTable({ columns = [], data = [], children, cellRender }) {
+export default function SettingsTable({ columns = [], data = [], children, cellRender }) {
   return (
     <Table columns={columns} rows={data}>
       <TableHeader className={styles.header}>
@@ -34,5 +34,3 @@ export function SettingsTable({ columns = [], data = [], children, cellRender })
     </Table>
   );
 }
-
-export default SettingsTable;

components/common/UpdateNotice.js

@@ -6,7 +6,7 @@ import { REPO_URL, VERSION_CHECK } from 'lib/constants';
 import styles from './UpdateNotice.module.css';
 import useMessages from 'hooks/useMessages';
 
-export function UpdateNotice() {
+export default function UpdateNotice() {
   const { formatMessage, labels, messages } = useMessages();
   const { latest, checked, hasUpdate, releaseUrl } = useStore();
   const [dismissed, setDismissed] = useState(false);
@@ -50,5 +50,3 @@ export function UpdateNotice() {
     </Row>
   );
 }
-
-export default UpdateNotice;

components/common/WorldMap.js

@@ -3,16 +3,16 @@ import { useRouter } from 'next/router';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
 import { colord } from 'colord';
-import HoverTooltip from 'components/common/HoverTooltip';
-import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
 import useTheme from 'hooks/useTheme';
+import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
+import styles from './WorldMap.module.css';
 import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
+import HoverTooltip from './HoverTooltip';
 import { formatLongNumber } from 'lib/format';
 import { percentFilter } from 'lib/filters';
-import styles from './WorldMap.module.css';
 
-export function WorldMap({ data, className }) {
+function WorldMap({ data, className }) {
   const { basePath } = useRouter();
   const [tooltip, setTooltip] = useState();
   const [theme] = useTheme();

components/input/DateFilter.js

@@ -9,7 +9,7 @@ import useApi from 'hooks/useApi';
 import useDateRange from 'hooks/useDateRange';
 import useMessages from 'hooks/useMessages';
 
-export function DateFilter({ websiteId, value, className }) {
+function DateFilter({ websiteId, value, className }) {
   const { formatMessage, labels } = useMessages();
   const { get } = useApi();
   const [dateRange, setDateRange] = useDateRange(websiteId);
@@ -23,7 +23,7 @@ export function DateFilter({ websiteId, value, className }) {
       if (data) {
         setDateRange({ value, ...getDateRangeValues(new Date(data.createdAt), Date.now()) });
       }
-    } else if (value !== 'all') {
+    } else {
       setDateRange(value);
     }
   }
@@ -61,7 +61,7 @@ export function DateFilter({ websiteId, value, className }) {
       value: '90day',
     },
     { label: formatMessage(labels.thisYear), value: '1year' },
-    websiteId && {
+    {
       label: formatMessage(labels.allTime),
       value: 'all',
       divider: true,
@@ -71,7 +71,7 @@ export function DateFilter({ websiteId, value, className }) {
       value: 'custom',
       divider: true,
     },
-  ].filter(n => n);
+  ];
 
   const renderValue = value => {
     return value === 'custom' ? (

components/input/LanguageButton.js

@@ -5,8 +5,8 @@ import useLocale from 'hooks/useLocale';
 import Icons from 'components/icons';
 import styles from './LanguageButton.module.css';
 
-export function LanguageButton() {
+export default function LanguageButton() {
-  const { locale, saveLocale, dir } = useLocale();
+  const { locale, saveLocale } = useLocale();
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
 
   function handleSelect(value) {
@@ -20,7 +20,7 @@ export function LanguageButton() {
           <Icons.Globe />
         </Icon>
       </Button>
-      <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
+      <Popup position="bottom" alignment="end">
         <div className={styles.menu}>
           {items.map(({ value, label }) => {
             return (
@@ -43,5 +43,3 @@ export function LanguageButton() {
     </PopupTrigger>
   );
 }
-
-export default LanguageButton;

components/input/LogoutButton.js

@@ -2,7 +2,7 @@ import { Button, Icon, Icons, Tooltip } from 'react-basics';
 import Link from 'next/link';
 import useMessages from 'hooks/useMessages';
 
-export function LogoutButton({ tooltipPosition = 'top' }) {
+export default function LogoutButton({ tooltipPosition = 'top' }) {
   const { formatMessage, labels } = useMessages();
   return (
     <Link href="/logout">
@@ -16,5 +16,3 @@ export function LogoutButton({ tooltipPosition = 'top' }) {
     </Link>
   );
 }
-
-export default LogoutButton;

components/input/ProfileButton.js

@@ -5,14 +5,12 @@ import useMessages from 'hooks/useMessages';
 import useUser from 'hooks/useUser';
 import useConfig from 'hooks/useConfig';
 import styles from './ProfileButton.module.css';
-import useLocale from 'hooks/useLocale';
 
-export function ProfileButton() {
+export default function ProfileButton() {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const { cloudMode } = useConfig();
   const router = useRouter();
-  const { dir } = useLocale();
 
   const handleSelect = key => {
     if (key === 'profile') {
@@ -33,7 +31,7 @@ export function ProfileButton() {
           <Icons.ChevronDown />
         </Icon>
       </Button>
-      <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
+      <Popup position="bottom" alignment="end">
         <Menu variant="popup" onSelect={handleSelect} className={styles.menu}>
           <Item key="user" className={styles.item}>
             <Text>{user.username}</Text>
@@ -57,5 +55,3 @@ export function ProfileButton() {
     </PopupTrigger>
   );
 }
-
-export default ProfileButton;

components/input/RefreshButton.js

@@ -4,7 +4,7 @@ import useDateRange from 'hooks/useDateRange';
 import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 
-export function RefreshButton({ websiteId, isLoading }) {
+function RefreshButton({ websiteId, isLoading }) {
   const { formatMessage, labels } = useMessages();
   const [dateRange] = useDateRange(websiteId);
 

components/input/SettingsButton.js

@@ -5,7 +5,7 @@ import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 import styles from './SettingsButton.module.css';
 
-export function SettingsButton() {
+export default function SettingsButton() {
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -33,5 +33,3 @@ export function SettingsButton() {
     </PopupTrigger>
   );
 }
-
-export default SettingsButton;

components/input/ThemeButton.js

@@ -4,7 +4,7 @@ import useTheme from 'hooks/useTheme';
 import Icons from 'components/icons';
 import styles from './ThemeButton.module.css';
 
-export function ThemeButton() {
+export default function ThemeButton() {
   const [theme, setTheme] = useTheme();
 
   const transitions = useTransition(theme, {
@@ -34,5 +34,3 @@ export function ThemeButton() {
     </Button>
   );
 }
-
-export default ThemeButton;

components/input/WebsiteSelect.js

@@ -2,7 +2,7 @@ import { Dropdown, Item } from 'react-basics';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export function WebsiteSelect({ websiteId, onSelect }) {
+export default function WebsiteSelect({ websiteId, onSelect }) {
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const { data } = useQuery(['websites:me'], () => get('/me/websites'));
@@ -25,5 +25,3 @@ export function WebsiteSelect({ websiteId, onSelect }) {
     </Dropdown>
   );
 }
-
-export default WebsiteSelect;

components/layout/AppLayout.js

@@ -5,10 +5,9 @@ import NavBar from 'components/layout/NavBar';
 import UpdateNotice from 'components/common/UpdateNotice';
 import useRequireLogin from 'hooks/useRequireLogin';
 import useConfig from 'hooks/useConfig';
-import { CURRENT_VERSION } from 'lib/constants';
 import styles from './AppLayout.module.css';
 
-export function AppLayout({ title, children }) {
+export default function AppLayout({ title, children }) {
   const { user } = useRequireLogin();
   const config = useConfig();
   const { pathname } = useRouter();
@@ -20,7 +19,7 @@ export function AppLayout({ title, children }) {
   const allowUpdate = user?.isAdmin && !config?.updatesDisabled && !pathname.includes('/share/');
 
   return (
-    <div className={styles.layout} data-app-version={CURRENT_VERSION}>
+    <div className={styles.layout}>
       {allowUpdate && <UpdateNotice />}
       <Head>
         <title>{title ? `${title} | umami` : 'umami'}</title>
@@ -34,5 +33,3 @@ export function AppLayout({ title, children }) {
     </div>
   );
 }
-
-export default AppLayout;

components/layout/Footer.js

@@ -4,7 +4,7 @@ import { CURRENT_VERSION, HOMEPAGE_URL, REPO_URL } from 'lib/constants';
 import { labels } from 'components/messages';
 import styles from './Footer.module.css';
 
-export function Footer() {
+export default function Footer() {
   return (
     <footer className={styles.footer}>
       <Row>
@@ -29,5 +29,3 @@ export function Footer() {
     </footer>
   );
 }
-
-export default Footer;

components/layout/Grid.module.css

@@ -10,16 +10,16 @@
 }
 
 .row > .col {
-  border-inline-start: 1px solid var(--base300);
+  border-left: 1px solid var(--base300);
 }
 
 .row > .col:first-child {
-  border-inline-start: 0;
+  border-left: 0;
-  padding-inline-start: 0;
+  padding-left: 0;
 }
 
 .row > .col:last-child {
-  padding-inline-end: 0;
+  padding-right: 0;
 }
 
 @media only screen and (max-width: 992px) {
@@ -29,7 +29,7 @@
 
   .row > .col {
     border-top: 1px solid var(--base300);
-    border-inline-end: 0;
+    border-left: 0;
     padding: 20px 0;
   }
 }

components/layout/Header.js

@@ -6,7 +6,7 @@ import SettingsButton from 'components/input/SettingsButton';
 import Icons from 'components/icons';
 import styles from './Header.module.css';
 
-export function Header() {
+export default function Header() {
   return (
     <header className={styles.header}>
       <Row>
@@ -27,5 +27,3 @@ export function Header() {
     </header>
   );
 }
-
-export default Header;

components/layout/NavBar.js

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Icon, Text, Row, Column } from 'react-basics';
 import Link from 'next/link';
 import classNames from 'classnames';
@@ -11,7 +12,7 @@ import useMessages from 'hooks/useMessages';
 import { useRouter } from 'next/router';
 import HamburgerButton from '../common/HamburgerButton';
 
-export function NavBar() {
+export default function NavBar() {
   const { pathname } = useRouter();
   const { cloudMode } = useConfig();
   const { formatMessage, labels } = useMessages();
@@ -60,5 +61,3 @@ export function NavBar() {
     </div>
   );
 }
-
-export default NavBar;

components/layout/NavGroup.js

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import Icons from 'components/icons';
 import styles from './NavGroup.module.css';
 
-export function NavGroup({
+export default function NavGroup({
   title,
   items,
   defaultExpanded = true,
@@ -54,5 +54,3 @@ export function NavGroup({
     </div>
   );
 }
-
-export default NavGroup;

components/layout/Page.js

@@ -3,7 +3,7 @@ import { Banner, Loading } from 'react-basics';
 import useMessages from 'hooks/useMessages';
 import styles from './Page.module.css';
 
-export function Page({ className, error, loading, children }) {
+export default function Page({ className, error, loading, children }) {
   const { formatMessage, messages } = useMessages();
 
   if (error) {
@@ -16,5 +16,3 @@ export function Page({ className, error, loading, children }) {
 
   return <div className={classNames(styles.page, className)}>{children}</div>;
 }
-
-export default Page;

components/layout/PageHeader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './PageHeader.module.css';
 
-export function PageHeader({ title, children }) {
+export default function PageHeader({ title, children }) {
   return (
     <div className={styles.header}>
       <div className={styles.title}>{title}</div>
@@ -9,5 +9,3 @@ export function PageHeader({ title, children }) {
     </div>
   );
 }
-
-export default PageHeader;

components/layout/SettingsLayout.js

@@ -1,4 +1,5 @@
 import { Row, Column } from 'react-basics';
+import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import SideNav from './SideNav';
 import useUser from 'hooks/useUser';
@@ -6,7 +7,7 @@ import useMessages from 'hooks/useMessages';
 import useConfig from 'hooks/useConfig';
 import styles from './SettingsLayout.module.css';
 
-export function SettingsLayout({ children }) {
+export default function SettingsLayout({ children }) {
   const { user } = useUser();
   const { pathname } = useRouter();
   const { formatMessage, labels } = useMessages();
@@ -34,5 +35,3 @@ export function SettingsLayout({ children }) {
     </Row>
   );
 }
-
-export default SettingsLayout;

components/layout/ShareLayout.js

@@ -2,7 +2,7 @@ import { Container } from 'react-basics';
 import Header from './Header';
 import Footer from './Footer';
 
-export function ShareLayout({ children }) {
+export default function ShareLayout({ children }) {
   return (
     <Container>
       <Header />
@@ -11,5 +11,3 @@ export function ShareLayout({ children }) {
     </Container>
   );
 }
-
-export default ShareLayout;

components/layout/SideNav.js

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import styles from './SideNav.module.css';
 
-export function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) {
+export default function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) {
   const { asPath } = useRouter();
   return (
     <Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}>
@@ -21,5 +21,3 @@ export function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) {
     </Menu>
   );
 }
-
-export default SideNav;

components/messages.js

@@ -62,7 +62,6 @@ export const labels = defineMessages({
   queries: { id: 'label.queries', defaultMessage: 'Queries' },
   teams: { id: 'label.teams', defaultMessage: 'Teams' },
   analytics: { id: 'label.analytics', defaultMessage: 'Analytics' },
-  login: { id: 'label.login', defaultMessage: 'Login' },
   logout: { id: 'label.logout', defaultMessage: 'Logout' },
   singleDay: { id: 'label.single-day', defaultMessage: 'Single day' },
   dateRange: { id: 'label.date-range', defaultMessage: 'Date range' },
@@ -95,12 +94,12 @@ export const labels = defineMessages({
   thisMonth: { id: 'label.this-month', defaultMessage: 'This month' },
   thisYear: { id: 'label.this-year', defaultMessage: 'This year' },
   allTime: { id: 'label.all-time', defaultMessage: 'All time' },
-  customRange: { id: 'label.custom-range', defaultMessage: 'Custom range' },
+  customRange: { id: 'label.custom-range', defaultMessage: 'Custom-range' },
   selectWebsite: { id: 'label.select-website', defaultMessage: 'Select website' },
   all: { id: 'label.all', defaultMessage: 'All' },
   sessions: { id: 'label.sessions', defaultMessage: 'Sessions' },
   pageNotFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
-  activityLog: { id: 'label.activity-log', defaultMessage: 'Activity log' },
+  logs: { id: 'label.activity-log', defaultMessage: 'Activity log' },
   dismiss: { id: 'label.dismiss', defaultMessage: 'Dismiss' },
   poweredBy: { id: 'label.powered-by', defaultMessage: 'Powered by {name}' },
   pageViews: { id: 'label.page-views', defaultMessage: 'Page views' },

components/metrics/ActiveUsers.js

@@ -4,7 +4,7 @@ import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 import styles from './ActiveUsers.module.css';
 
-export function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
+export default function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
   const { formatMessage, messages } = useMessages();
   const { get, useQuery } = useApi();
   const { data } = useQuery(
@@ -34,5 +34,3 @@ export function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
     </StatusLight>
   );
 }
-
-export default ActiveUsers;

components/metrics/BarChart.js

@@ -11,7 +11,7 @@ import useTheme from 'hooks/useTheme';
 import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
 import styles from './BarChart.module.css';
 
-export function BarChart({
+export default function BarChart({
   datasets,
   unit,
   animationDuration = DEFAULT_ANIMATION_DURATION,
@@ -45,7 +45,7 @@ export function BarChart({
 
       switch (unit) {
         case 'minute':
-          return dateFormat(d, 'h:mm', locale);
+          return dateFormat(d, 'H:mm', locale);
         case 'hour':
           return dateFormat(d, 'p', locale);
         case 'day':
@@ -177,16 +177,15 @@ export function BarChart({
   const updateChart = () => {
     setTooltip(null);
 
-    datasets.forEach((dataset, index) => {
-      chart.current.data.datasets[index].data = dataset.data;
-      chart.current.data.datasets[index].label = dataset.label;
-    });
-
     chart.current.options = getOptions();
 
-    onUpdate(chart.current);
+    if (datasets.length) {
+      chart.current.data.datasets = datasets;
+    }
 
     chart.current.update();
+
+    onUpdate(chart.current);
   };
 
   useEffect(() => {
@@ -210,5 +209,3 @@ export function BarChart({
     </>
   );
 }
-
-export default BarChart;

components/metrics/BrowsersTable.js

@@ -3,7 +3,7 @@ import MetricsTable from 'components/metrics/MetricsTable';
 import { BROWSERS } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 
-export function BrowsersTable({ websiteId, ...props }) {
+export default function BrowsersTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: browser }) {
@@ -21,5 +21,3 @@ export function BrowsersTable({ websiteId, ...props }) {
     />
   );
 }
-
-export default BrowsersTable;

components/metrics/CitiesTable.js

@@ -4,7 +4,7 @@ import FilterLink from 'components/common/FilterLink';
 import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
 
-export function CitiesTable({ websiteId, ...props }) {
+export default function CitiesTable({ websiteId, ...props }) {
   const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
 
@@ -28,5 +28,3 @@ export function CitiesTable({ websiteId, ...props }) {
     />
   );
 }
-
-export default CitiesTable;

components/metrics/CountriesTable.js

@@ -4,21 +4,16 @@ import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
 
-export function CountriesTable({ websiteId, ...props }) {
+export default function CountriesTable({ websiteId, ...props }) {
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
   const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: code }) {
     return (
-      <FilterLink
+      <div className={locale}>
-        id="country"
+        <FilterLink id="country" value={countryNames[code] && code} label={countryNames[code]} />
-        className={locale}
+      </div>
-        value={countryNames[code] && code}
-        label={countryNames[code]}
-      >
-        <img src={`/images/flags/${code?.toLowerCase() || 'xx'}.png`} alt={code} />
-      </FilterLink>
     );
   }
 
@@ -33,5 +28,3 @@ export function CountriesTable({ websiteId, ...props }) {
     />
   );
 }
-
-export default CountriesTable;

components/metrics/DataTable.js

@@ -3,12 +3,13 @@ import useMeasure from 'react-use-measure';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
 import NoData from 'components/common/NoData';
 import { formatNumber, formatLongNumber } from 'lib/format';
 import styles from './DataTable.module.css';
 import useMessages from '../../hooks/useMessages';
 
-export function DataTable({
+export default function DataTable({
   data = [],
   title,
   metric,
@@ -101,5 +102,3 @@ const AnimatedRow = ({
     </div>
   );
 };
-
-export default DataTable;

components/metrics/DataTable.module.css

@@ -68,8 +68,8 @@
 
 .value {
   width: 50px;
-  text-align: end;
+  text-align: right;
-  margin-inline-end: 10px;
+  margin-right: 10px;
   font-weight: 600;
   cursor: pointer;
 }
@@ -79,7 +79,7 @@
   width: 50px;
   color: var(--base600);
   border-left: 1px solid var(--base600);
-  padding-inline-start: 10px;
+  padding-left: 10px;
   z-index: 1;
 }
 

components/metrics/DatePickerForm.js

@@ -8,7 +8,7 @@ import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 import styles from './DatePickerForm.module.css';
 
-export function DatePickerForm({
+export default function DatePickerForm({
   startDate: defaultStartDate,
   endDate: defaultEndDate,
   minDate,
@@ -78,5 +78,3 @@ export function DatePickerForm({
     </div>
   );
 }
-
-export default DatePickerForm;

components/metrics/DevicesTable.js

@@ -2,7 +2,7 @@ import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
 
-export function DevicesTable({ websiteId, ...props }) {
+export default function DevicesTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: device }) {
@@ -26,5 +26,3 @@ export function DevicesTable({ websiteId, ...props }) {
     />
   );
 }
-
-export default DevicesTable;

components/metrics/EventsChart.js

@@ -9,7 +9,7 @@ import useTimezone from 'hooks/useTimezone';
 import usePageQuery from 'hooks/usePageQuery';
 import { EVENT_COLORS } from 'lib/constants';
 
-export function EventsChart({ websiteId, className, token }) {
+export default function EventsChart({ websiteId, className, token }) {
   const { get, useQuery } = useApi();
   const [{ startDate, endDate, unit, modified }] = useDateRange(websiteId);
   const [timezone] = useTimezone();
@@ -76,5 +76,3 @@ export function EventsChart({ websiteId, className, token }) {
     />
   );
 }
-
-export default EventsChart;

components/metrics/EventsTable.js

@@ -1,7 +1,7 @@
 import MetricsTable from './MetricsTable';
 import useMessages from 'hooks/useMessages';
 
-export function EventsTable({ websiteId, ...props }) {
+export default function EventsTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   function handleDataLoad(data) {
@@ -19,5 +19,3 @@ export function EventsTable({ websiteId, ...props }) {
     />
   );
 }
-
-export default EventsTable;

components/metrics/FilterTags.js

@@ -4,7 +4,7 @@ import usePageQuery from 'hooks/usePageQuery';
 import styles from './FilterTags.module.css';
 import useMessages from 'hooks/useMessages';
 
-export function FilterTags({ params }) {
+export default function FilterTags({ params }) {
   const { formatMessage, labels } = useMessages();
   const {
     router,
@@ -50,5 +50,3 @@ export function FilterTags({ params }) {
     </div>
   );
 }
-
-export default FilterTags;

components/metrics/LanguagesTable.js

@@ -4,7 +4,7 @@ import useLanguageNames from 'hooks/useLanguageNames';
 import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
 
-export function LanguagesTable({ websiteId, onDataLoad, ...props }) {
+export default function LanguagesTable({ websiteId, onDataLoad, ...props }) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
   const languageNames = useLanguageNames(locale);
@@ -25,5 +25,3 @@ export function LanguagesTable({ websiteId, onDataLoad, ...props }) {
     />
   );
 }
-
-export default LanguagesTable;

components/metrics/Legend.js

@@ -6,7 +6,7 @@ import useLocale from 'hooks/useLocale';
 import useForceUpdate from 'hooks/useForceUpdate';
 import styles from './Legend.module.css';
 
-export function Legend({ chart }) {
+export default function Legend({ chart }) {
   const { locale } = useLocale();
   const forceUpdate = useForceUpdate();
 
@@ -48,5 +48,3 @@ export function Legend({ chart }) {
     </div>
   );
 }
-
-export default Legend;

components/metrics/Legend.module.css

@@ -13,7 +13,7 @@
 }
 
 .label + .label {
-  margin-inline-start: 20px;
+  margin-left: 20px;
 }
 
 .hidden {

components/metrics/MetricCard.js

@@ -3,7 +3,7 @@ import { useSpring, animated } from 'react-spring';
 import { formatNumber } from 'lib/format';
 import styles from './MetricCard.module.css';
 
-export const MetricCard = ({
+const MetricCard = ({
   value = 0,
   change = 0,
   label,

components/metrics/MetricsBar.js

@@ -9,7 +9,7 @@ import MetricCard from './MetricCard';
 import useMessages from 'hooks/useMessages';
 import styles from './MetricsBar.module.css';
 
-export function MetricsBar({ websiteId }) {
+export default function MetricsBar({ websiteId }) {
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
   const [dateRange] = useDateRange(websiteId);
@@ -111,5 +111,3 @@ export function MetricsBar({ websiteId }) {
     </div>
   );
 }
-
-export default MetricsBar;

components/metrics/MetricsTable.js

@@ -13,9 +13,8 @@ import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 import styles from './MetricsTable.module.css';
-import useLocale from 'hooks/useLocale';
 
-export function MetricsTable({
+export default function MetricsTable({
   websiteId,
   type,
   className,
@@ -70,7 +69,6 @@ export function MetricsTable({
     }
     return [];
   }, [data, error, dataFilter, filterOptions]);
-  const { dir } = useLocale();
 
   return (
     <div className={classNames(styles.container, className)}>
@@ -82,7 +80,7 @@ export function MetricsTable({
           <Link href={router.pathname} as={resolveUrl({ view: type })}>
             <Button variant="quiet">
               <Text>{formatMessage(labels.more)}</Text>
-              <Icon size="sm" rotate={dir === 'rtl' ? 180 : 0}>
+              <Icon size="sm">
                 <Icons.ArrowRight />
               </Icon>
             </Button>
@@ -92,5 +90,3 @@ export function MetricsTable({
     </div>
   );
 }
-
-export default MetricsTable;

components/metrics/OSTable.js

@@ -2,7 +2,7 @@ import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
 
-export function OSTable({ websiteId, ...props }) {
+export default function OSTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   function renderLink({ x: os }) {
@@ -20,5 +20,3 @@ export function OSTable({ websiteId, ...props }) {
     />
   );
 }
-
-export default OSTable;

components/metrics/PagesTable.js

@@ -5,7 +5,7 @@ import useMessages from 'hooks/useMessages';
 import usePageQuery from 'hooks/usePageQuery';
 import { emptyFilter } from 'lib/filters';
 
-export function PagesTable({ websiteId, showFilters, ...props }) {
+export default function PagesTable({ websiteId, showFilters, ...props }) {
   const {
     router,
     resolveUrl,
@@ -47,5 +47,3 @@ export function PagesTable({ websiteId, showFilters, ...props }) {
     </>
   );
 }
-
-export default PagesTable;

components/metrics/PageviewsChart.js

@@ -6,7 +6,15 @@ import useTheme from 'hooks/useTheme';
 import useMessages from 'hooks/useMessages';
 import useLocale from 'hooks/useLocale';
 
-export function PageviewsChart({ websiteId, data, unit, records, className, loading, ...props }) {
+export default function PageviewsChart({
+  websiteId,
+  data,
+  unit,
+  records,
+  className,
+  loading,
+  ...props
+}) {
   const { formatMessage, labels } = useMessages();
   const [theme] = useTheme();
   const { locale } = useLocale();
@@ -60,5 +68,3 @@ export function PageviewsChart({ websiteId, data, unit, records, className, load
     />
   );
 }
-
-export default PageviewsChart;

components/metrics/QueryParametersTable.js

@@ -12,7 +12,7 @@ const filters = {
   [FILTER_COMBINED]: paramFilter,
 };
 
-export function QueryParametersTable({ websiteId, showFilters, ...props }) {
+export default function QueryParametersTable({ websiteId, showFilters, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
   const { formatMessage, labels } = useMessages();
 
@@ -49,5 +49,3 @@ export function QueryParametersTable({ websiteId, showFilters, ...props }) {
     </>
   );
 }
-
-export default QueryParametersTable;

components/metrics/RealtimeChart.js

@@ -23,7 +23,7 @@ function mapData(data) {
   return arr;
 }
 
-export function RealtimeChart({ data, unit, ...props }) {
+export default function RealtimeChart({ data, unit, ...props }) {
   const endDate = startOfMinute(new Date());
   const startDate = subMinutes(endDate, REALTIME_RANGE);
   const prevEndDate = useRef(endDate);
@@ -58,5 +58,3 @@ export function RealtimeChart({ data, unit, ...props }) {
     />
   );
 }
-
-export default RealtimeChart;

components/metrics/ReferrersTable.js

@@ -2,7 +2,7 @@ import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
 
-export function ReferrersTable({ websiteId, ...props }) {
+export default function ReferrersTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   const renderLink = ({ x: referrer }) => {
@@ -29,5 +29,3 @@ export function ReferrersTable({ websiteId, ...props }) {
     </>
   );
 }
-
-export default ReferrersTable;

components/metrics/RegionsTable.js

@@ -3,25 +3,19 @@ import { emptyFilter } from 'lib/filters';
 import FilterLink from 'components/common/FilterLink';
 import useLocale from 'hooks/useLocale';
 import useMessages from 'hooks/useMessages';
-import useCountryNames from 'hooks/useCountryNames';
 import regions from 'public/iso-3166-2.json';
 
-export function RegionsTable({ websiteId, ...props }) {
+export default function RegionsTable({ websiteId, ...props }) {
   const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
-  const countryNames = useCountryNames(locale);
 
-  const renderLabel = x => {
+  function renderLink({ x }) {
-    return regions[x] ? `${regions[x]}, ${countryNames[x.split('-')[0]]}` : x;
-  };
-
-  const renderLink = ({ x: code }) => {
     return (
-      <FilterLink id="region" className={locale} value={code} label={renderLabel(code)}>
+      <div className={locale}>
-        <img src={`/images/flags/${code?.split('-')?.[0]?.toLowerCase() || 'xx'}.png`} alt={code} />
+        <FilterLink id="region" value={x} label={regions[x] || x} />
-      </FilterLink>
+      </div>
     );
-  };
+  }
 
   return (
     <MetricsTable
@@ -35,5 +29,3 @@ export function RegionsTable({ websiteId, ...props }) {
     />
   );
 }
-
-export default RegionsTable;

components/metrics/ScreenTable.js

@@ -1,7 +1,7 @@
 import MetricsTable from './MetricsTable';
 import useMessages from 'hooks/useMessages';
 
-export function ScreenTable({ websiteId, ...props }) {
+export default function ScreenTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -14,5 +14,3 @@ export function ScreenTable({ websiteId, ...props }) {
     />
   );
 }
-
-export default ScreenTable;

components/metrics/WebsiteChart.js

@@ -18,9 +18,8 @@ import Icons from 'components/icons';
 import useSticky from 'hooks/useSticky';
 import useMessages from 'hooks/useMessages';
 import styles from './WebsiteChart.module.css';
-import useLocale from 'hooks/useLocale';
 
-export function WebsiteChart({
+export default function WebsiteChart({
   websiteId,
   name,
   domain,
@@ -73,7 +72,6 @@ export function WebsiteChart({
     return { pageviews: [], sessions: [] };
   }, [data, modified]);
 
-  const { dir } = useLocale();
   return (
     <>
       <WebsiteHeader websiteId={websiteId} name={name} domain={domain}>
@@ -82,10 +80,8 @@ export function WebsiteChart({
             <Button variant="primary">
               <Text>{formatMessage(labels.viewDetails)}</Text>
               <Icon>
-                <Icon rotate={dir === 'rtl' ? 180 : 0}>
                 <Icons.ArrowRight />
               </Icon>
-              </Icon>
             </Button>
           </Link>
         )}
@@ -128,5 +124,3 @@ export function WebsiteChart({
     </>
   );
 }
-
-export default WebsiteChart;

components/metrics/WebsiteHeader.js

@@ -3,7 +3,7 @@ import Favicon from 'components/common/Favicon';
 import ActiveUsers from './ActiveUsers';
 import styles from './WebsiteHeader.module.css';
 
-export function WebsiteHeader({ websiteId, name, domain, children }) {
+export default function WebsiteHeader({ websiteId, name, domain, children }) {
   return (
     <Row className={styles.header} justifyContent="center">
       <Column className={styles.title} variant="two">
@@ -17,5 +17,3 @@ export function WebsiteHeader({ websiteId, name, domain, children }) {
     </Row>
   );
 }
-
-export default WebsiteHeader;

components/pages/console/TestConsole.js

@@ -11,7 +11,7 @@ import Script from 'next/script';
 import { Button, Column, Row } from 'react-basics';
 import styles from './TestConsole.module.css';
 
-export function TestConsole() {
+export default function TestConsole() {
   const { get, useQuery } = useApi();
   const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
   const router = useRouter();
@@ -132,5 +132,3 @@ export function TestConsole() {
     </Page>
   );
 }
-
-export default TestConsole;

components/pages/dashboard/Dashboard.js

@@ -10,9 +10,8 @@ import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import useApi from 'hooks/useApi';
 import useDashboard from 'store/dashboard';
 import useMessages from 'hooks/useMessages';
-import useLocale from 'hooks/useLocale';
 
-export function Dashboard({ userId }) {
+export default function Dashboard({ userId }) {
   const { formatMessage, labels, messages } = useMessages();
   const dashboard = useDashboard();
   const { showCharts, limit, editing } = dashboard;
@@ -20,7 +19,6 @@ export function Dashboard({ userId }) {
   const { get, useQuery } = useApi();
   const { data, isLoading, error } = useQuery(['websites'], () => get('/websites', { userId }));
   const hasData = data && data.length !== 0;
-  const { dir } = useLocale();
 
   function handleMore() {
     setMax(max + limit);
@@ -35,7 +33,7 @@ export function Dashboard({ userId }) {
         <EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}>
           <Link href="/settings/websites">
             <Button>
-              <Icon rotate={dir === 'rtl' ? 180 : 0}>
+              <Icon>
                 <Icons.ArrowRight />
               </Icon>
               <Text>{formatMessage(messages.goToSettings)}</Text>
@@ -50,7 +48,7 @@ export function Dashboard({ userId }) {
           {max < data.length && (
             <Flexbox justifyContent="center">
               <Button onClick={handleMore}>
-                <Icon rotate={dir === 'rtl' ? 180 : 0}>
+                <Icon>
                   <Icons.More />
                 </Icon>
                 <Text>{formatMessage(labels.more)}</Text>
@@ -62,5 +60,3 @@ export function Dashboard({ userId }) {
     </Page>
   );
 }
-
-export default Dashboard;

components/pages/dashboard/DashboardEdit.js

@@ -9,7 +9,7 @@ import styles from './DashboardEdit.module.css';
 
 const dragId = 'dashboard-website-ordering';
 
-export function DashboardEdit({ websites }) {
+export default function DashboardEdit({ websites }) {
   const settings = useDashboard();
   const { websiteOrder } = settings;
   const { formatMessage, labels } = useMessages();
@@ -98,5 +98,3 @@ export function DashboardEdit({ websites }) {
     </>
   );
 }
-
-export default DashboardEdit;

components/pages/dashboard/DashboardSettingsButton.js

@@ -3,7 +3,7 @@ import Icons from 'components/icons';
 import { saveDashboard } from 'store/dashboard';
 import useMessages from 'hooks/useMessages';
 
-export function DashboardSettingsButton() {
+export default function DashboardSettingsButton() {
   const { formatMessage, labels } = useMessages();
 
   const menuOptions = [
@@ -42,5 +42,3 @@ export function DashboardSettingsButton() {
     </PopupTrigger>
   );
 }
-
-export default DashboardSettingsButton;

components/pages/login/LoginForm.js

@@ -17,7 +17,7 @@ import useMessages from 'hooks/useMessages';
 import Logo from 'assets/logo.svg';
 import styles from './LoginForm.module.css';
 
-export function LoginForm() {
+export default function LoginForm() {
   const { formatMessage, labels, getMessage } = useMessages();
   const router = useRouter();
   const { post } = useApi();
@@ -53,12 +53,10 @@ export function LoginForm() {
         </FormRow>
         <FormButtons>
           <SubmitButton className={styles.button} variant="primary" disabled={isLoading}>
-            {formatMessage(labels.login)}
+            Log in
           </SubmitButton>
         </FormButtons>
       </Form>
     </div>
   );
 }
-
-export default LoginForm;

components/pages/login/LoginLayout.js

@@ -2,7 +2,7 @@ import Head from 'next/head';
 import useLocale from 'hooks/useLocale';
 import styles from './LoginLayout.module.css';
 
-export function LoginLayout({ children }) {
+export default function LoginLayout({ children }) {
   const { dir } = useLocale();
 
   return (
@@ -14,5 +14,3 @@ export function LoginLayout({ children }) {
     </div>
   );
 }
-
-export default LoginLayout;

components/pages/realtime/RealtimeCountries.js

@@ -4,7 +4,7 @@ import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import useMessages from 'hooks/useMessages';
 
-export function RealtimeCountries({ data }) {
+export default function RealtimeCountries({ data }) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
@@ -23,5 +23,3 @@ export function RealtimeCountries({ data }) {
     />
   );
 }
-
-export default RealtimeCountries;

components/pages/realtime/RealtimeDashboard.js

@@ -25,7 +25,7 @@ function mergeData(state = [], data = [], time) {
     .filter(({ timestamp }) => timestamp >= time);
 }
 
-export function RealtimeDashboard({ websiteId }) {
+export default function RealtimeDashboard({ websiteId }) {
   const { formatMessage, labels } = useMessages();
   const router = useRouter();
   const [currentData, setCurrentData] = useState();
@@ -63,7 +63,7 @@ export function RealtimeDashboard({ websiteId }) {
     currentData.countries = percentFilter(
       currentData.sessions
         .reduce((arr, data) => {
-          if (!arr.find(({ id }) => id === data.id)) {
+          if (!arr.find(({ sessionId }) => sessionId === data.sessionId)) {
             return arr.concat(data);
           }
           return arr;
@@ -84,7 +84,7 @@ export function RealtimeDashboard({ websiteId }) {
     );
 
     currentData.visitors = currentData.sessions.reduce((arr, val) => {
-      if (!arr.find(({ id }) => id === val.id)) {
+      if (!arr.find(({ sessionId }) => sessionId === val.sessionId)) {
         return arr.concat(val);
       }
       return arr;
@@ -125,5 +125,3 @@ export function RealtimeDashboard({ websiteId }) {
     </Page>
   );
 }
-
-export default RealtimeDashboard;

components/pages/realtime/RealtimeHeader.js

@@ -2,7 +2,7 @@ import MetricCard from 'components/metrics/MetricCard';
 import useMessages from 'hooks/useMessages';
 import styles from './RealtimeHeader.module.css';
 
-export function RealtimeHeader({ data = {} }) {
+export default function RealtimeHeader({ data = {} }) {
   const { formatMessage, labels } = useMessages();
   const { pageviews, visitors, events, countries } = data;
 
@@ -37,5 +37,3 @@ export function RealtimeHeader({ data = {} }) {
     </div>
   );
 }
-
-export default RealtimeHeader;

components/pages/realtime/RealtimeHome.js

@@ -6,7 +6,7 @@ import useApi from 'hooks/useApi';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import useMessages from 'hooks/useMessages';
 
-export function RealtimeHome() {
+export default function RealtimeHome() {
   const { formatMessage, labels, messages } = useMessages();
   const { get, useQuery } = useApi();
   const router = useRouter();
@@ -27,5 +27,3 @@ export function RealtimeHome() {
     </Page>
   );
 }
-
-export default RealtimeHome;

components/pages/realtime/RealtimeLog.js

@@ -25,7 +25,7 @@ const icons = {
   [TYPE_EVENT]: <Icons.Bolt />,
 };
 
-export function RealtimeLog({ data, websiteDomain }) {
+export default function RealtimeLog({ data, websiteDomain }) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
@@ -142,7 +142,7 @@ export function RealtimeLog({ data, websiteDomain }) {
   return (
     <div className={styles.table}>
       <FilterButtons items={buttons} selectedKey={filter} onSelect={setFilter} />
-      <div className={styles.header}>{formatMessage(labels.activityLog)}</div>
+      <div className={styles.header}>{formatMessage(labels.logs)}</div>
       <div className={styles.body}>
         {logs?.length === 0 && <NoData />}
         {logs?.length > 0 && (
@@ -154,5 +154,3 @@ export function RealtimeLog({ data, websiteDomain }) {
     </div>
   );
 }
-
-export default RealtimeLog;

components/pages/realtime/RealtimeLog.module.css

@@ -9,7 +9,7 @@
   align-items: center;
   justify-content: space-between;
   font-size: var(--font-size-md);
-  line-height: 40px;
+  line-height: 50px;
   font-weight: 700;
 }
 
@@ -42,7 +42,6 @@
 
 .detail {
   display: flex;
-  align-items: center;
   flex: 1;
   gap: 10px;
   white-space: nowrap;

components/pages/realtime/RealtimeUrls.js

@@ -6,7 +6,7 @@ import DataTable from 'components/metrics/DataTable';
 import { FILTER_PAGES, FILTER_REFERRERS } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 
-export function RealtimeUrls({ websiteDomain, data = {} }) {
+export default function RealtimeUrls({ websiteDomain, data = {} }) {
   const { formatMessage, labels } = useMessages();
   const { pageviews } = data;
   const [filter, setFilter] = useState(FILTER_REFERRERS);
@@ -97,5 +97,3 @@ export function RealtimeUrls({ websiteDomain, data = {} }) {
     </>
   );
 }
-
-export default RealtimeUrls;

components/pages/settings/profile/DateRangeSetting.js

@@ -4,7 +4,7 @@ import useDateRange from 'hooks/useDateRange';
 import { DEFAULT_DATE_RANGE } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
 
-export function DateRangeSetting() {
+export default function DateRangeSetting() {
   const { formatMessage, labels } = useMessages();
   const [dateRange, setDateRange] = useDateRange();
   const { startDate, endDate, value } = dateRange;
@@ -18,5 +18,3 @@ export function DateRangeSetting() {
     </Flexbox>
   );
 }
-
-export default DateRangeSetting;

components/pages/settings/profile/LanguageSetting.js

@@ -4,7 +4,7 @@ import { DEFAULT_LOCALE } from 'lib/constants';
 import { languages } from 'lib/lang';
 import useMessages from 'hooks/useMessages';
 
-export function LanguageSetting() {
+export default function LanguageSetting() {
   const { formatMessage, labels } = useMessages();
   const { locale, saveLocale } = useLocale();
   const options = Object.keys(languages);
@@ -28,5 +28,3 @@ export function LanguageSetting() {
     </Flexbox>
   );
 }
-
-export default LanguageSetting;

components/pages/settings/profile/PasswordChangeButton.js

@@ -3,7 +3,7 @@ import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm
 import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 
-export function PasswordChangeButton() {
+export default function PasswordChangeButton() {
   const { formatMessage, labels, messages } = useMessages();
   const { toast, showToast } = useToast();
 
@@ -28,5 +28,3 @@ export function PasswordChangeButton() {
     </>
   );
 }
-
-export default PasswordChangeButton;

components/pages/settings/profile/PasswordEditForm.js

@@ -3,7 +3,7 @@ import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 're
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export function PasswordEditForm({ onSave, onClose }) {
+export default function PasswordEditForm({ onSave, onClose }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/me/password', data));
@@ -64,5 +64,3 @@ export function PasswordEditForm({ onSave, onClose }) {
     </Form>
   );
 }
-
-export default PasswordEditForm;

components/pages/settings/profile/ProfileDetails.js

@@ -8,7 +8,7 @@ import useUser from 'hooks/useUser';
 import useMessages from 'hooks/useMessages';
 import useConfig from 'hooks/useConfig';
 
-export function ProfileDetails() {
+export default function ProfileDetails() {
   const { user } = useUser();
   const { formatMessage, labels } = useMessages();
   const { cloudMode } = useConfig();
@@ -45,5 +45,3 @@ export function ProfileDetails() {
     </Form>
   );
 }
-
-export default ProfileDetails;

components/pages/settings/profile/ProfileSettings.js

@@ -3,7 +3,7 @@ import PageHeader from 'components/layout/PageHeader';
 import ProfileDetails from './ProfileDetails';
 import useMessages from 'hooks/useMessages';
 
-export function ProfileSettings() {
+export default function ProfileSettings() {
   const { formatMessage, labels } = useMessages();
 
   return (
@@ -13,5 +13,3 @@ export function ProfileSettings() {
     </Page>
   );
 }
-
-export default ProfileSettings;

components/pages/settings/profile/ThemeSetting.js

@@ -5,7 +5,7 @@ import Sun from 'assets/sun.svg';
 import Moon from 'assets/moon.svg';
 import styles from './ThemeSetting.module.css';
 
-export function ThemeSetting() {
+export default function ThemeSetting() {
   const [theme, setTheme] = useTheme();
 
   return (
@@ -29,5 +29,3 @@ export function ThemeSetting() {
     </div>
   );
 }
-
-export default ThemeSetting;

components/pages/settings/profile/TimezoneSetting.js

@@ -4,7 +4,7 @@ import useTimezone from 'hooks/useTimezone';
 import useMessages from 'hooks/useMessages';
 import { getTimezone } from 'lib/date';
 
-export function TimezoneSetting() {
+export default function TimezoneSetting() {
   const { formatMessage, labels } = useMessages();
   const [timezone, saveTimezone] = useTimezone();
   const options = listTimeZones();
@@ -26,5 +26,3 @@ export function TimezoneSetting() {
     </Flexbox>
   );
 }
-
-export default TimezoneSetting;

components/pages/settings/teams/JoinTeamForm.js

@@ -11,7 +11,7 @@ import {
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export function TeamJoinForm({ onSave, onClose }) {
+export default function TeamJoinForm({ onSave, onClose }) {
   const { formatMessage, labels, getMessage } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post('/teams/join', data));
@@ -40,5 +40,3 @@ export function TeamJoinForm({ onSave, onClose }) {
     </Form>
   );
 }
-
-export default TeamJoinForm;

components/pages/settings/teams/TeamAddForm.js

@@ -11,7 +11,7 @@ import {
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export function TeamAddForm({ onSave, onClose }) {
+export default function TeamAddForm({ onSave, onClose }) {
   const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
@@ -44,5 +44,3 @@ export function TeamAddForm({ onSave, onClose }) {
     </Form>
   );
 }
-
-export default TeamAddForm;

components/pages/settings/teams/TeamAddWebsiteForm.js

@@ -4,7 +4,7 @@ import { Button, Dropdown, Form, FormButtons, FormRow, Item, SubmitButton } from
 import WebsiteTags from './WebsiteTags';
 import useMessages from 'hooks/useMessages';
 
-export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
+export default function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
   const { formatMessage, labels } = useMessages();
   const { get, post, useQuery, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
@@ -44,7 +44,7 @@ export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
     <>
       <Form onSubmit={handleSubmit} error={error} ref={formRef}>
         <FormRow label={formatMessage(labels.websites)}>
-          <Dropdown items={websites} onChange={handleAddWebsite} style={{ width: 300 }}>
+          <Dropdown items={websites} onChange={handleAddWebsite}>
             {({ id, name }) => <Item key={id}>{name}</Item>}
           </Dropdown>
         </FormRow>
@@ -59,5 +59,3 @@ export function TeamAddWebsiteForm({ teamId, onSave, onClose }) {
     </>
   );
 }
-
-export default TeamAddWebsiteForm;

components/pages/settings/teams/TeamDeleteForm.js

@@ -2,7 +2,7 @@ import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
-export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
+export default function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
   const { formatMessage, labels, messages, FormattedMessage } = useMessages();
   const { del, useMutation } = useApi();
   const { mutate, error, isLoading } = useMutation(data => del(`/teams/${teamId}`, data));
@@ -30,5 +30,3 @@ export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
     </Form>
   );
 }
-
-export default TeamDeleteForm;

components/pages/settings/teams/TeamEditForm.js

@@ -15,7 +15,7 @@ import useMessages from 'hooks/useMessages';
 
 const generateId = () => getRandomChars(16);
 
-export function TeamEditForm({ teamId, data, onSave, readOnly }) {
+export default function TeamEditForm({ teamId, data, onSave, readOnly }) {
   const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
@@ -69,5 +69,3 @@ export function TeamEditForm({ teamId, data, onSave, readOnly }) {
     </Form>
   );
 }
-
-export default TeamEditForm;