Management: refactor rtl

packages/management/src/SimpleHeader.tsx

@@ -30,6 +30,7 @@ import { useTranslation } from "react-i18next";
 
 const StyledHeader = styled.div`
   position: absolute;
+  // doesn't require mirroring for RTL
   right: 50%;
   transform: translateX(50%);
   font-size: 17px;

packages/management/src/categories/spaces/StyledSpaces.tsx

@@ -71,10 +71,7 @@ const ConfigurationWrapper = styled.div`
       margin-bottom: 20px;
     }
     &-domain-text {
-      ${({ theme }) =>
-        theme.interfaceDirection === "rtl"
-          ? `padding-left: 2px;`
-          : `padding-right: 2px;`}
+      padding-inline-end: 2px;
     }
     &-configuration-title {
       padding-bottom: 8px;

packages/management/src/categories/spaces/sub-components/RowView/SpacesRoomRow.tsx

@@ -48,17 +48,11 @@ const StyledRoomRow = styled(Row)`
 
   .styled-element {
     width: 32px;
-    ${({ theme }) =>
-      theme.interfaceDirection === "rtl"
-        ? `margin-right: 20px;`
-        : `margin-left: 20px`}
+    margin-inline-start: 20px;
   }
 
   .row_context-menu-wrapper {
-    ${({ theme }) =>
-      theme.interfaceDirection === "rtl"
-        ? `margin-left: 18px;`
-        : `margin-right: 18px;`}
+    margin-inline-end: 18px;
   }
 `;
 

packages/management/src/categories/spaces/sub-components/dialogs/CreatePortalDialog/index.tsx

@@ -50,10 +50,7 @@ const StyledModal = styled(ModalDialogContainer)`
 
   .cancel-btn {
     display: inline-block;
-    ${({ theme }) =>
-      theme.interfaceDirection === "rtl"
-        ? `margin-right: 8px;`
-        : `margin-left: 8px;`}
+    margin-inline-start: 8px;
   }
 
   .create-portal-checkbox {
@@ -111,7 +108,7 @@ const CreatePortalDialog = () => {
       name,
       domainValidator,
       setRegisterError,
-      t
+      t,
     );
 
     if (isValidPortalName) {