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`

1 files changed, 5 insertions, 0 deletions

diff --git a/ui/index.js b/ui/index.js
index db9292761..0f15594d2 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -5,6 +5,7 @@ const actions = require('./app/store/actions')
 const configureStore = require('./app/store/store')
 const txHelper = require('./lib/tx-helper')
 const { fetchLocale } = require('./app/helpers/utils/i18n-helper')
+import switchDirection from './app/helpers/utils/switch-direction'
 const log = require('loglevel')
 
 module.exports = launchMetamaskUi
@@ -33,6 +34,10 @@ async function startApp (metamaskState, backgroundConnection, opts) {
     : {}
   const enLocaleMessages = await fetchLocale('en')
 
+  if (metamaskState.textDirection === 'rtl') {
+    await switchDirection('rtl')
+  }
+
   const store = configureStore({
     activeTab: opts.activeTab,