Refactor ReleaseNotes with Aphrodite

Closes #7171

Auditors:

Test Plan:
1. Test that updating using BRAVE_UPDATE_VERSION=0.8.3 env variable works correctly
2. Click "Details"
3. Check the design of the dialog

app/renderer/components/releaseNotes.js

@@ -0,0 +1,42 @@
+/* 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/. */
+
+const React = require('react')
+const ImmutableComponent = require('../../../js/components/immutableComponent')
+const Dialog = require('../../../js/components/dialog')
+const {StyleSheet, css} = require('aphrodite')
+const commonStyles = require('./styles/commonStyles')
+
+class ReleaseNotes extends ImmutableComponent {
+  onClick (e) {
+    e.stopPropagation()
+  }
+  render () {
+    const className = css(
+      commonStyles.flyoutDialog,
+      styles.releaseNotes
+    )
+
+    return <Dialog onHide={this.props.onHide} isClickDismiss>
+      <div className={className} onClick={this.onClick.bind(this)}>
+        <h1 className={css(styles.header)}>{this.props.metadata.get('name')}</h1>
+        <div>{this.props.metadata.get('notes')}</div>
+      </div>
+    </Dialog>
+  }
+}
+
+const styles = StyleSheet.create({
+  releaseNotes: {
+    width: 'auto',
+    maxWidth: '350px',
+    textAlign: 'left'
+  },
+
+  header: {
+    marginBottom: '10px'
+  }
+})
+
+module.exports = ReleaseNotes

app/renderer/components/styles/commonStyles.js

@@ -6,7 +6,7 @@ const {StyleSheet} = require('aphrodite')
 const globalStyles = require('./global')
 
 const styles = StyleSheet.create({
-  'formControl': {
+  formControl: {
     background: 'white',
     border: `solid 1px ${globalStyles.color.black20}`,
     borderRadius: globalStyles.radius.borderRadius,
@@ -21,6 +21,18 @@ const styles = StyleSheet.create({
     width: '100%'
   },
 
+  flyoutDialog: {
+    backgroundColor: globalStyles.color.toolbarBackground,
+    borderRadius: globalStyles.radius.borderRadius,
+    boxShadow: '2px 2px 8px #3b3b3b',
+    color: '#000',
+    fontSize: '13px',
+    padding: '10px 30px',
+    position: 'absolute',
+    textAlign: 'left',
+    top: globalStyles.spacing.dialogTopOffset
+  },
+
   browserButton: {
     border: 'none',
     margin: '0',

app/renderer/components/styles/global.js

@@ -106,7 +106,8 @@ const globalStyles = {
     aboutPageSectionPadding: '24px',
     defaultTabPadding: '0 4px',
     defaultIconPadding: '2px',
-    iconSize: '16px'
+    iconSize: '16px',
+    dialogTopOffset: '30px'
   },
   shadow: {
     switchShadow: 'inset 0 1px 4px rgba(0, 0, 0, 0.35)',

js/components/main.js

@@ -36,7 +36,7 @@ const AutofillAddressPanel = require('./autofillAddressPanel')
 const AutofillCreditCardPanel = require('./autofillCreditCardPanel')
 const AddEditBookmark = require('./addEditBookmark')
 const LoginRequired = require('./loginRequired')
-const ReleaseNotes = require('./releaseNotes')
+const ReleaseNotes = require('../../app/renderer/components/releaseNotes')
 const BookmarksToolbar = require('../../app/renderer/components/bookmarksToolbar')
 const ContextMenu = require('./contextMenu')
 const PopupWindow = require('./popupWindow')

less/forms.less

@@ -5,6 +5,7 @@ select {
   box-sizing: border-box;
 }
 
+// Copied to commonStyles.js
 .flyoutDialog {
   background-color: @toolbarBackground;
   border-radius: @borderRadius;
@@ -17,17 +18,6 @@ select {
   top: @dialogTopOffset;
 }
 
-.releaseNotes {
-  .flyoutDialog;
-  width: auto;
-  max-width: 350px;
-  text-align: left;
-
-  h1 {
-    margin-bottom: 10px;
-  }
-}
-
 .siteInfo {
   >ul {
     .flyoutDialog;