From 6612e49710b1acf6e4bce0057f907791703c7ce4 Mon Sep 17 00:00:00 2001
From: yinonburgansky <yinonburgansky@gmail.com>
Date: Mon, 8 Mar 2021 13:51:36 +0200
Subject: [PATCH] Add support for RTL languages (#264)

---
 src/content/components/TranslatePanel.js | 4 ++--
 src/content/styles/TranslatePanel.scss   | 1 -
 src/popup/components/InputArea.js        | 1 +
 src/popup/components/ResultArea.js       | 4 ++--
 src/popup/styles/ResultArea.scss         | 1 +
 5 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/content/components/TranslatePanel.js b/src/content/components/TranslatePanel.js
index 74a1c7a..12dadd8 100644
--- a/src/content/components/TranslatePanel.js
+++ b/src/content/components/TranslatePanel.js
@@ -195,10 +195,10 @@ export default class TranslatePanel extends Component {
         <div className="simple-translate-result-wrapper" ref="wrapper" style={wrapperStyles}>
           <div className="simple-translate-move" draggable="true" ref="move"></div>
           <div className="simple-translate-result-contents">
-            <p className="simple-translate-result" style={resultStyles}>
+            <p className="simple-translate-result" style={resultStyles} dir="auto">
               {splitLine(resultText)}
             </p>
-            <p className="simple-translate-candidate" style={candidateStyles}>
+            <p className="simple-translate-candidate" style={candidateStyles} dir="auto">
               {splitLine(candidateText)}
             </p>
             {isError && (
diff --git a/src/content/styles/TranslatePanel.scss b/src/content/styles/TranslatePanel.scss
index 8869725..f264056 100644
--- a/src/content/styles/TranslatePanel.scss
+++ b/src/content/styles/TranslatePanel.scss
@@ -45,7 +45,6 @@
           margin: 0;
           font-family: "Segoe UI", "San Francisco", "Ubuntu", "Fira Sans", "Roboto", "Arial",
             "Helvetica", sans-serif !important;
-          text-align: left;
           word-wrap: break-word;
           font-size: inherit;
           line-height: 150%;
diff --git a/src/popup/components/InputArea.js b/src/popup/components/InputArea.js
index 66ddb74..c2730da 100644
--- a/src/popup/components/InputArea.js
+++ b/src/popup/components/InputArea.js
@@ -38,6 +38,7 @@ export default class InputArea extends Component {
           onChange={this.handleInputText}
           autoFocus
           spellCheck={false}
+          dir="auto"
         />
         <div className="listen">
           {sourceLang && <ListenButton text={inputText} lang={sourceLang} />}
diff --git a/src/popup/components/ResultArea.js b/src/popup/components/ResultArea.js
index 9ade64f..6f03e97 100644
--- a/src/popup/components/ResultArea.js
+++ b/src/popup/components/ResultArea.js
@@ -26,8 +26,8 @@ export default props => {
 
   return (
     <div id="resultArea">
-      <p className="resultText">{splitLine(resultText)}</p>
-      {shouldShowCandidate && <p className="candidateText">{splitLine(candidateText)}</p>}
+      <p className="resultText" dir="auto">{splitLine(resultText)}</p>
+      {shouldShowCandidate && <p className="candidateText" dir="auto">{splitLine(candidateText)}</p>}
       {isError && <p className="error">{getErrorMessage(statusText)}</p>}
       {isError && (
         <p className="translateLink">
diff --git a/src/popup/styles/ResultArea.scss b/src/popup/styles/ResultArea.scss
index 4d0d34e..e293520 100644
--- a/src/popup/styles/ResultArea.scss
+++ b/src/popup/styles/ResultArea.scss
@@ -40,6 +40,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
+    margin-top: 1em;
     margin-right: 5px;
     & > * {
       margin-left: 10px;