From c8c80d523b432d2651865833a1eeb43f6567fc5b Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Sun, 18 Nov 2018 10:29:34 -0500
Subject: [PATCH] better padding, margin in extension connection modal
---
.../connection-modal/auto-scanning-step.jsx | 81 ++++++++++---------
.../connection-modal/connected-step.jsx | 5 +-
.../connection-modal/connecting-step.jsx | 6 +-
.../connection-modal/connection-modal.css | 17 ++--
src/components/connection-modal/dots.jsx | 8 +-
.../connection-modal/error-step.jsx | 5 +-
.../connection-modal/scanning-step.jsx | 5 +-
.../connection-modal/unavailable-step.jsx | 3 +-
8 files changed, 75 insertions(+), 55 deletions(-)
diff --git a/src/components/connection-modal/auto-scanning-step.jsx b/src/components/connection-modal/auto-scanning-step.jsx
index a73c0b58d..b6f0dd813 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 aa71c63c8..f71b3556e 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 e47536286..e4821d001 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 f024489c5..cc02da556 100644
--- a/src/components/connection-modal/connection-modal.css
+++ b/src/components/connection-modal/connection-modal.css
@@ -225,6 +225,7 @@
display: flex;
justify-content: center;
align-items: center;
+ padding: 1rem .5rem;
}
.scratch-link-help {
@@ -232,7 +233,6 @@
flex-direction: column;
justify-content: space-around;
height: 100%;
- padding: 1rem 0;
}
.scratch-link-help-step {
@@ -243,11 +243,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 +364,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 +383,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 23814eaf7..6dbfe9951 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 21dcd8d54..e0344c876 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 bb6276ac0..88ba67271 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 ae89404a1..9f45f0c10 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}
--
GitLab