diff --git a/src/components/connection-modal/auto-scanning-step.jsx b/src/components/connection-modal/auto-scanning-step.jsx
index a73c0b58db974d065bc2d3372cee0c43595ad8ec..b6f0dd813aed2ca8397b45d1ce622d09009509fa 100644
--- a/src/components/connection-modal/auto-scanning-step.jsx
+++ b/src/components/connection-modal/auto-scanning-step.jsx
@@ -63,7 +63,7 @@ const AutoScanningStep = props => (
</div>
</Box>
<Box className={styles.bottomArea}>
- <Box className={styles.instructions}>
+ <Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
{props.phase === PHASES.prescan && (
<FormattedMessage
defaultMessage="Have your device nearby, then begin searching."
@@ -80,60 +80,63 @@ const AutoScanningStep = props => (
)}
</Box>
<Dots
+ className={styles.bottomAreaItem}
counter={0}
total={3}
/>
- {props.phase === PHASES.prescan && (
- <button
- className={styles.connectionButton}
- onClick={props.onStartScan}
- >
- <FormattedMessage
- defaultMessage="Start Searching"
- description="Button in prompt for starting a search"
- id="gui.connection.auto-scanning.start-search"
- />
- </button>
- )}
- {props.phase === PHASES.pressbutton && (
- <div className={styles.segmentedButton}>
+ <Box className={classNames(styles.bottomAreaItem, styles.buttonRow)}>
+ {props.phase === PHASES.prescan && (
<button
- disabled
className={styles.connectionButton}
+ onClick={props.onStartScan}
>
<FormattedMessage
- defaultMessage="Searching..."
- description="Label indicating that search is in progress"
- id="gui.connection.connecting-searchbutton"
+ defaultMessage="Start Searching"
+ description="Button in prompt for starting a search"
+ id="gui.connection.auto-scanning.start-search"
/>
</button>
+ )}
+ {props.phase === PHASES.pressbutton && (
+ <div className={styles.segmentedButton}>
+ <button
+ disabled
+ className={styles.connectionButton}
+ >
+ <FormattedMessage
+ defaultMessage="Searching..."
+ description="Label indicating that search is in progress"
+ id="gui.connection.connecting-searchbutton"
+ />
+ </button>
+ <button
+ className={styles.connectionButton}
+ onClick={props.onRefresh}
+ >
+ <img
+ className={styles.abortConnectingIcon}
+ src={closeIcon}
+ />
+ </button>
+ </div>
+ )}
+ {props.phase === PHASES.notfound && (
<button
className={styles.connectionButton}
onClick={props.onRefresh}
>
<img
- className={styles.abortConnectingIcon}
- src={closeIcon}
+ className={styles.buttonIconLeft}
+ src={backIcon}
+ />
+ <FormattedMessage
+ defaultMessage="Try again"
+ description="Button in prompt for trying a device search again"
+ id="gui.connection.auto-scanning.try-again"
/>
</button>
- </div>
- )}
- {props.phase === PHASES.notfound && (
- <button
- className={styles.connectionButton}
- onClick={props.onRefresh}
- >
- <img
- className={styles.buttonIconLeft}
- src={backIcon}
- />
- <FormattedMessage
- defaultMessage="Try again"
- description="Button in prompt for trying a device search again"
- id="gui.connection.auto-scanning.try-again"
- />
- </button>
- )}
+ )}
+ </Box>
</Box>
</Box>
);
diff --git a/src/components/connection-modal/connected-step.jsx b/src/components/connection-modal/connected-step.jsx
index aa71c63c8a11730b8a30379de6112a2be98150d4..f71b3556ede2a6b882ac15fe1c2c6fc09b496f3d 100644
--- a/src/components/connection-modal/connected-step.jsx
+++ b/src/components/connection-modal/connected-step.jsx
@@ -25,7 +25,7 @@ const ConnectedStep = props => (
</Box>
</Box>
<Box className={styles.bottomArea}>
- <Box className={styles.instructions}>
+ <Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
<FormattedMessage
defaultMessage="Connected"
description="Message indicating that a device was connected"
@@ -34,9 +34,10 @@ const ConnectedStep = props => (
</Box>
<Dots
success
+ className={styles.bottomAreaItem}
total={3}
/>
- <div className={styles.cornerButtons}>
+ <div className={classNames(styles.bottomAreaItem, styles.cornerButtons)}>
<button
className={classNames(styles.redButton, styles.connectionButton)}
onClick={props.onDisconnect}
diff --git a/src/components/connection-modal/connecting-step.jsx b/src/components/connection-modal/connecting-step.jsx
index e4753628677d3f7532b72f9c498823ba38215ce2..e4821d001ba68b105952509b123ac82891d35ad8 100644
--- a/src/components/connection-modal/connecting-step.jsx
+++ b/src/components/connection-modal/connecting-step.jsx
@@ -1,6 +1,7 @@
import {FormattedMessage} from 'react-intl';
import PropTypes from 'prop-types';
import React from 'react';
+import classNames from 'classnames';
import Box from '../box/box.jsx';
import Dots from './dots.jsx';
@@ -27,14 +28,15 @@ const ConnectingStep = props => (
</Box>
</Box>
<Box className={styles.bottomArea}>
- <Box className={styles.instructions}>
+ <Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
{props.connectingMessage}
</Box>
<Dots
+ className={styles.bottomAreaItem}
counter={1}
total={3}
/>
- <div className={styles.segmentedButton}>
+ <div className={classNames(styles.bottomAreaItem, styles.segmentedButton)}>
<button
disabled
className={styles.connectionButton}
diff --git a/src/components/connection-modal/connection-modal.css b/src/components/connection-modal/connection-modal.css
index f024489c591456d75b65e6170f1ace7c71748351..27c970b932130f7728d92031bff6db25babe7bd5 100644
--- a/src/components/connection-modal/connection-modal.css
+++ b/src/components/connection-modal/connection-modal.css
@@ -29,7 +29,6 @@
overflow-y: auto;
width: 100%;
height: 100%;
- padding: 0.5rem;
}
.peripheral-tile {
@@ -225,6 +224,7 @@
display: flex;
justify-content: center;
align-items: center;
+ padding: .5rem;
}
.scratch-link-help {
@@ -232,7 +232,8 @@
flex-direction: column;
justify-content: space-around;
height: 100%;
- padding: 1rem 0;
+ padding-top: .5rem;
+ padding-bottom: .5rem;
}
.scratch-link-help-step {
@@ -243,11 +244,11 @@
}
[dir="ltr"] .scratch-link-help-step {
- margin-left: 3rem;
+ margin-left: 2.5rem;
}
[dir="rtl"] .scratch-link-help-step {
- margin-right: 3rem;
+ margin-right: 2.5rem;
}
.scratch-link-icon {
@@ -364,12 +365,18 @@
display: flex;
flex-direction: column;
align-items: center;
- padding-bottom: 12px;
+ padding-top: 1rem;
+ padding-bottom: .75rem;
+ padding-left: .75rem;
+ padding-right: .75rem;
+}
+
+.bottom-area .bottom-area-item+.bottom-area-item {
+ margin-top: 1rem;
}
.instructions {
text-align: center;
- margin-top: 1rem;
}
.dots-row {
@@ -377,7 +384,6 @@
flex-direction: row;
justify-content: center;
align-items: center;
- margin: 1rem;
}
.dots-holder {
diff --git a/src/components/connection-modal/dots.jsx b/src/components/connection-modal/dots.jsx
index 23814eaf75ecffed01d5f964da940e8c22277448..6dbfe99516acb792249c9f8e7c8eaf092f97b107 100644
--- a/src/components/connection-modal/dots.jsx
+++ b/src/components/connection-modal/dots.jsx
@@ -6,7 +6,12 @@ import Box from '../box/box.jsx';
import styles from './connection-modal.css';
const Dots = props => (
- <Box className={styles.dotsRow}>
+ <Box
+ className={classNames(
+ props.className,
+ styles.dotsRow
+ )}
+ >
<div
className={classNames(
styles.dotsHolder,
@@ -32,6 +37,7 @@ const Dots = props => (
);
Dots.propTypes = {
+ className: PropTypes.string,
counter: PropTypes.number,
error: PropTypes.bool,
success: PropTypes.bool,
diff --git a/src/components/connection-modal/error-step.jsx b/src/components/connection-modal/error-step.jsx
index 21dcd8d54c92c4138862a053fe19e849835e744c..e0344c876ce42139e275f7778fc311f6053c2fac 100644
--- a/src/components/connection-modal/error-step.jsx
+++ b/src/components/connection-modal/error-step.jsx
@@ -23,7 +23,7 @@ const ErrorStep = props => (
</Box>
</Box>
<Box className={styles.bottomArea}>
- <div className={styles.instructions}>
+ <div className={classNames(styles.bottomAreaItem, styles.instructions)}>
<FormattedMessage
defaultMessage="Oops, looks like something went wrong."
description="The device connection process has encountered an error."
@@ -32,9 +32,10 @@ const ErrorStep = props => (
</div>
<Dots
error
+ className={styles.bottomAreaItem}
total={3}
/>
- <Box className={styles.buttonRow}>
+ <Box className={classNames(styles.bottomAreaItem, styles.buttonRow)}>
<button
className={styles.connectionButton}
onClick={props.onScanning}
diff --git a/src/components/connection-modal/scanning-step.jsx b/src/components/connection-modal/scanning-step.jsx
index bb6276ac09bf575012e3e90039b852d5f6a76a97..88ba672714ea95b587f5050a4b79c7349bcca981 100644
--- a/src/components/connection-modal/scanning-step.jsx
+++ b/src/components/connection-modal/scanning-step.jsx
@@ -55,7 +55,7 @@ const ScanningStep = props => (
)}
</Box>
<Box className={styles.bottomArea}>
- <Box className={styles.instructions}>
+ <Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
<FormattedMessage
defaultMessage="Select your device in the list above."
description="Prompt for choosing a device to connect to"
@@ -63,11 +63,12 @@ const ScanningStep = props => (
/>
</Box>
<Dots
+ className={styles.bottomAreaItem}
counter={0}
total={3}
/>
<button
- className={styles.connectionButton}
+ className={classNames(styles.bottomAreaItem, styles.connectionButton)}
onClick={props.onRefresh}
>
<FormattedMessage
diff --git a/src/components/connection-modal/unavailable-step.jsx b/src/components/connection-modal/unavailable-step.jsx
index ae89404a1952d8ccded43103dc0b1b6af50cf036..9f45f0c10fa072735c39ab851d60d8464b96b453 100644
--- a/src/components/connection-modal/unavailable-step.jsx
+++ b/src/components/connection-modal/unavailable-step.jsx
@@ -57,9 +57,10 @@ const UnavailableStep = props => (
<Box className={styles.bottomArea}>
<Dots
error
+ className={styles.bottomAreaItem}
total={3}
/>
- <Box className={styles.buttonRow}>
+ <Box className={classNames(styles.bottomAreaItem, styles.buttonRow)}>
<button
className={styles.connectionButton}
onClick={props.onScanning}