From 31b1494a5e692ea160c847a496db14c647f2bb8e Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Wed, 9 May 2018 20:47:08 -0600
Subject: [PATCH] update modal / message / styles

---
 src/renderer/component/button/view.jsx         |  1 +
 src/renderer/component/externalLink/index.js   |  1 -
 src/renderer/component/externalLink/view.jsx   |  5 +++--
 .../modal/modalOpenExternalLink/index.js       |  4 +---
 .../modal/modalOpenExternalLink/view.jsx       | 18 ++++++++++++------
 .../scss/component/_markdown-preview.scss      | 16 ++++++++--------
 6 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/renderer/component/button/view.jsx b/src/renderer/component/button/view.jsx
index 9fe8e1dc3..f622ff28a 100644
--- a/src/renderer/component/button/view.jsx
+++ b/src/renderer/component/button/view.jsx
@@ -95,6 +95,7 @@ class Button extends React.PureComponent<Props> {
       </a>
     ) : (
       <button
+        title={title}
         aria-label={description || label || title}
         className={combinedClassName}
         onClick={extendedOnClick}
diff --git a/src/renderer/component/externalLink/index.js b/src/renderer/component/externalLink/index.js
index 806dd7499..3095951c7 100644
--- a/src/renderer/component/externalLink/index.js
+++ b/src/renderer/component/externalLink/index.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { connect } from 'react-redux';
 import { doNotify } from 'lbry-redux';
 import ExternalLink from './view';
diff --git a/src/renderer/component/externalLink/view.jsx b/src/renderer/component/externalLink/view.jsx
index 7f2bf9928..b3362de66 100644
--- a/src/renderer/component/externalLink/view.jsx
+++ b/src/renderer/component/externalLink/view.jsx
@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import * as React from 'react';
 import { MODALS } from 'lbry-redux';
 import Button from 'component/button';
 
@@ -7,7 +7,7 @@ type Props = {
   href?: string,
   title?: string,
   children: React.Node,
-  openModal: string => void,
+  openModal: ({ id: string }, { url: string }) => void,
 };
 
 class ExternalLink extends React.PureComponent<Props> {
@@ -20,6 +20,7 @@ class ExternalLink extends React.PureComponent<Props> {
     return href ? (
       <Button
         button="link"
+        className="btn--external-link"
         title={title}
         onClick={() => openModal({ id: MODALS.CONFIRM_EXTERNAL_LINK }, { url: href })}
       >
diff --git a/src/renderer/modal/modalOpenExternalLink/index.js b/src/renderer/modal/modalOpenExternalLink/index.js
index 6efc9efbe..2703b100e 100644
--- a/src/renderer/modal/modalOpenExternalLink/index.js
+++ b/src/renderer/modal/modalOpenExternalLink/index.js
@@ -2,10 +2,8 @@ import { connect } from 'react-redux';
 import { doHideNotification } from 'lbry-redux';
 import ModalOpenExternalLink from './view';
 
-const select = () => ({});
-
 const perform = dispatch => ({
   closeModal: () => dispatch(doHideNotification()),
 });
 
-export default connect(select, perform)(ModalOpenExternalLink);
+export default connect(null, perform)(ModalOpenExternalLink);
diff --git a/src/renderer/modal/modalOpenExternalLink/view.jsx b/src/renderer/modal/modalOpenExternalLink/view.jsx
index ea18032d1..7a92b75c1 100644
--- a/src/renderer/modal/modalOpenExternalLink/view.jsx
+++ b/src/renderer/modal/modalOpenExternalLink/view.jsx
@@ -10,9 +10,12 @@ type Props = {
 
 class ModalOpenExternalLink extends React.PureComponent<Props> {
   openExternalLink() {
-    const { url } = this.props;
+    const { url, closeModal } = this.props;
     const { openExternal } = shell;
-    openExternal(url);
+    if (url) {
+      openExternal(url);
+    }
+    closeModal();
   }
 
   render() {
@@ -23,13 +26,16 @@ class ModalOpenExternalLink extends React.PureComponent<Props> {
         contentLabel={__('Confirm External Link')}
         type="confirm"
         confirmButtonLabel={__('Continue')}
-        onConfirmed={() => this.openExternalLink(url)}
+        onConfirmed={() => this.openExternalLink()}
         onAborted={closeModal}
       >
+        <h1>Warning!</h1>
+        <p>{__('This link leads to an external website.')}</p>
+        <blockquote>{url}</blockquote>
         <p>
-          {__('This link leads to an external website:')}
-          <cite>{url}</cite>
-          {__('LBRY Inc is not responsible for its content, click OK to proceed at your own risk.')}
+          {__(
+            'LBRY Inc is not responsible for its content, click continue to proceed at your own risk.'
+          )}
         </p>
       </Modal>
     );
diff --git a/src/renderer/scss/component/_markdown-preview.scss b/src/renderer/scss/component/_markdown-preview.scss
index 51ed84cbf..2fbc8011d 100644
--- a/src/renderer/scss/component/_markdown-preview.scss
+++ b/src/renderer/scss/component/_markdown-preview.scss
@@ -8,14 +8,6 @@
   margin: 16px 0;
 }
 
-.markdown-preview blockquote {
-  padding: 8px;
-  margin: 16px 0;
-  color: var(--color-help);
-  border-left: 2px solid var(--color-help);
-  background-color: var(--color-bg-alt);
-}
-
 .markdown-preview table {
   padding: 8px;
   margin: 16px 0;
@@ -48,3 +40,11 @@
 .markdown-preview del {
   color: var(--color-help);
 }
+
+blockquote {
+  padding: 8px;
+  margin: 16px 0;
+  color: var(--color-help);
+  border-left: 2px solid var(--color-help);
+  background-color: var(--color-bg-alt);
+}