Style modals as per QuickSwitch modal

2 files changed, 73 insertions, 81 deletions

diff --git a/src/features/nightlyBuilds/Component.js b/src/features/nightlyBuilds/Component.js
index 0966480d0..fc7663211 100644
--- a/src/features/nightlyBuilds/Component.js
+++ b/src/features/nightlyBuilds/Component.js
@@ -29,14 +29,21 @@ const messages = defineMessages({
   },
 });
 
-const styles = {
+const styles = theme => ({
+  modal: {
+    width: '80%',
+    maxWidth: 600,
+    background: theme.styleTypes.primary.contrast,
+    color: theme.styleTypes.primary.accent,
+    paddingTop: 30,
+  },
   info: {
-    paddingTop: 20,
     paddingBottom: 20,
   },
   headline: {
     fontSize: 20,
     marginBottom: 20,
+    marginTop: -27,
   },
   buttonContainer: {
     display: 'flex',
@@ -51,7 +58,7 @@ const styles = {
     background: '#c45a5a !important',
     color: '#ffffff !important',
   },
-};
+});
 
 class NightlyBuildsModal extends Component {
   close() {
@@ -88,6 +95,7 @@ class NightlyBuildsModal extends Component {
     return (
       <Modal
         isOpen={isModalVisible}
+        className={`${classes.modal} nightly-builds`}
         shouldCloseOnOverlayClick
         close={this.close.bind(this)}
       >
diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js
index 5ffe535e0..8bdb50cb4 100644
--- a/src/features/publishDebugInfo/Component.js
+++ b/src/features/publishDebugInfo/Component.js
@@ -8,7 +8,7 @@ import { state as ModalState } from './store';
 import { H1 } from '../../components/ui/headline';
 import { sendAuthRequest } from '../../api/utils/auth';
 import Button from '../../components/ui/Button';
-import Input from '../../components/ui/Input';
+import { Input } from '../../components/ui/input/index';
 import Modal from '../../components/ui/Modal';
 import { DEBUG_API } from '../../config';
 import AppStore from '../../stores/AppStore';
@@ -50,11 +50,19 @@ const messages = defineMessages({
 });
 
 const styles = theme => ({
-  container: {
-    minWidth: '70vw',
+  modal: {
+    width: '80%',
+    maxWidth: 600,
+    background: theme.styleTypes.primary.contrast,
+    color: theme.styleTypes.primary.accent,
+    paddingTop: 30,
+  },
+  headline: {
+    fontSize: 20,
+    marginBottom: 20,
+    marginTop: -27,
   },
   info: {
-    paddingTop: 20,
     paddingBottom: 20,
   },
   link: {
@@ -67,22 +75,6 @@ const styles = theme => ({
     marginTop: 10,
     cursor: 'pointer',
   },
-  url: {
-    marginTop: 20,
-    width: '100%',
-
-    '& div': {
-      fontFamily:
-        'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace',
-    },
-
-    '& input': {
-      width: '100%',
-      padding: 15,
-      borderRadius: 6,
-      border: `solid 1px ${theme.styleTypes.primary.accent}`,
-    },
-  },
 });
 
 class PublishDebugLogModal extends Component {
@@ -156,66 +148,58 @@ class PublishDebugLogModal extends Component {
         isOpen={isModalVisible}
         shouldCloseOnOverlayClick
         className={`${classes.modal} publish-debug`}
-        classes={{close: 'close'}}
         close={() => this.close()}
       >
-        <div className={classes.container}>
-          <H1>{intl.formatMessage(messages.title)}</H1>
-          {log && (
-            <>
-              <p className={classes.info}>
-                {intl.formatMessage(messages.published)}
-              </p>
-              <Input
-                className={classes.url}
-                showLabel={false}
-                field={{
-                  type: 'url',
-                  value: `${DEBUG_API}/${log}`,
-                  disabled: true,
-                }}
-                readonly
-              />
-            </>
-          )}
-
-          {error && (
-            <p className={classes.info}>{intl.formatMessage(messages.error)}</p>
-          )}
-
-          {!log && !error && (
-            <>
-              <p className={classes.info}>
-                {intl.formatMessage(messages.info)}
-              </p>
-
-              <a
-                href={`${DEBUG_API}/privacy.html`}
-                target="_blank"
-                className={classes.link}
-                rel="noreferrer"
-              >
-                {intl.formatMessage(messages.privacy)}
-              </a>
-              <a
-                href={`${DEBUG_API}/terms.html`}
-                target="_blank"
-                className={classes.link}
-                rel="noreferrer"
-              >
-                {intl.formatMessage(messages.terms)}
-              </a>
-
-              <Button
-                type="button"
-                label={intl.formatMessage(messages.publish)}
-                className={classes.button}
-                onClick={() => this.publishDebugInfo()}
-                disabled={isSendingLog}
-              />
-            </>
-          )}
-        </div>
+        <H1 className={classes.headline}>{intl.formatMessage(messages.title)}</H1>
+        {log && (
+          <>
+            <p className={classes.info}>
+              {intl.formatMessage(messages.published)}
+            </p>
+            <Input
+              showLabel={false}
+              value={`${DEBUG_API}/${log}`}
+              readonly
+            />
+          </>
+        )}
+
+        {error && (
+          <p className={classes.info}>{intl.formatMessage(messages.error)}</p>
+        )}
+
+        {!log && !error && (
+          <>
+            <p className={classes.info}>
+              {intl.formatMessage(messages.info)}
+            </p>
+
+            <a
+              href={`${DEBUG_API}/privacy.html`}
+              target="_blank"
+              className={classes.link}
+              rel="noreferrer"
+            >
+              {intl.formatMessage(messages.privacy)}
+            </a>
+            <a
+              href={`${DEBUG_API}/terms.html`}
+              target="_blank"
+              className={classes.link}
+              rel="noreferrer"
+            >
+              {intl.formatMessage(messages.terms)}
+            </a>
+
+            <Button
+              type="button"
+              label={intl.formatMessage(messages.publish)}
+              className={classes.button}
+              onClick={() => this.publishDebugInfo()}
+              disabled={isSendingLog}
+            />
+          </>
+        )}
       </Modal>
     );
   }