diff --git a/src/app/(main)/websites/[id]/WebsiteDetails.js b/src/app/(main)/websites/[id]/WebsiteDetails.js
index 78996b78..c6ad1acc 100644
--- a/src/app/(main)/websites/[id]/WebsiteDetails.js
+++ b/src/app/(main)/websites/[id]/WebsiteDetails.js
@@ -9,7 +9,7 @@ import WebsiteChart from './WebsiteChart';
import WebsiteMenuView from './WebsiteMenuView';
import WebsiteHeader from './WebsiteHeader';
import WebsiteMetricsBar from './WebsiteMetricsBar';
-import WebsiteTableView from '../WebsiteTableView';
+import WebsiteTableView from './WebsiteTableView';
export default function WebsiteDetails({ websiteId }) {
const { data: website, isLoading, error } = useWebsite(websiteId);
diff --git a/src/app/(main)/websites/[id]/WebsiteMenuView.js b/src/app/(main)/websites/[id]/WebsiteMenuView.js
index 51c5e8c7..a7cfb0f2 100644
--- a/src/app/(main)/websites/[id]/WebsiteMenuView.js
+++ b/src/app/(main)/websites/[id]/WebsiteMenuView.js
@@ -1,4 +1,4 @@
-import { Text } from 'react-basics';
+import { Icons, Icon, Text } from 'react-basics';
import BrowsersTable from 'components/metrics/BrowsersTable';
import CountriesTable from 'components/metrics/CountriesTable';
import RegionsTable from 'components/metrics/RegionsTable';
@@ -110,6 +110,9 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
+
+
+
{formatMessage(labels.back)}
@@ -122,6 +125,7 @@ export default function WebsiteMenuView({ websiteId, websiteDomain }) {
animate={false}
showFilters={true}
virtualize={true}
+ itemCount={25}
/>
diff --git a/src/app/(main)/websites/WebsiteTableView.js b/src/app/(main)/websites/[id]/WebsiteTableView.js
similarity index 100%
rename from src/app/(main)/websites/WebsiteTableView.js
rename to src/app/(main)/websites/[id]/WebsiteTableView.js
diff --git a/src/components/common/LinkButton.js b/src/components/common/LinkButton.js
index 26f7251f..6ae59300 100644
--- a/src/components/common/LinkButton.js
+++ b/src/components/common/LinkButton.js
@@ -3,11 +3,15 @@ import Link from 'next/link';
import { useLocale } from 'components/hooks';
import styles from './LinkButton.module.css';
-export function LinkButton({ href, className, children }) {
+export function LinkButton({ href, className, variant, children }) {
const { dir } = useLocale();
return (
-
+
{children}
);
diff --git a/src/components/common/LinkButton.module.css b/src/components/common/LinkButton.module.css
index ae8a3b62..5561f536 100644
--- a/src/components/common/LinkButton.module.css
+++ b/src/components/common/LinkButton.module.css
@@ -26,3 +26,82 @@
.button:visited {
color: var(--base900);
}
+
+.button.disabled {
+ color: var(--disabled-color) !important;
+ background-color: var(--disabled-background) !important;
+ border-color: transparent !important;
+ pointer-events: none;
+}
+
+.button.primary {
+ color: var(--light50);
+ background: var(--primary400);
+}
+
+.button.primary:hover {
+ color: var(--light50);
+ background: var(--primary500);
+}
+
+.button.primary:active {
+ color: var(--light50);
+ background: var(--primary600);
+}
+
+.button.secondary {
+ border: 1px solid var(--border-color);
+ background: var(--base50);
+}
+
+.button.secondary:hover {
+ background: var(--base75);
+}
+
+.button.secondary:active {
+ background: var(--base100);
+}
+
+.button.quiet {
+ color: var(--base900);
+ background: transparent;
+}
+
+.button.quiet:hover {
+ background: var(--base100);
+}
+
+.button.quiet:active {
+ background: var(--base200);
+}
+
+.button.danger {
+ color: var(--light50);
+ background: var(--red800);
+}
+
+.button.danger:hover {
+ color: var(--light50);
+ background: var(--red900);
+}
+
+.button.danger:active {
+ color: var(--light50);
+ background: var(--red1000);
+}
+
+.button.size-sm {
+ font-size: var(--font-size-sm);
+ height: calc(var(--base-height) * 0.75);
+ padding: 0 calc(var(--size600) * 0.75);
+}
+
+.button.size-md {
+ font-size: var(--font-size-md);
+}
+
+.button.size-lg {
+ font-size: var(--font-size-lg);
+ height: calc(var(--base-height) * 1.25);
+ padding: 0 calc(var(--size600) * 1.25);
+}
diff --git a/src/components/common/Pager.js b/src/components/common/Pager.js
index f35c2ab0..a21d35d9 100644
--- a/src/components/common/Pager.js
+++ b/src/components/common/Pager.js
@@ -26,7 +26,7 @@ export function Pager({ page, pageSize, count, onPageChange, className }) {
return (
-
{formatMessage(labels.numberOfRecords, { x: count })}
+
{formatMessage(labels.numberOfRecords, { x: count })}
-
+
{data?.length === 0 &&
}
{virtualize && data.length > 0 ? (
-
+
{Row}
) : (
diff --git a/src/components/metrics/MetricsTable.js b/src/components/metrics/MetricsTable.js
index d36bc91e..1d64b714 100644
--- a/src/components/metrics/MetricsTable.js
+++ b/src/components/metrics/MetricsTable.js
@@ -1,6 +1,5 @@
import { useMemo } from 'react';
-import { Loading, Icon, Text, Button } from 'react-basics';
-import Link from 'next/link';
+import { Loading, Icon, Text } from 'react-basics';
import firstBy from 'thenby';
import classNames from 'classnames';
import useApi from 'components/hooks/useApi';
@@ -8,12 +7,13 @@ import { percentFilter } from 'lib/filters';
import useDateRange from 'components/hooks/useDateRange';
import useNavigation from 'components/hooks/useNavigation';
import ErrorMessage from 'components/common/ErrorMessage';
+import LinkButton from 'components/common/LinkButton';
import ListTable from './ListTable';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import Icons from 'components/icons';
import useMessages from 'components/hooks/useMessages';
-import styles from './MetricsTable.module.css';
import useLocale from 'components/hooks/useLocale';
+import styles from './MetricsTable.module.css';
export function MetricsTable({
websiteId,
@@ -103,14 +103,12 @@ export function MetricsTable({
{data && !error && }
{data && !error && limit && (
-
-
-
+
+ {formatMessage(labels.more)}
+
+
+
+
)}
diff --git a/src/components/metrics/MetricsTable.module.css b/src/components/metrics/MetricsTable.module.css
index fc3bc51e..c00e4356 100644
--- a/src/components/metrics/MetricsTable.module.css
+++ b/src/components/metrics/MetricsTable.module.css
@@ -1,7 +1,6 @@
.container {
position: relative;
min-height: 430px;
- height: 100%;
display: flex;
flex-direction: column;
flex: 1;