💄 Add support menu for RTL languages

brave · Jun 4, 2019 · 96d2645 · 96d2645
1 parent 1846b88
commit 96d2645
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git 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
@@ -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>
     )
   }
 }