From 11df3a01e13110845bfca139003588c02ef7104d Mon Sep 17 00:00:00 2001
From: Jed Fox <git@twopointzero.us>
Date: Wed, 1 Apr 2020 13:50:09 -0400
Subject: [PATCH] Additional fixes

---
 src/components/ColorPicker.tsx        | 7 ++++---
 src/components/ContextMenu.css        | 2 +-
 src/components/Dialog.scss            | 2 +-
 src/components/FixedSideContainer.css | 2 ++
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index 3e50ec75be..03a88c6be2 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -3,7 +3,7 @@ import { Popover } from "./Popover";
 
 import "./ColorPicker.scss";
 import { KEYS } from "../keys";
-import { t } from "../i18n";
+import { t, getLanguage } from "../i18n";
 import { isWritableElement } from "../utils";
 import colors from "../colors";
 
@@ -69,6 +69,7 @@ const Picker = function ({
       event.key === KEYS.ARROW_DOWN
     ) {
       const { activeElement } = document;
+      const isRTL = getLanguage().rtl;
       const index = Array.prototype.indexOf.call(
         gallery!.current!.children,
         activeElement,
@@ -76,9 +77,9 @@ const Picker = function ({
       if (index !== -1) {
         const length = gallery!.current!.children.length - (showInput ? 1 : 0);
         const nextIndex =
-          event.key === KEYS.ARROW_RIGHT
+          event.key === (isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT)
             ? (index + 1) % length
-            : event.key === KEYS.ARROW_LEFT
+            : event.key === (isRTL ? KEYS.ARROW_RIGHT : KEYS.ARROW_LEFT)
             ? (length + index - 1) % length
             : event.key === KEYS.ARROW_DOWN
             ? (index + 5) % length
diff --git a/src/components/ContextMenu.css b/src/components/ContextMenu.css
index 6a3c10a86e..813df0a8bc 100644
--- a/src/components/ContextMenu.css
+++ b/src/components/ContextMenu.css
@@ -17,7 +17,7 @@
   min-width: 9.5rem;
   margin: 0;
   padding: 0.25rem 1rem 0.25rem 1.25rem;
-  text-align: left;
+  text-align: start;
   border-radius: 0;
   background-color: #f2f2f2;
   border: none;
diff --git a/src/components/Dialog.scss b/src/components/Dialog.scss
index 1035cd3f27..2531c50f09 100644
--- a/src/components/Dialog.scss
+++ b/src/components/Dialog.scss
@@ -20,7 +20,7 @@
   .Dialog {
     --metric: calc(var(--space-factor) * 4);
     --inset-left: #{"max(var(--metric), var(--sal))"};
-    --inset-right: #{"max(var(--metric), env(safe-area-inset-right))"};
+    --inset-right: #{"max(var(--metric), var(--sar))"};
   }
   .Dialog__title {
     grid-template-columns: calc(var(--space-factor) * 7) 1fr calc(
diff --git a/src/components/FixedSideContainer.css b/src/components/FixedSideContainer.css
index 8eedd402fb..3a5fcafb82 100644
--- a/src/components/FixedSideContainer.css
+++ b/src/components/FixedSideContainer.css
@@ -15,6 +15,7 @@
   z-index: 2;
 }
 
+/* TODO: if these are used, make sure to implement RTL support
 .FixedSideContainer_side_left {
   left: var(--margin);
   top: var(--margin);
@@ -28,3 +29,4 @@
   bottom: var(--margin);
   z-index: 3;
 }
+*/