From 96d26453ab845dfc3f69ea9f89b6298c439dede9 Mon Sep 17 00:00:00 2001
From: Peter Xu <peterxura@gmail.com>
Date: Tue, 4 Jun 2019 16:10:43 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20support=20menu=20for=20RTL?=
 =?UTF-8?q?=20languages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/newTab/default/settings/index.ts | 20 +++++++++-----
 stories/features/newTab/default/settings.tsx  | 26 ++++++++++---------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/features/newTab/default/settings/index.ts b/src/features/newTab/default/settings/index.ts
index fa905beeb..f78618c0e 100644
--- a/src/features/newTab/default/settings/index.ts
+++ b/src/features/newTab/default/settings/index.ts
@@ -9,15 +9,8 @@ export const SettingsMenu = styled<{}, 'div'>('div')`
   color:  ${p => p.theme.color.contextMenuForeground};
   border-radius: 8px;
   padding: 24px;
-  position: absolute;
-  bottom: 118px;
-  right: 222px;
   box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.24);
   font-family: ${p => p.theme.fontFamily.body};
-
-  @media screen and (max-width: 904px) {
-    right: 192px;
-  }
 `
 
 export const SettingsTitle = styled<{}, 'div'>('div')`
@@ -42,3 +35,16 @@ export const SettingsText = styled<{}, 'span'>('span')`
   font-size: 14px;
   font-weight: normal;
 `
+
+export const SettingsWrapper = styled<{}, 'div'>('div')`
+  position: absolute;
+  bottom: 118px;
+  padding: 0 222px;
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+
+  @media screen and (max-width: 904px) {
+    padding: 0 192px;
+  }
+`
diff --git a/stories/features/newTab/default/settings.tsx b/stories/features/newTab/default/settings.tsx
index bbe02c96c..5a29c8f4d 100644
--- a/stories/features/newTab/default/settings.tsx
+++ b/stories/features/newTab/default/settings.tsx
@@ -4,7 +4,7 @@
 
 import * as React from 'react'
 
-import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle } from '../../../../src/features/newTab/default/settings'
+import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper } from '../../../../src/features/newTab/default/settings'
 
 import { Toggle } from '../../../../src/features/newTab/toggle'
 
@@ -40,17 +40,19 @@ export default class Settings extends React.PureComponent<Props, {}> {
   render () {
     const { toggleShowBackgroundImage, showBackgroundImage } = this.props
     return (
-      <SettingsMenu innerRef={this.settingsMenuRef}>
-        <SettingsTitle>{getLocale('dashboardSettings')}</SettingsTitle>
-        <SettingsRow>
-          <SettingsText>{getLocale('showBackgroundImg')}</SettingsText>
-          <Toggle
-            onChange={toggleShowBackgroundImage}
-            checked={showBackgroundImage}
-            size='small'
-          />
-        </SettingsRow>
-      </SettingsMenu>
+      <SettingsWrapper>
+        <SettingsMenu innerRef={this.settingsMenuRef}>
+          <SettingsTitle>{getLocale('dashboardSettings')}</SettingsTitle>
+          <SettingsRow>
+            <SettingsText>{getLocale('showBackgroundImg')}</SettingsText>
+            <Toggle
+              onChange={toggleShowBackgroundImage}
+              checked={showBackgroundImage}
+              size='small'
+            />
+          </SettingsRow>
+        </SettingsMenu>
+      </SettingsWrapper>
     )
   }
 }