diff --git a/src/app/(main)/reports/[reportId]/ReportBody.module.css b/src/app/(main)/reports/[reportId]/ReportBody.module.css
index 79e3caa0..5fb4259a 100644
--- a/src/app/(main)/reports/[reportId]/ReportBody.module.css
+++ b/src/app/(main)/reports/[reportId]/ReportBody.module.css
@@ -1,5 +1,5 @@
.body {
- padding-left: 20px;
+ padding-inline-start: 20px;
grid-row: 2/3;
grid-column: 2 / 3;
}
diff --git a/src/app/(main)/reports/[reportId]/ReportMenu.module.css b/src/app/(main)/reports/[reportId]/ReportMenu.module.css
index 1fc8db29..ee1c6085 100644
--- a/src/app/(main)/reports/[reportId]/ReportMenu.module.css
+++ b/src/app/(main)/reports/[reportId]/ReportMenu.module.css
@@ -1,7 +1,7 @@
.menu {
width: 300px;
- padding-right: 20px;
- border-right: 1px solid var(--base300);
+ padding-inline-end: 20px;
+ border-inline-end: 1px solid var(--base300);
grid-row: 2 / 3;
grid-column: 1 / 2;
}
diff --git a/src/app/(main)/reports/funnel/FunnelChart.module.css b/src/app/(main)/reports/funnel/FunnelChart.module.css
index c591a54b..0279ea03 100644
--- a/src/app/(main)/reports/funnel/FunnelChart.module.css
+++ b/src/app/(main)/reports/funnel/FunnelChart.module.css
@@ -63,7 +63,7 @@
.value {
color: var(--base50);
- margin-right: 20px;
+ margin-inline-end: 20px;
}
.track {
diff --git a/src/app/(main)/reports/insights/InsightsParameters.module.css b/src/app/(main)/reports/insights/InsightsParameters.module.css
index c84f8a9e..ba089b9a 100644
--- a/src/app/(main)/reports/insights/InsightsParameters.module.css
+++ b/src/app/(main)/reports/insights/InsightsParameters.module.css
@@ -13,5 +13,5 @@
.popup {
margin-top: -10px;
- margin-left: 30px;
+ margin-inline-start: 30px;
}
diff --git a/src/app/(main)/settings/teams/WebsiteTags.module.css b/src/app/(main)/settings/teams/WebsiteTags.module.css
index 50ae60a0..5ca7af51 100644
--- a/src/app/(main)/settings/teams/WebsiteTags.module.css
+++ b/src/app/(main)/settings/teams/WebsiteTags.module.css
@@ -7,5 +7,5 @@
.tag {
text-align: center;
margin-bottom: 10px;
- margin-right: 20px;
+ margin-inline-end: 20px;
}
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.module.css b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.module.css
index b3dcb8d0..f71032ae 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.module.css
+++ b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.module.css
@@ -58,6 +58,6 @@
gap: 20px;
align-items: center;
justify-content: space-between;
- padding-right: 0;
+ padding-inline-end: 0;
}
}
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
index fcded254..9fdc8fd0 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
@@ -12,7 +12,7 @@ import ReferrersTable from 'components/metrics/ReferrersTable';
import ScreenTable from 'components/metrics/ScreenTable';
import EventsTable from 'components/metrics/EventsTable';
import SideNav from 'components/layout/SideNav';
-import { useNavigation, useMessages } from 'components/hooks';
+import { useNavigation, useMessages, useLocale } from 'components/hooks';
import LinkButton from 'components/common/LinkButton';
import styles from './WebsiteExpandedView.module.css';
@@ -39,6 +39,7 @@ export default function WebsiteExpandedView({
websiteId: string;
domainName?: string;
}) {
+ const { dir } = useLocale();
const { formatMessage, labels } = useMessages();
const {
router,
@@ -122,7 +123,7 @@ export default function WebsiteExpandedView({
-
+
{formatMessage(labels.back)}
diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.module.css b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.module.css
index e9c0fc1b..fb5fdecf 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.module.css
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.module.css
@@ -27,7 +27,7 @@
}
.icon {
- margin-right: 10px;
+ margin-inline-end: 10px;
}
.time {
diff --git a/src/components/common/ErrorMessage.module.css b/src/components/common/ErrorMessage.module.css
index 391190dc..fe976613 100644
--- a/src/components/common/ErrorMessage.module.css
+++ b/src/components/common/ErrorMessage.module.css
@@ -11,5 +11,5 @@
}
.icon {
- margin-right: 10px;
+ margin-inline-end: 10px;
}
diff --git a/src/components/common/MobileMenu.module.css b/src/components/common/MobileMenu.module.css
index cfe6cf37..63592bec 100644
--- a/src/components/common/MobileMenu.module.css
+++ b/src/components/common/MobileMenu.module.css
@@ -35,5 +35,5 @@ a.item.selected,
.submenu a.item {
color: var(--base600);
- margin-left: 40px;
+ margin-inline-start: 40px;
}
diff --git a/src/components/input/LanguageButton.module.css b/src/components/input/LanguageButton.module.css
index cc5d649a..dccb098d 100644
--- a/src/components/input/LanguageButton.module.css
+++ b/src/components/input/LanguageButton.module.css
@@ -6,7 +6,7 @@
z-index: var(--z-index-popup);
border-radius: 5px;
border: 1px solid var(--border-color);
- margin-left: 10px;
+ margin-inline-start: 10px;
}
.item {
diff --git a/src/components/input/ProfileButton.module.css b/src/components/input/ProfileButton.module.css
index 1eebcab6..37f51f78 100644
--- a/src/components/input/ProfileButton.module.css
+++ b/src/components/input/ProfileButton.module.css
@@ -18,7 +18,7 @@
font-size: 11px;
color: var(--base600);
text-align: right;
- margin-right: 10px;
+ margin-inline-end: 10px;
}
.name {
diff --git a/src/components/input/WebsiteDateFilter.module.css b/src/components/input/WebsiteDateFilter.module.css
index 6f2e822d..4c17c6be 100644
--- a/src/components/input/WebsiteDateFilter.module.css
+++ b/src/components/input/WebsiteDateFilter.module.css
@@ -13,12 +13,11 @@
}
.buttons button:first-child {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
+ border-start-end-radius: 0;
+ border-end-end-radius: 0;
}
.buttons button:last-child {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- border-left: 1px solid var(--base400) !important;
+ border-start-start-radius: 0;
+ border-end-start-radius: 0;
}
diff --git a/src/components/input/WebsiteDateFilter.tsx b/src/components/input/WebsiteDateFilter.tsx
index 46df3623..17b70c82 100644
--- a/src/components/input/WebsiteDateFilter.tsx
+++ b/src/components/input/WebsiteDateFilter.tsx
@@ -1,4 +1,4 @@
-import { useDateRange } from 'components/hooks';
+import { useDateRange, useLocale } from 'components/hooks';
import { isAfter } from 'date-fns';
import { getOffsetDateRange } from 'lib/date';
import { Button, Icon, Icons } from 'react-basics';
@@ -7,6 +7,7 @@ import styles from './WebsiteDateFilter.module.css';
import { DateRange } from 'lib/types';
export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
+ const { dir } = useLocale();
const [dateRange, setDateRange] = useDateRange(websiteId);
const { value, startDate, endDate, offset } = dateRange;
const disableForward =
@@ -25,12 +26,12 @@ export function WebsiteDateFilter({ websiteId }: { websiteId: string }) {
{value !== 'all' && (
diff --git a/src/components/layout/MenuLayout.module.css b/src/components/layout/MenuLayout.module.css
index 19162ef5..d2d1b165 100644
--- a/src/components/layout/MenuLayout.module.css
+++ b/src/components/layout/MenuLayout.module.css
@@ -7,7 +7,7 @@
.menu {
width: 240px;
padding-top: 34px;
- padding-right: 20px;
+ padding-inline-end: 20px;
}
.content {
diff --git a/src/components/layout/NavGroup.module.css b/src/components/layout/NavGroup.module.css
index 9706a001..d827da86 100644
--- a/src/components/layout/NavGroup.module.css
+++ b/src/components/layout/NavGroup.module.css
@@ -29,12 +29,12 @@
display: flex;
flex-direction: row;
align-items: center;
- border-right: 2px solid var(--base200);
+ border-inline-end: 2px solid var(--base200);
padding: 1rem 2rem;
gap: var(--size500);
font-weight: 600;
width: 200px;
- margin-right: -2px;
+ margin-inline-end: -2px;
}
a.item {
@@ -43,7 +43,7 @@ a.item {
.item.selected {
color: var(--base900);
- border-right-color: var(--primary400);
+ border-inline-end-color: var(--primary400);
background: var(--blue100);
}
diff --git a/src/components/layout/PageHeader.module.css b/src/components/layout/PageHeader.module.css
index 178d8ce4..8e186979 100644
--- a/src/components/layout/PageHeader.module.css
+++ b/src/components/layout/PageHeader.module.css
@@ -29,7 +29,7 @@
.icon {
color: var(--base700);
- margin-right: 1rem;
+ margin-inline-end: 1rem;
}
.actions {
diff --git a/src/components/metrics/ActiveUsers.module.css b/src/components/metrics/ActiveUsers.module.css
index 1d87fcd8..5d0a4c7d 100644
--- a/src/components/metrics/ActiveUsers.module.css
+++ b/src/components/metrics/ActiveUsers.module.css
@@ -1,7 +1,7 @@
.container {
display: flex;
align-items: center;
- margin-left: 20px;
+ margin-inline-start: 20px;
}
.text {
@@ -13,5 +13,5 @@
.value {
font-weight: 600;
- margin-right: 4px;
+ margin-inline-end: 4px;
}
diff --git a/src/components/metrics/DatePickerForm.module.css b/src/components/metrics/DatePickerForm.module.css
index a3d9851d..92a41572 100644
--- a/src/components/metrics/DatePickerForm.module.css
+++ b/src/components/metrics/DatePickerForm.module.css
@@ -14,9 +14,9 @@
}
.calendars > div + div {
- margin-left: 20px;
- padding-left: 20px;
- border-left: 1px solid var(--base300);
+ margin-inline-start: 20px;
+ padding-inline-start: 20px;
+ border-inline-start: 1px solid var(--base300);
}
.filter {
@@ -41,7 +41,7 @@
.calendars > div + div {
padding: 0;
- margin-left: 0;
+ margin-inline-start: 0;
margin-top: 20px;
border: 0;
}
diff --git a/src/components/metrics/ListTable.module.css b/src/components/metrics/ListTable.module.css
index 8f263531..8a0a4916 100644
--- a/src/components/metrics/ListTable.module.css
+++ b/src/components/metrics/ListTable.module.css
@@ -76,7 +76,7 @@
position: relative;
width: 50px;
color: var(--base600);
- border-left: 1px solid var(--base600);
+ border-inline-start: 1px solid var(--base600);
padding-inline-start: 10px;
z-index: 1;
}