diff --git a/components/common/ErrorMessage.module.css b/components/common/ErrorMessage.module.css
index dd9295d9..9109dcdc 100644
--- a/components/common/ErrorMessage.module.css
+++ b/components/common/ErrorMessage.module.css
@@ -5,7 +5,7 @@
transform: translate(-50%, -50%);
margin: auto;
display: flex;
- z-index: 1;
+ z-index: var(--z-index-above);
background-color: var(--base50);
padding: 10px;
}
diff --git a/components/common/HoverTooltip.module.css b/components/common/HoverTooltip.module.css
index 519e303d..ec1abc1c 100644
--- a/components/common/HoverTooltip.module.css
+++ b/components/common/HoverTooltip.module.css
@@ -5,7 +5,7 @@
.tooltip {
position: fixed;
pointer-events: none;
- z-index: 1;
+ z-index: var(--z-index-popup);
}
.content {
diff --git a/components/common/MobileMenu.module.css b/components/common/MobileMenu.module.css
index d1a6f19b..c8aa9617 100644
--- a/components/common/MobileMenu.module.css
+++ b/components/common/MobileMenu.module.css
@@ -5,10 +5,10 @@
right: 0;
bottom: 0;
margin: auto;
- z-index: 100;
display: flex;
flex-direction: column;
background-color: var(--base50);
+ z-index: var(--z-index-popup);
overflow: auto;
}
diff --git a/components/common/UpdateNotice.module.css b/components/common/UpdateNotice.module.css
index 5962ec37..f5e29445 100644
--- a/components/common/UpdateNotice.module.css
+++ b/components/common/UpdateNotice.module.css
@@ -8,7 +8,7 @@
padding: 20px;
border: 1px solid var(--base300);
border-radius: var(--border-radius);
- z-index: 1000;
+ z-index: var(--z-index-popup);
}
.message {
diff --git a/components/input/LanguageButton.module.css b/components/input/LanguageButton.module.css
index bf51b571..16d61978 100644
--- a/components/input/LanguageButton.module.css
+++ b/components/input/LanguageButton.module.css
@@ -5,7 +5,7 @@
max-width: 100vw;
padding: 10px;
background: var(--base50);
- z-index: var(--z-index100);
+ z-index: var(--z-index-popup);
border-radius: 5px;
border: 1px solid var(--border-color);
margin-left: 10px;
diff --git a/components/input/ProfileButton.module.css b/components/input/ProfileButton.module.css
index 2ed5306b..8b1897bd 100644
--- a/components/input/ProfileButton.module.css
+++ b/components/input/ProfileButton.module.css
@@ -1,5 +1,6 @@
.menu {
width: 200px;
+ z-index: var(--z-index-popup);
}
.item {
diff --git a/components/input/SettingsButton.module.css b/components/input/SettingsButton.module.css
index 0f6f90ea..8ebd4483 100644
--- a/components/input/SettingsButton.module.css
+++ b/components/input/SettingsButton.module.css
@@ -8,5 +8,4 @@
top: 100%;
right: 0;
padding: 20px;
- z-index: 100;
}
diff --git a/components/layout/AppLayout.module.css b/components/layout/AppLayout.module.css
index 621802c9..6cc9e414 100644
--- a/components/layout/AppLayout.module.css
+++ b/components/layout/AppLayout.module.css
@@ -7,7 +7,7 @@
.nav {
height: 60px;
width: 100vw;
- z-index: 100;
+ z-index: var(--z-index-overlay);
grid-column: 1;
grid-row: 1 / 2;
}
diff --git a/components/layout/FormLayout.js b/components/layout/FormLayout.js
deleted file mode 100644
index 81830b14..00000000
--- a/components/layout/FormLayout.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useSpring, animated } from 'react-spring';
-import classNames from 'classnames';
-import { ErrorMessage } from 'formik';
-import styles from './FormLayout.module.css';
-
-export default function FormLayout({ className, children }) {
- return {children}
;
-}
-
-export const FormButtons = ({ className, children }) => (
- {children}
-);
-
-export const FormError = ({ name }) => {
- return {msg => };
-};
-
-const ErrorTag = ({ msg }) => {
- const props = useSpring({ opacity: 1, from: { opacity: 0 } });
-
- return (
-
- {msg}
-
- );
-};
-
-export const FormRow = ({ children }) => {children}
;
-
-export const FormMessage = ({ children }) =>
- children ? {children}
: null;
diff --git a/components/layout/FormLayout.module.css b/components/layout/FormLayout.module.css
deleted file mode 100644
index 576be958..00000000
--- a/components/layout/FormLayout.module.css
+++ /dev/null
@@ -1,94 +0,0 @@
-.form {
- display: flex;
- flex-direction: column;
- justify-content: center;
-}
-
-.form label {
- display: block;
- min-width: 100px;
-}
-
-.row {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- position: relative;
- margin-bottom: 20px;
- line-height: 1.8;
- padding: 0 20px;
-}
-
-.row > div {
- position: relative;
- flex: 1 1;
-}
-
-.row > div > input,
-.row > div > select {
- width: 100%;
- min-width: 240px;
-}
-
-.buttons {
- display: flex;
- justify-content: center;
- margin-top: 20px;
-}
-
-.buttons button + button {
- margin-left: 10px;
-}
-
-.error {
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- top: 0;
- left: calc(100% + 16px);
- bottom: 0;
- z-index: 1;
-}
-
-.msg {
- color: var(--msgColor);
- background: var(--red400);
- padding: 4px 8px;
- border-radius: 4px;
- white-space: nowrap;
-}
-
-.error:after {
- content: '';
- position: absolute;
- top: 0;
- left: -5px;
- bottom: 0;
- margin: auto;
- width: 10px;
- height: 10px;
- background: var(--red400);
- transform: rotate(45deg);
-}
-
-.message {
- text-align: center;
- margin: 20px 0;
- padding: 4px 8px;
- border-radius: 4px;
- color: var(--base50);
- background: var(--base800);
-}
-
-@media only screen and (max-width: 576px) {
- .error {
- align-items: flex-start;
- top: calc(100% + 7px);
- left: 0;
- }
-
- .error:after {
- left: 10px;
- }
-}
diff --git a/components/metrics/PagesTable.js b/components/metrics/PagesTable.js
index 615d6c25..fda766f1 100644
--- a/components/metrics/PagesTable.js
+++ b/components/metrics/PagesTable.js
@@ -8,7 +8,7 @@ export default function PagesTable({ websiteId, showFilters, ...props }) {
const {
router,
resolveUrl,
- query: { view },
+ query: { view = 'url' },
} = usePageQuery();
const { formatMessage, labels } = useMessages();
diff --git a/components/metrics/WebsiteChart.module.css b/components/metrics/WebsiteChart.module.css
index 8d5acb06..5bbb3a44 100644
--- a/components/metrics/WebsiteChart.module.css
+++ b/components/metrics/WebsiteChart.module.css
@@ -24,7 +24,7 @@
min-height: 90px;
margin-bottom: 20px;
background: var(--base50);
- z-index: var(--z-index300);
+ z-index: var(--z-index-above);
}
.sticky {
diff --git a/components/pages/realtime/RealtimeDashboard.module.css b/components/pages/realtime/RealtimeDashboard.module.css
index 5adcd435..4abf0a4e 100644
--- a/components/pages/realtime/RealtimeDashboard.module.css
+++ b/components/pages/realtime/RealtimeDashboard.module.css
@@ -11,6 +11,6 @@
top: 0;
background: var(--base50);
border-bottom: 1px solid var(--base300);
- z-index: 3;
+ z-index: var(--z-index-overlay);
padding: 10px 0;
}
diff --git a/package.json b/package.json
index 0f7eeccf..d7eab5a8 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
"node-fetch": "^3.2.8",
"npm-run-all": "^4.1.5",
"react": "^18.2.0",
- "react-basics": "^0.74.0",
+ "react-basics": "^0.75.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.2.0",
"react-intl": "^5.24.7",
diff --git a/yarn.lock b/yarn.lock
index fb99929e..02318817 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6727,10 +6727,10 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
-react-basics@^0.74.0:
- version "0.74.0"
- resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.74.0.tgz#153433bc485d6b71d8edf377d1a83f1d55133e24"
- integrity sha512-Z9XwgEOSRvcPqFqFZL6HR59t/XrqhIB8uoYwbmon3IFX2W0kOPqkX1Box0c+2BibJoHp4N4mbfuZWK2kSEnq9g==
+react-basics@^0.75.0:
+ version "0.75.0"
+ resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.75.0.tgz#501ba7fae6e0659ec8f7e811a4303ef83bd57b13"
+ integrity sha512-mDm+L/cw4LX4LylJW0MyV+YFxhZ0tMa/bCIs1QsApcRGvF4ahlB1rdwWn6/p01PVSHe7xS/55lSklp3b7IWOaw==
dependencies:
classnames "^2.3.1"
date-fns "^2.29.3"