From 95ff89bf41bcf23e7785b37b2515a5fbc966da15 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Thu, 14 Apr 2022 17:15:19 +0200
Subject: fix(renderer): Flip all RTL styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../renderer/src/components/NotificationBanner.tsx |  6 +--
 .../locationBar/LocationInputAdornment.tsx         |  5 +-
 .../locationBar/LocationOverlayInput.tsx           |  7 ++-
 .../src/components/locationBar/SecurityLabel.tsx   |  2 +-
 .../src/components/sidebar/ServiceIcon.tsx         |  7 ++-
 .../src/components/sidebar/ServiceSwitcher.tsx     | 15 ++----
 .../renderer/src/components/sidebar/Sidebar.tsx    |  2 +-
 packages/renderer/src/i18n/RtlCacheProvider.tsx    | 55 ++++++++++++++++++++++
 packages/renderer/src/index.tsx                    | 15 +++---
 9 files changed, 84 insertions(+), 30 deletions(-)
 create mode 100644 packages/renderer/src/i18n/RtlCacheProvider.tsx

(limited to 'packages/renderer/src')

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>
   );
-- 
cgit v1.2.3-70-g09d2