update modal / message / styles

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}

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';

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 })}
       >

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);

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>
     );

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);
+}