Right-to-left CSS (using module for conversion) (#7072)

* Create RTL stylesheets using `gulp-rtl`

* Handle RTL stylesheet special cases

Certain blocks of Sass  were set to bypass "rtlcss" using ignore
comments. Certain icons had to be flipped 180 degrees.

* Switch stylesheets when locale changes

A second stylesheet has been added to each HTML page for use with
right-to-left locales. It is disabled by default. It is enabled on
startup if a RTL locale is set, and when switching to a RTL locale.
Similarly the LTR stylesheet is disabled when a RTL locale is used.

Unfortunately there is an unpleasant flash of unstyled content when
switching between a LTR and a RTL locale. There is also a slightly
longer page load time when using a RTL locale (<1s difference). We
couldn't think of an easy way to avoid these problems.

* Set `dir="auto"` as default on `TextFields`

3 files changed, 6 insertions, 0 deletions

diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js
index 483d5d344..8f8023fd0 100644
--- a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js
+++ b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js
@@ -155,6 +155,7 @@ export default class EnsInput extends Component {
           <input
             className="ens-input__wrapper__input"
             type="text"
+            dir="auto"
             placeholder={t('recipientAddressPlaceholder')}
             onChange={this.onChange}
             onPaste={this.onPaste}
diff --git a/ui/app/pages/send/send.scss b/ui/app/pages/send/send.scss
index 9b95f1b39..a0c36bdac 100644
--- a/ui/app/pages/send/send.scss
+++ b/ui/app/pages/send/send.scss
@@ -60,6 +60,10 @@
         width: 18px;
         height: 18px;
         margin-right: .5rem;
+
+        [dir='rtl'] & {
+          transform: rotate(180deg);
+        }
       }
     }
 
diff --git a/ui/app/pages/send/to-autocomplete/to-autocomplete.js b/ui/app/pages/send/to-autocomplete/to-autocomplete.js
index 8ad579958..71c69b5fb 100644
--- a/ui/app/pages/send/to-autocomplete/to-autocomplete.js
+++ b/ui/app/pages/send/to-autocomplete/to-autocomplete.js
@@ -99,6 +99,7 @@ ToAutoComplete.prototype.render = function () {
     h(`input.send-v2__to-autocomplete__input${qrScanner ? '.with-qr' : ''}`, {
       placeholder: this.context.t('recipientAddress'),
       className: inError ? `send-v2__error-border` : '',
+      dir: 'auto',
       value: to,
       onChange: event => onChange(event.target.value),
       onFocus: event => this.handleInputEvent(event),