fix(renderer): Flip all RTL styles

We need a sylis plugin for this according to
https://mui.com/material-ui/guides/right-to-left/#3-install-the-rtl-plugin

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

11 files changed, 125 insertions, 31 deletions

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index ca938da..1b207f5 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -8,6 +8,7 @@
     "typecheck:workspace": "yarn g:typecheck"
   },
   "dependencies": {
+    "@emotion/cache": "^11.7.1",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@fontsource/roboto": "^4.5.5",
@@ -23,7 +24,9 @@
     "mobx-state-tree": "^5.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-i18next": "^11.16.6"
+    "react-i18next": "^11.16.6",
+    "stylis": "^4.1.0",
+    "stylis-plugin-rtl": "^2.1.1"
   },
   "devDependencies": {
     "@jest/globals": "^27.5.1",
@@ -31,6 +34,7 @@
     "@types/lodash-es": "^4.17.6",
     "@types/react": "^17.0.44",
     "@types/react-dom": "^17.0.15",
+    "@types/stylis": "^4.0.2",
     "@vitejs/plugin-react": "^1.3.1",
     "jest": "^27.5.1",
     "jest-mock": "^27.5.1",
diff --git a/packages/renderer/src/components/NotificationBanner.tsx b/packages/renderer/src/components/NotificationBanner.tsx
index 36c192a..c759d46 100644
--- a/packages/renderer/src/components/NotificationBanner.tsx
+++ b/packages/renderer/src/components/NotificationBanner.tsx
@@ -41,21 +41,21 @@ const NotificationBannerRoot = styled(Alert)(({ theme }) => ({
     justifyContent: 'center',
   },
   '.MuiAlert-action': {
-    paddingInlineStart: 0,
+    paddingLeft: 0,
   },
 }));
 
 const NotificationBannerText = styled(Typography)(({ theme }) => ({
   fontSize: 'inherit',
   paddingTop: theme.spacing(1),
-  paddingInlineEnd: theme.spacing(2),
+  paddingRight: theme.spacing(2),
   flexGrow: 9999,
 }));
 
 const NotificationBannerButtons = styled(Box)(({ theme }) => ({
   fontSize: 'inherit',
   paddingTop: theme.spacing(0.5),
-  paddingInlineEnd: theme.spacing(0.5),
+  paddingRight: theme.spacing(0.5),
   display: 'flex',
   flexWrap: 'wrap',
   flexGrow: 1,
diff --git a/packages/renderer/src/components/locationBar/LocationInputAdornment.tsx b/packages/renderer/src/components/locationBar/LocationInputAdornment.tsx
index 640cbb4..82f662d 100644
--- a/packages/renderer/src/components/locationBar/LocationInputAdornment.tsx
+++ b/packages/renderer/src/components/locationBar/LocationInputAdornment.tsx
@@ -23,11 +23,10 @@ import { styled } from '@mui/material/styles';
 
 const LocationInputAdornment = styled(InputAdornment, {
   name: 'LocationInputAdornment',
-})(({ theme: { direction }, position }) => {
-  const left = direction === 'ltr' ? 'start' : 'end';
+})(({ position }) => {
   const marginStart = -10;
   const marginEnd = 2;
-  return position === left
+  return position === 'start'
     ? {
         marginLeft: marginStart,
         marginRight: marginEnd,
diff --git a/packages/renderer/src/components/locationBar/LocationOverlayInput.tsx b/packages/renderer/src/components/locationBar/LocationOverlayInput.tsx
index a09cc57..cbb5b06 100644
--- a/packages/renderer/src/components/locationBar/LocationOverlayInput.tsx
+++ b/packages/renderer/src/components/locationBar/LocationOverlayInput.tsx
@@ -34,6 +34,8 @@ const LocationOverlayInputRoot = styled('div', {
 })<{ overlayVisible: boolean }>(({ theme, overlayVisible }) => {
   const itemStyle = {
     padding: '6px 0 7px 0',
+    // Set text alignment explicitly so it can be flipped by `stylis-plugin-rtl`.
+    textAlign: 'left',
   };
   return {
     display: 'flex',
@@ -86,12 +88,15 @@ const LocationOverlayInput = forwardRef(
       <input
         ref={ref}
         className={`${className ?? ''} ${inputClassName}`}
+        dir="ltr"
         {...props}
       />
       {/* eslint-enable react/jsx-props-no-spreading */}
       {overlayVisible && (
         <div aria-hidden className={`${className ?? ''} ${overlayClassName}`}>
-          <div className={clipClassName}>{overlay}</div>
+          <div className={clipClassName} dir="ltr">
+            {overlay}
+          </div>
         </div>
       )}
     </LocationOverlayInputRoot>
diff --git a/packages/renderer/src/components/locationBar/SecurityLabel.tsx b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
index d9dff86..0017f89 100644
--- a/packages/renderer/src/components/locationBar/SecurityLabel.tsx
+++ b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
@@ -45,7 +45,7 @@ const SecurityLabelText = styled('span', {
   name: 'SecurityLabel',
   slot: 'Text',
 })(({ theme }) => ({
-  marginInlineStart: theme.spacing(1),
+  marginLeft: theme.spacing(1),
   // Keep the same baseline as the input box text.
   paddingBottom: 1,
   fontWeight: theme.typography.fontWeightMedium,
diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
index 1017be9..7a6d58a 100644
--- a/packages/renderer/src/components/sidebar/ServiceIcon.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -20,7 +20,7 @@
 
 import IconWarning from '@mui/icons-material/Warning';
 import Badge from '@mui/material/Badge';
-import { styled, useTheme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 
@@ -89,7 +89,6 @@ const ServiceIconErrorBadge = styled(ServiceIconBadgeBase, {
 }));
 
 function ServiceIcon({ service }: { service: Service }): JSX.Element {
-  const { direction } = useTheme();
   const {
     settings: { name },
     directMessageCount,
@@ -114,7 +113,7 @@ function ServiceIcon({ service }: { service: Service }): JSX.Element {
       badgeContent={hasError ? <IconWarning fontSize="small" /> : 0}
       anchorOrigin={{
         vertical: 'bottom',
-        horizontal: direction === 'ltr' ? 'right' : 'left',
+        horizontal: 'right',
       }}
     >
       <ServiceIconBadge
@@ -125,7 +124,7 @@ function ServiceIcon({ service }: { service: Service }): JSX.Element {
         color="error"
         anchorOrigin={{
           vertical: 'top',
-          horizontal: direction === 'ltr' ? 'right' : 'left',
+          horizontal: 'right',
         }}
       >
         <ServiceIconRoot hasError={hasError}>
diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index 60b8b98..0ebd359 100644
--- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -34,20 +34,13 @@ import ServiceIcon from './ServiceIcon';
 const ServiceSwitcherRoot = styled(Tabs, {
   name: 'ServiceSwitcher',
   slot: 'Root',
-})(({ theme }) => ({
+})({
   // Move the indicator to the outer side of the window.
   '.MuiTabs-indicator': {
-    ...(theme.direction === 'ltr'
-      ? {
-          left: 0,
-          right: 'auto',
-        }
-      : {
-          left: 'auto',
-          right: 0,
-        }),
+    left: 0,
+    right: 'auto',
   },
-}));
+});
 
 const ServiceSwitcherTab = styled(Tab, {
   name: 'ServiceSwitcher',
diff --git a/packages/renderer/src/components/sidebar/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx
index 6c2f219..fc57302 100644
--- a/packages/renderer/src/components/sidebar/Sidebar.tsx
+++ b/packages/renderer/src/components/sidebar/Sidebar.tsx
@@ -48,7 +48,7 @@ export default function Sidebar(): JSX.Element {
           position: 'absolute',
           top: '-20px',
           bottom: '-20px',
-          [theme.direction === 'ltr' ? 'right' : 'left']: '-20px',
+          right: '-20px',
           zIndex: 100,
           width: '20px',
           boxShadow: theme.shadows[4],
diff --git a/packages/renderer/src/i18n/RtlCacheProvider.tsx b/packages/renderer/src/i18n/RtlCacheProvider.tsx
new file mode 100644
index 0000000..d54308b
--- /dev/null
+++ b/packages/renderer/src/i18n/RtlCacheProvider.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import { observer } from 'mobx-react-lite';
+import React, { ReactNode } from 'react';
+import { prefixer } from 'stylis';
+import rtlPlugin from 'stylis-plugin-rtl';
+
+import { useStore } from '../components/StoreProvider';
+
+const rtlCache = createCache({
+  key: 'muirtl',
+  stylisPlugins: [prefixer, rtlPlugin],
+});
+
+function RtlCacheProvider({ children }: { children?: ReactNode }): JSX.Element {
+  const {
+    shared: { writingDirection },
+  } = useStore();
+
+  return writingDirection === 'rtl' ? (
+    <CacheProvider value={rtlCache}>{children}</CacheProvider>
+  ) : (
+    /*
+      eslint-disable-next-line react/jsx-no-useless-fragment --
+      Wrap expression in a fragment to satisfy typescript.
+    */
+    <>{children}</>
+  );
+}
+
+RtlCacheProvider.defaultProps = {
+  children: undefined,
+};
+
+export default observer(RtlCacheProvider);
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index ff1ffc4..2722d3b 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -32,6 +32,7 @@ import Loading from './components/Loading';
 import StoreProvider from './components/StoreProvider';
 import ThemeProvider from './components/ThemeProvider';
 import { exposeToReduxDevtools, hotReload } from './devTools';
+import RtlCacheProvider from './i18n/RtlCacheProvider';
 import loadRendererLocalization from './i18n/loadRendererLoalization';
 import { createAndConnectRendererStore } from './stores/RendererStore';
 import { getLogger } from './utils/log';
@@ -71,12 +72,14 @@ function Root(): JSX.Element {
   return (
     <React.StrictMode>
       <StoreProvider store={store}>
-        <ThemeProvider>
-          <CssBaseline enableColorScheme />
-          <Suspense fallback={<Loading />}>
-            <App devMode={isDevelopment} />
-          </Suspense>
-        </ThemeProvider>
+        <RtlCacheProvider>
+          <ThemeProvider>
+            <CssBaseline enableColorScheme />
+            <Suspense fallback={<Loading />}>
+              <App devMode={isDevelopment} />
+            </Suspense>
+          </ThemeProvider>
+        </RtlCacheProvider>
       </StoreProvider>
     </React.StrictMode>
   );
diff --git a/yarn.lock b/yarn.lock
index a2b3cd1..7228aa1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1317,6 +1317,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@sophie/renderer@workspace:packages/renderer"
   dependencies:
+    "@emotion/cache": ^11.7.1
     "@emotion/react": ^11.9.0
     "@emotion/styled": ^11.8.1
     "@fontsource/roboto": ^4.5.5
@@ -1328,6 +1329,7 @@ __metadata:
     "@types/lodash-es": ^4.17.6
     "@types/react": ^17.0.44
     "@types/react-dom": ^17.0.15
+    "@types/stylis": ^4.0.2
     "@vitejs/plugin-react": ^1.3.1
     i18next: ^21.6.16
     jest: ^27.5.1
@@ -1344,6 +1346,8 @@ __metadata:
     react-dom: ^17.0.2
     react-i18next: ^11.16.6
     remotedev: ^0.2.9
+    stylis: ^4.1.0
+    stylis-plugin-rtl: ^2.1.1
     vite: ^2.9.5
   languageName: unknown
   linkType: soft
@@ -1745,6 +1749,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/stylis@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "@types/stylis@npm:4.0.2"
+  checksum: 5461290afd6e7fbbd713f4896b4c586fa6f3072ef8addcb062feaf112a50168477df98ab474d9b603b19b879696aab6932c5f0bb3cda7472ab9c1622ee7fea60
+  languageName: node
+  linkType: hard
+
 "@types/verror@npm:^1.10.3":
   version: 1.10.5
   resolution: "@types/verror@npm:1.10.5"
@@ -3076,6 +3087,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssjanus@npm:^2.0.1":
+  version: 2.1.0
+  resolution: "cssjanus@npm:2.1.0"
+  checksum: 87d02bb8a54aeb046fab0c63e32bc73a6f776d33f07b1ead29cbdd65bc6f5078f28bae85653b0fcae528817e54a91fcc8cd9f4fcb98a3c4e229628d8a10439c3
+  languageName: node
+  linkType: hard
+
 "cssom@npm:^0.4.4":
   version: 0.4.4
   resolution: "cssom@npm:0.4.4"
@@ -8486,6 +8504,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis-plugin-rtl@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "stylis-plugin-rtl@npm:2.1.1"
+  dependencies:
+    cssjanus: ^2.0.1
+  peerDependencies:
+    stylis: 4.x
+  checksum: 262d2c762216556ed3dc8218ea5929ae24b4b0fae020eb41c217911e6628374009d1e1b24256ed6a2f39cbbf302a877f2efe912b628c71dd15fde90866ca54ca
+  languageName: node
+  linkType: hard
+
 "stylis@npm:4.0.13":
   version: 4.0.13
   resolution: "stylis@npm:4.0.13"
@@ -8493,6 +8522,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "stylis@npm:4.1.0"
+  checksum: 1d0c167340cfd0fa0fecebcaae807e1d66f6498ae250bb3c5ba47d849ab8ce1142757feebcf8fede08941d2e7597cebee25419e21a2846b66c55bb49a6ad2b8a
+  languageName: node
+  linkType: hard
+
 "sumchecker@npm:^3.0.1":
   version: 3.0.1
   resolution: "sumchecker@npm:3.0.1"