RTL corrections

* 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

@@ -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;
 }

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; }

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}
                     >

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;
+}

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;
 }
 

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

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);
+}

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
 });