Skip to content
Snippets Groups Projects
Unverified Commit f8874851 authored by Benjamin Wheeler's avatar Benjamin Wheeler Committed by GitHub
Browse files

Merge pull request #3830 from benjiwheeler/modal-padding 

better padding, margin in device connection modal
parents 17e67186 b9a64db7
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 77 additions and 56 deletions
src/components/connection-modal/auto-scanning-step.jsx
+ 42
− 39
View file @ f8874851
...@@ -63,7 +63,7 @@ const AutoScanningStep = props => ( ...@@ -63,7 +63,7 @@ const AutoScanningStep = props => (
</div> </div>
</Box> </Box>
<Box className={styles.bottomArea}> <Box className={styles.bottomArea}>
<Box className={styles.instructions}> <Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
{props.phase === PHASES.prescan && ( {props.phase === PHASES.prescan && (
<FormattedMessage <FormattedMessage
defaultMessage="Have your device nearby, then begin searching." defaultMessage="Have your device nearby, then begin searching."
...@@ -80,60 +80,63 @@ const AutoScanningStep = props => ( ...@@ -80,60 +80,63 @@ const AutoScanningStep = props => (
)} )}
</Box> </Box>
<Dots <Dots
className={styles.bottomAreaItem}
counter={0} counter={0}
total={3} total={3}
/> />
{props.phase === PHASES.prescan && ( <Box className={classNames(styles.bottomAreaItem, styles.buttonRow)}>
<button {props.phase === PHASES.prescan && (
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}>
<button <button
disabled
className={styles.connectionButton} className={styles.connectionButton}
onClick={props.onStartScan}
> >
<FormattedMessage <FormattedMessage
defaultMessage="Searching..." defaultMessage="Start Searching"
description="Label indicating that search is in progress" description="Button in prompt for starting a search"
id="gui.connection.connecting-searchbutton" id="gui.connection.auto-scanning.start-search"
/> />
</button> </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 <button
className={styles.connectionButton} className={styles.connectionButton}
onClick={props.onRefresh} onClick={props.onRefresh}
> >
<img <img
className={styles.abortConnectingIcon} className={styles.buttonIconLeft}
src={closeIcon} src={backIcon}
/>
<FormattedMessage
defaultMessage="Try again"
description="Button in prompt for trying a device search again"
id="gui.connection.auto-scanning.try-again"
/> />
</button> </button>
</div> )}
)} </Box>
{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> </Box>
); );
......
src/components/connection-modal/connected-step.jsx
+ 3
− 2
View file @ f8874851
...@@ -25,7 +25,7 @@ const ConnectedStep = props => ( ...@@ -25,7 +25,7 @@ const ConnectedStep = props => (
</Box> </Box>
</Box> </Box>
<Box className={styles.bottomArea}> <Box className={styles.bottomArea}>
<Box className={styles.instructions}> <Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
<FormattedMessage <FormattedMessage
defaultMessage="Connected" defaultMessage="Connected"
description="Message indicating that a device was connected" description="Message indicating that a device was connected"
...@@ -34,9 +34,10 @@ const ConnectedStep = props => ( ...@@ -34,9 +34,10 @@ const ConnectedStep = props => (
</Box> </Box>
<Dots <Dots
success success
className={styles.bottomAreaItem}
total={3} total={3}
/> />
<div className={styles.cornerButtons}> <div className={classNames(styles.bottomAreaItem, styles.cornerButtons)}>
<button <button
className={classNames(styles.redButton, styles.connectionButton)} className={classNames(styles.redButton, styles.connectionButton)}
onClick={props.onDisconnect} onClick={props.onDisconnect}
......
src/components/connection-modal/connecting-step.jsx
+ 4
− 2
View file @ f8874851
import {FormattedMessage} from 'react-intl'; import {FormattedMessage} from 'react-intl';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import Box from '../box/box.jsx'; import Box from '../box/box.jsx';
import Dots from './dots.jsx'; import Dots from './dots.jsx';
...@@ -27,14 +28,15 @@ const ConnectingStep = props => ( ...@@ -27,14 +28,15 @@ const ConnectingStep = props => (
</Box> </Box>
</Box> </Box>
<Box className={styles.bottomArea}> <Box className={styles.bottomArea}>
<Box className={styles.instructions}> <Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
{props.connectingMessage} {props.connectingMessage}
</Box> </Box>
<Dots <Dots
className={styles.bottomAreaItem}
counter={1} counter={1}
total={3} total={3}
/> />
<div className={styles.segmentedButton}> <div className={classNames(styles.bottomAreaItem, styles.segmentedButton)}>
<button <button
disabled disabled
className={styles.connectionButton} className={styles.connectionButton}
......
src/components/connection-modal/connection-modal.css
+ 13
− 7
View file @ f8874851
...@@ -29,7 +29,6 @@ ...@@ -29,7 +29,6 @@
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0.5rem;
} }
.peripheral-tile { .peripheral-tile {
...@@ -225,6 +224,7 @@ ...@@ -225,6 +224,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: .5rem;
} }
.scratch-link-help { .scratch-link-help {
...@@ -232,7 +232,8 @@ ...@@ -232,7 +232,8 @@
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
height: 100%; height: 100%;
padding: 1rem 0; padding-top: .5rem;
padding-bottom: .5rem;
} }
.scratch-link-help-step { .scratch-link-help-step {
...@@ -243,11 +244,11 @@ ...@@ -243,11 +244,11 @@
} }
[dir="ltr"] .scratch-link-help-step { [dir="ltr"] .scratch-link-help-step {
margin-left: 3rem; margin-left: 2.5rem;
} }
[dir="rtl"] .scratch-link-help-step { [dir="rtl"] .scratch-link-help-step {
margin-right: 3rem; margin-right: 2.5rem;
} }
.scratch-link-icon { .scratch-link-icon {
...@@ -364,12 +365,18 @@ ...@@ -364,12 +365,18 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; 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 { .instructions {
text-align: center; text-align: center;
margin-top: 1rem;
} }
.dots-row { .dots-row {
...@@ -377,7 +384,6 @@ ...@@ -377,7 +384,6 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 1rem;
} }
.dots-holder { .dots-holder {
......
src/components/connection-modal/dots.jsx
+ 7
− 1
View file @ f8874851
...@@ -6,7 +6,12 @@ import Box from '../box/box.jsx'; ...@@ -6,7 +6,12 @@ import Box from '../box/box.jsx';
import styles from './connection-modal.css'; import styles from './connection-modal.css';
const Dots = props => ( const Dots = props => (
<Box className={styles.dotsRow}> <Box
className={classNames(
props.className,
styles.dotsRow
)}
>
<div <div
className={classNames( className={classNames(
styles.dotsHolder, styles.dotsHolder,
...@@ -32,6 +37,7 @@ const Dots = props => ( ...@@ -32,6 +37,7 @@ const Dots = props => (
); );
Dots.propTypes = { Dots.propTypes = {
className: PropTypes.string,
counter: PropTypes.number, counter: PropTypes.number,
error: PropTypes.bool, error: PropTypes.bool,
success: PropTypes.bool, success: PropTypes.bool,
......
src/components/connection-modal/error-step.jsx
+ 3
− 2
View file @ f8874851
...@@ -23,7 +23,7 @@ const ErrorStep = props => ( ...@@ -23,7 +23,7 @@ const ErrorStep = props => (
</Box> </Box>
</Box> </Box>
<Box className={styles.bottomArea}> <Box className={styles.bottomArea}>
<div className={styles.instructions}> <div className={classNames(styles.bottomAreaItem, styles.instructions)}>
<FormattedMessage <FormattedMessage
defaultMessage="Oops, looks like something went wrong." defaultMessage="Oops, looks like something went wrong."
description="The device connection process has encountered an error." description="The device connection process has encountered an error."
...@@ -32,9 +32,10 @@ const ErrorStep = props => ( ...@@ -32,9 +32,10 @@ const ErrorStep = props => (
</div> </div>
<Dots <Dots
error error
className={styles.bottomAreaItem}
total={3} total={3}
/> />
<Box className={styles.buttonRow}> <Box className={classNames(styles.bottomAreaItem, styles.buttonRow)}>
<button <button
className={styles.connectionButton} className={styles.connectionButton}
onClick={props.onScanning} onClick={props.onScanning}
......
src/components/connection-modal/scanning-step.jsx
+ 3
− 2
View file @ f8874851
...@@ -55,7 +55,7 @@ const ScanningStep = props => ( ...@@ -55,7 +55,7 @@ const ScanningStep = props => (
)} )}
</Box> </Box>
<Box className={styles.bottomArea}> <Box className={styles.bottomArea}>
<Box className={styles.instructions}> <Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
<FormattedMessage <FormattedMessage
defaultMessage="Select your device in the list above." defaultMessage="Select your device in the list above."
description="Prompt for choosing a device to connect to" description="Prompt for choosing a device to connect to"
...@@ -63,11 +63,12 @@ const ScanningStep = props => ( ...@@ -63,11 +63,12 @@ const ScanningStep = props => (
/> />
</Box> </Box>
<Dots <Dots
className={styles.bottomAreaItem}
counter={0} counter={0}
total={3} total={3}
/> />
<button <button
className={styles.connectionButton} className={classNames(styles.bottomAreaItem, styles.connectionButton)}
onClick={props.onRefresh} onClick={props.onRefresh}
> >
<FormattedMessage <FormattedMessage
......
src/components/connection-modal/unavailable-step.jsx
+ 2
− 1
View file @ f8874851
...@@ -57,9 +57,10 @@ const UnavailableStep = props => ( ...@@ -57,9 +57,10 @@ const UnavailableStep = props => (
<Box className={styles.bottomArea}> <Box className={styles.bottomArea}>
<Dots <Dots
error error
className={styles.bottomAreaItem}
total={3} total={3}
/> />
<Box className={styles.buttonRow}> <Box className={classNames(styles.bottomAreaItem, styles.buttonRow)}>
<button <button
className={styles.connectionButton} className={styles.connectionButton}
onClick={props.onScanning} onClick={props.onScanning}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment