From ee50ef99e096981c14fdbbf3910272b89dbfa5ec Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Mon, 6 Aug 2018 15:43:10 -0400
Subject: [PATCH] RTL corrections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* center the title on full screen modals.
Adding the `[dir=“ltr”]` atttribute to the css rule for a child style didn’t work the way I expected.
`[dir="ltr"] .full-screen .header-item-title` did not match the fullscreen title element, so the style wasn’t applied.
`.full-screen [dir="ltr"] .header-item-title` did match.
* fix the filter to reverse the icon and ‘x’ in the filter input
* more space after the library back icon
* reverse the arrow on camera -retake image and rerecord sound.
---
 src/components/button/button.css              |  9 ++++-
 src/components/camera-modal/camera-modal.css  |  4 +++
 src/components/camera-modal/camera-modal.jsx  |  2 +-
 src/components/filter/filter.css              | 36 +++++++++++++++++--
 src/components/modal/modal.css                |  4 +--
 src/components/record-modal/playback-step.jsx |  2 +-
 src/components/record-modal/record-modal.css  |  4 +++
 src/containers/custom-procedures.jsx          |  5 ++-
 8 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/src/components/button/button.css b/src/components/button/button.css
index 9ce746c52..9ba2fbd93 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -11,10 +11,17 @@
 }
 
 .icon {
-    margin-right: .5rem;
     height: 1.5rem;
 }
 
+[dir="ltr"] .icon {
+    margin-right: .5rem;
+}
+
+[dir="rtl"] .icon {
+    margin-left: .5rem;
+}
+
 .content {
     white-space: nowrap;
 }
diff --git a/src/components/camera-modal/camera-modal.css b/src/components/camera-modal/camera-modal.css
index 4ea962fba..7522fbb2e 100644
--- a/src/components/camera-modal/camera-modal.css
+++ b/src/components/camera-modal/camera-modal.css
@@ -135,6 +135,10 @@ $main-button-size: 2.75rem;
     color: $ui-white;
 }
 
+[dir="rtl"] .retake-button img {
+    transform: scaleX(-1);
+}
+
 @keyframes flash {
     0% { opacity: 1; }
     100% { opacity: 0; }
diff --git a/src/components/camera-modal/camera-modal.jsx b/src/components/camera-modal/camera-modal.jsx
index 5e18661b7..8c499c362 100644
--- a/src/components/camera-modal/camera-modal.jsx
+++ b/src/components/camera-modal/camera-modal.jsx
@@ -79,7 +79,7 @@ const CameraModal = ({intl, ...props}) => (
             {props.capture ?
                 <Box className={styles.buttonRow}>
                     <button
-                        className={styles.cancelButton}
+                        className={styles.retakeButton}
                         key="retake-button"
                         onClick={props.onBack}
                     >
diff --git a/src/components/filter/filter.css b/src/components/filter/filter.css
index b67e60795..fffef4812 100644
--- a/src/components/filter/filter.css
+++ b/src/components/filter/filter.css
@@ -18,13 +18,22 @@
 .filter-icon {
     position: absolute;
     top: 0;
-    left: 0;
 
     height: 1rem;
     width: 1rem;
+}
+
+[dir="ltr"] .filter-icon {
+    left: 0;
     margin: 0.75rem 0.75rem 0.75rem 1rem;
 }
 
+[dir="rtl"] .filter-icon {
+    right: 0;
+    margin: 0.75rem 1rem 0.75rem 0.75rem;
+    transform: scaleX(-1);
+}
+
 .filter:focus-within {
     box-shadow: 0 0 0 .25rem $motion-transparent;
 }
@@ -36,7 +45,6 @@
     opacity: 0;
     position: absolute;
     top: 0;
-    right: 0;
 
     display: flex;
     justify-content: center;
@@ -53,6 +61,14 @@
     transition: opacity 0.05s linear;
 }
 
+[dir="ltr"] .x-icon-wrapper {
+    right: 0;
+}
+
+[dir="rtl"] .x-icon-wrapper {
+    left: 0;
+}
+
 /*
     Shown state
 */
@@ -96,13 +112,27 @@
     font-size: 0.75rem;
     letter-spacing: 0.15px;
     cursor: text;
+}
+
+[dir="ltr"] .filter-input {
     padding: .625rem 2rem .625rem 3rem;
 }
 
+[dir="rtl"] .filter-input {
+    padding: .625rem 3rem .625rem 2rem;
+}
+
 .filter-input::placeholder {
     opacity: .5;
-    padding: 0 0 0 0.25rem;
     color: $text-primary;
     font-size: 0.875rem;
     letter-spacing: 0.15px;
 }
+
+[dir="ltr"] .filter-input::placeholder {
+    padding: 0 0 0 0.25rem;
+}
+
+[dir="rtl"] .filter-input::placeholder {
+    padding: 0 0.25rem 0 0;
+}
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index be410bd85..e36e472ed 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -110,11 +110,11 @@ $sides: 20rem;
     margin: 0 0 0 -$sides;
 }
 
-[dir="ltr"] .full-screen .header-item-title {
+.full-screen [dir="ltr"] .header-item-title {
     margin: 0 0 0 -$sides;
 }
 
-[dir="rtl"] .full-screen .header-item-title {
+.full-screen [dir="rtl"] .header-item-title {
     margin: 0 -$sides 0 0;
 }
 
diff --git a/src/components/record-modal/playback-step.jsx b/src/components/record-modal/playback-step.jsx
index 40167172d..8f76b506f 100644
--- a/src/components/record-modal/playback-step.jsx
+++ b/src/components/record-modal/playback-step.jsx
@@ -87,7 +87,7 @@ const PlaybackStep = props => (
         </Box>
         <Box className={styles.buttonRow}>
             <button
-                className={styles.cancelButton}
+                className={styles.rerecordButton}
                 onClick={props.onBack}
             >
                 <img
diff --git a/src/components/record-modal/record-modal.css b/src/components/record-modal/record-modal.css
index 79ce9c606..ae9d8afcc 100644
--- a/src/components/record-modal/record-modal.css
+++ b/src/components/record-modal/record-modal.css
@@ -118,3 +118,7 @@
     opacity: 0.2;
     transition: 0.1s;
 }
+
+[dir="rtl"] .rerecord-button img {
+    transform: scaleX(-1);
+}
diff --git a/src/containers/custom-procedures.jsx b/src/containers/custom-procedures.jsx
index 879800aae..525422720 100644
--- a/src/containers/custom-procedures.jsx
+++ b/src/containers/custom-procedures.jsx
@@ -32,7 +32,8 @@ class CustomProcedures extends React.Component {
         this.blocks = blocksRef;
         const workspaceConfig = defaultsDeep({},
             CustomProcedures.defaultOptions,
-            this.props.options
+            this.props.options,
+            {rtl: this.props.isRtl}
         );
 
         // @todo This is a hack to make there be no toolbox.
@@ -117,6 +118,7 @@ class CustomProcedures extends React.Component {
 }
 
 CustomProcedures.propTypes = {
+    isRtl: PropTypes.bool,
     mutator: PropTypes.instanceOf(Element),
     onRequestClose: PropTypes.func.isRequired,
     options: PropTypes.shape({
@@ -147,6 +149,7 @@ CustomProcedures.defaultProps = {
 };
 
 const mapStateToProps = state => ({
+    isRtl: state.locales.isRtl,
     mutator: state.scratchGui.customProcedures.mutator
 });