Merge pull request #3830 from benjiwheeler/modal-padding

better padding, margin in device connection modal

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

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}

src/components/connection-modal/connecting-step.jsx

 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}

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 {

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,

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}

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

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}