Clean up styles and add buttons in connected step

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

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

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;

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

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