From 6127557e3a68172dc9d0c83e15978f292be3add6 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Tue, 2 May 2017 23:18:17 +0900
Subject: [PATCH] Fix alignment of showSuppress message and buttons on
 messageBox

Closes #8598

Auditors:

Test Plan:
1. Open about:preferences#sync
2. Click "Reset Sync"
3. Click "Reset Sync" on the modal dialog
4. Click "Cancel"
5. Click "Reset Sync" again
6. Make sure there exists margin between the supress message and the buttons on the footer
---
 app/renderer/components/common/messageBox.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/renderer/components/common/messageBox.js b/app/renderer/components/common/messageBox.js
index 8cfe9a2aab..5a6ad35645 100644
--- a/app/renderer/components/common/messageBox.js
+++ b/app/renderer/components/common/messageBox.js
@@ -123,7 +123,10 @@ class MessageBox extends ImmutableComponent {
             this.showSuppress
               ? <SwitchControl
                 // TODO: refactor SwitchControl
-                className={css(commonStyles.noPaddingLeft)}
+                className={css(
+                  commonStyles.noPaddingLeft,
+                  styles.switchControl_marginBottom
+                )}
                 rightl10nId='preventMoreAlerts'
                 checkedOn={this.suppress}
                 onClick={this.onSuppressChanged} />
@@ -164,11 +167,16 @@ const styles = StyleSheet.create({
   },
   actions: {
     display: 'flex',
+    flexFlow: 'column nowrap',
     justifyContent: 'space-between'
   },
   buttons: {
     display: 'flex',
     justifyContent: 'flex-end'
+  },
+
+  switchControl_marginBottom: {
+    marginBottom: `calc(${globalStyles.spacing.dialogInsideMargin} - 5px)` // 5px = padding of SwitchControl
   }
 })