From 3ba6110f59684b075a57b3c60f9994d4632feaed Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sun, 21 May 2017 13:35:00 +0900
Subject: [PATCH] Refactor Dialog with Aphrodite

Closes #8984

Per https://github.com/brave/browser-laptop/commit/2dd92a9eb3b42053ceaafc32a63e1d3508e8c039, dialog.less can be safely removed (as styles under 'menu' has been just copied).

Test Plan:
1. Open 'Import Browser Data...' from Bookmarks on the main menu
2. Open devtool
3. Make sure 'dialog' is styled properly
---
 app/renderer/components/common/dialog.js | 20 +++++-
 js/entry.js                              |  1 -
 less/dialogs.less                        | 85 ------------------------
 3 files changed, 19 insertions(+), 87 deletions(-)
 delete mode 100644 less/dialogs.less

diff --git a/app/renderer/components/common/dialog.js b/app/renderer/components/common/dialog.js
index 9c898a11f0f..2a0aee268cd 100644
--- a/app/renderer/components/common/dialog.js
+++ b/app/renderer/components/common/dialog.js
@@ -14,6 +14,9 @@ const KeyCodes = require('../../../common/constants/keyCodes')
 // Utils
 const cx = require('../../../../js/lib/classSet')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+
 /**
  * Represents a popup dialog
  */
@@ -39,7 +42,7 @@ class Dialog extends ImmutableComponent {
 
   render () {
     return <div className={cx({
-      dialog: true,
+      [css(styles.dialog)]: true,
       [this.props.className]: !!this.props.className
     })}
       data-test-id={this.props.testId}
@@ -64,4 +67,19 @@ Dialog.propTypes = {
   onHide: PropTypes.func
 }
 
+const styles = StyleSheet.create({
+  dialog: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: '100%',
+    width: '100%',
+    zIndex: globalStyles.zindex.zindexDialogs,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    background: 'rgba(0, 0, 0, 0.15)'
+  }
+})
+
 module.exports = Dialog
diff --git a/js/entry.js b/js/entry.js
index 8ff135b9688..51d9fa4adb3 100644
--- a/js/entry.js
+++ b/js/entry.js
@@ -12,7 +12,6 @@ require('../less/forms.less')
 require('../less/switchControls.less')
 require('../less/tabs.less')
 require('../less/findbar.less')
-require('../less/dialogs.less')
 require('../less/downloadBar.less')
 require('../less/bookmarksToolbar.less')
 require('../less/notificationBar.less')
diff --git a/less/dialogs.less b/less/dialogs.less
deleted file mode 100644
index 75bf3959f97..00000000000
--- a/less/dialogs.less
+++ /dev/null
@@ -1,85 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-@import "variables.less";
-
-.dialog {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: @zindexDialogs;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgba(0, 0, 0, 0.15);
-
-  menu {
-    height: 300px;
-    width: 500px;
-    flex: 0 0 auto;
-    background: #3a3a3a;
-    color: #fff;
-    font-size: 13px;
-    display: flex;
-    flex-direction: column;
-
-    &.contextMenuWithPosition {
-      height: auto;
-      padding: 10px;
-      width: auto;
-
-      span {
-        width: 250px;
-      }
-    }
-
-    h1 {
-      border-bottom: 1px solid #444444;
-      margin-bottom: 10px;
-      padding-bottom: 10px;
-      padding: 10px 14px;
-      font-size:18px;
-      font-weight: normal;
-    }
-
-    p, li, form {
-      padding: 10px 14px;
-    }
-
-    span {
-      display: block;
-      box-sizing: border-box;
-      &+span {
-        border-top: 1px solid #444444;
-      }
-      width: 100%;
-      padding: 10px 14px;
-
-      &.option:hover {
-        background-color: @highlightBlue;
-        cursor: pointer;
-      }
-    }
-
-    section.body {
-      border-bottom: 1px solid #444444;
-      flex: 1 1 auto;
-
-      input {
-        width: 100%;
-      }
-
-      ul {
-        list-style-type: none;
-      }
-
-      ul.select li:hover {
-        background: #008FFF;
-        cursor: pointer;
-      }
-    }
-  }
-}