style: 🎨 Use Logical Style properties to apply same styles based on Language Direction (dir)

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;
 }

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;
 }

src/app/(main)/reports/funnel/FunnelChart.module.css

@@ -63,7 +63,7 @@
 
 .value {
   color: var(--base50);
-  margin-right: 20px;
+  margin-inline-end: 20px;
 }
 
 .track {

src/app/(main)/reports/insights/InsightsParameters.module.css

@@ -13,5 +13,5 @@
 
 .popup {
   margin-top: -10px;
-  margin-left: 30px;
+  margin-inline-start: 30px;
 }

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;
 }

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;
   }
 }

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({
     <div className={styles.layout}>
       <div className={styles.menu}>
         <LinkButton href={pathname} className={styles.back} variant="quiet" scroll={false}>
-          <Icon rotate={180}>
+          <Icon rotate={dir === 'rtl' ? 0 : 180}>
             <Icons.ArrowRight />
           </Icon>
           <Text>{formatMessage(labels.back)}</Text>

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.module.css

@@ -27,7 +27,7 @@
 }
 
 .icon {
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 
 .time {

src/components/common/ErrorMessage.module.css

@@ -11,5 +11,5 @@
 }
 
 .icon {
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }

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;
 }

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 {

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 {

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;
 }

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' && (
         <div className={styles.buttons}>
           <Button onClick={() => handleIncrement(-1)}>
-            <Icon rotate={90}>
+            <Icon rotate={dir === 'rtl' ? 270 : 90}>
               <Icons.ChevronDown />
             </Icon>
           </Button>
           <Button onClick={() => handleIncrement(1)} disabled={disableForward}>
-            <Icon rotate={270}>
+            <Icon rotate={dir === 'rtl' ? 90 : 270}>
               <Icons.ChevronDown />
             </Icon>
           </Button>

src/components/layout/MenuLayout.module.css

@@ -7,7 +7,7 @@
 .menu {
   width: 240px;
   padding-top: 34px;
-  padding-right: 20px;
+  padding-inline-end: 20px;
 }
 
 .content {

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);
 }
 

src/components/layout/PageHeader.module.css

@@ -29,7 +29,7 @@
 
 .icon {
   color: var(--base700);
-  margin-right: 1rem;
+  margin-inline-end: 1rem;
 }
 
 .actions {

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;
 }

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;
   }

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;
 }