From 79f48d7b4a5d6630d1d76ec189789849ed5cd1c2 Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Wed, 27 Jun 2018 10:27:53 -0400
Subject: [PATCH] Clean up styles and add buttons in connected step
---
.../connection-modal/connected-step.jsx | 32 +++++++++++---
.../connection-modal/connecting-step.jsx | 4 +-
.../connection-modal/connection-modal.css | 44 ++++++++++---------
.../connection-modal/error-step.jsx | 6 +--
.../connection-modal/scanning-step.jsx | 22 +++++-----
5 files changed, 65 insertions(+), 43 deletions(-)
diff --git a/src/components/connection-modal/connected-step.jsx b/src/components/connection-modal/connected-step.jsx
index 589cc05bf..3dfe9e87a 100644
--- a/src/components/connection-modal/connected-step.jsx
+++ b/src/components/connection-modal/connected-step.jsx
@@ -6,26 +6,48 @@ import Box from '../box/box.jsx';
import Dots from './dots.jsx';
import styles from './connection-modal.css';
+import classNames from 'classnames';
// todo: update the flyout status button here?
// this.ScratchBlocks.updateStatusButton('microbit', this.ScratchBlocks.StatusButtonState.READY);
const ConnectedStep = props => (
<Box className={styles.body}>
- <Box className={styles.activityArea}>
- </Box>
+ <Box className={styles.activityArea} />
<Box className={styles.bottomArea}>
<Box className={styles.instructions}>
<FormattedMessage
- defaultMessage="🔥connected🔥"
- description="Button in prompt for starting a search"
- id="gui.connection.search"
+ defaultMessage="Connected"
+ description=""
+ id="gui.connection.connected"
/>
</Box>
<Dots
counter={3}
total={3}
/>
+ <div className={styles.cornerButtons}>
+ <button
+ className={classNames(styles.redButton, styles.connectionButton)}
+ onClick={props.onDisconnect}
+ >
+ <FormattedMessage
+ defaultMessage="disconnect"
+ description="Disconnect the "
+ id="gui.connection.disconnect"
+ />
+ </button>
+ <button
+ className={styles.connectionButton}
+ onClick={props.onCancel}
+ >
+ <FormattedMessage
+ defaultMessage="go to editor"
+ description=""
+ id="gui.connection.go to editor"
+ />
+ </button>
+ </div>
</Box>
</Box>
);
diff --git a/src/components/connection-modal/connecting-step.jsx b/src/components/connection-modal/connecting-step.jsx
index 8d0f43f4e..fd81bc153 100644
--- a/src/components/connection-modal/connecting-step.jsx
+++ b/src/components/connection-modal/connecting-step.jsx
@@ -14,7 +14,7 @@ const ConnectingStep = props => (
<Box className={styles.bottomArea}>
<Box className={styles.instructions}>
<FormattedMessage
- defaultMessage="🔌connecting🔌"
+ defaultMessage="Connecting"
description=""
id="gui.connection.connecting"
/>
@@ -24,7 +24,7 @@ const ConnectingStep = props => (
total={3}
/>
<button
- className={styles.blueButton}
+ className={styles.connectionButton}
onClick={props.onAbortConnecting}
>
<FormattedMessage
diff --git a/src/components/connection-modal/connection-modal.css b/src/components/connection-modal/connection-modal.css
index f7d6cb8da..61d1e2ede 100644
--- a/src/components/connection-modal/connection-modal.css
+++ b/src/components/connection-modal/connection-modal.css
@@ -18,24 +18,6 @@
margin: 0 0 0.75rem;
}
-.button-row {
- font-weight: bolder;
- text-align: center;
-}
-
-.blue-button {
- padding: 0.75rem 1rem;
- border-radius: 0.25rem;
- background: $motion-primary;
- color: white;
- font-weight: 600;
- font-size: 0.85rem;
- margin: 0.25rem;
-}
-
-.refresh-button {
-}
-
.device-tile-pane {
overflow-y: scroll;
width: 100%;
@@ -78,10 +60,32 @@
align-items: center;
}
-.activityAreaInfo {
+.button-row {
+ font-weight: bolder;
+ text-align: center;
+}
+
+.connection-button {
+ padding: 0.75rem 1rem;
+ border-radius: 0.5rem;
+ background: $motion-primary;
+ color: white;
+ font-weight: 600;
+ font-size: 0.85rem;
+ margin: 0.25rem;
+}
+
+.red-button {
+ background: $red-primary;
+}
+
+.corner-buttons {
+ display: flex;
+ justify-content: space-between;
+ padding: 1rem;
}
-.bottomArea {
+.bottom-area {
height: 150px;
background-color: $ui-white;
text-align: center;
diff --git a/src/components/connection-modal/error-step.jsx b/src/components/connection-modal/error-step.jsx
index 54cdb43d2..db0400006 100644
--- a/src/components/connection-modal/error-step.jsx
+++ b/src/components/connection-modal/error-step.jsx
@@ -8,8 +8,7 @@ import styles from './connection-modal.css';
const ErrorStep = props => (
<Box className={styles.body}>
- <Box className={styles.activityArea}>
- </Box>
+ <Box className={styles.activityArea} />
<Box className={styles.bottomArea}>
<div className={styles.instructions}>
<FormattedMessage
@@ -20,7 +19,6 @@ const ErrorStep = props => (
</div>
<Box className={styles.buttonRow}>
<button
- className={styles.blueButton}
onClick={props.onSearch}
>
<FormattedMessage
@@ -30,7 +28,7 @@ const ErrorStep = props => (
/>
</button>
<button
- className={styles.blueButton}
+ className={styles.connectionButton}
onClick={props.onSearch}
>
<FormattedMessage
diff --git a/src/components/connection-modal/scanning-step.jsx b/src/components/connection-modal/scanning-step.jsx
index 53988803d..03d7441fe 100644
--- a/src/components/connection-modal/scanning-step.jsx
+++ b/src/components/connection-modal/scanning-step.jsx
@@ -55,18 +55,16 @@ const ScanningStep = props => (
counter={1}
total={3}
/>
- <Box className={styles.buttonRow}>
- <button
- className={styles.blueButton}
- onClick={props.onRefresh}
- >
- <FormattedMessage
- defaultMessage="refresh"
- description="Button in prompt for starting a search"
- id="gui.connection.search"
- />
- </button>
- </Box>
+ <button
+ className={styles.connectionButton}
+ onClick={props.onRefresh}
+ >
+ <FormattedMessage
+ defaultMessage="refresh"
+ description="Button in prompt for starting a search"
+ id="gui.connection.search"
+ />
+ </button>
</Box>
</Box>
);
--
GitLab