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

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