Add support for RTL languages (#264)

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 && (

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

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

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

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;