Spaces:
Running
Running
File size: 3,993 Bytes
f2bee8a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
import {FormattedMessage} from 'react-intl';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import React from 'react';
import Box from '../box/box.jsx';
import Dots from './dots.jsx';
import helpIcon from './icons/help.svg';
import backIcon from './icons/back.svg';
import bluetoothIcon from './icons/bluetooth.svg';
import scratchLinkIcon from './icons/scratchlink.svg';
import styles from './connection-modal.css';
const UnavailableStep = props => (
<Box className={styles.body}>
<Box className={styles.activityArea}>
<div className={styles.scratchLinkHelp}>
<div className={styles.scratchLinkHelpStep}>
<div className={styles.helpStepNumber}>
{'1'}
</div>
<div className={styles.helpStepImage}>
<img
className={styles.scratchLinkIcon}
src={scratchLinkIcon}
/>
</div>
<div className={styles.helpStepText}>
<FormattedMessage
defaultMessage="Make sure you have Scratch Link installed and running"
description="Message for getting Scratch Link installed"
id="gui.connection.unavailable.installscratchlink"
/>
</div>
</div>
<div className={styles.scratchLinkHelpStep}>
<div className={styles.helpStepNumber}>
{'2'}
</div>
<div className={styles.helpStepImage}>
<img
className={styles.scratchLinkIcon}
src={bluetoothIcon}
/>
</div>
<div className={styles.helpStepText}>
<FormattedMessage
defaultMessage="Check that Bluetooth is enabled"
description="Message for making sure Bluetooth is enabled"
id="gui.connection.unavailable.enablebluetooth"
/>
</div>
</div>
</div>
</Box>
<Box className={styles.bottomArea}>
<Dots
error
className={styles.bottomAreaItem}
total={3}
/>
<Box className={classNames(styles.bottomAreaItem, styles.buttonRow)}>
<button
className={styles.connectionButton}
onClick={props.onScanning}
>
<img
className={classNames(styles.buttonIconLeft, styles.buttonIconBack)}
src={backIcon}
/>
<FormattedMessage
defaultMessage="Try again"
description="Button to initiate trying the device connection again after an error"
id="gui.connection.unavailable.tryagainbutton"
/>
</button>
<button
className={styles.connectionButton}
onClick={props.onHelp}
>
<img
className={styles.buttonIconLeft}
src={helpIcon}
/>
<FormattedMessage
defaultMessage="Help"
description="Button to view help content"
id="gui.connection.unavailable.helpbutton"
/>
</button>
</Box>
</Box>
</Box>
);
UnavailableStep.propTypes = {
onHelp: PropTypes.func,
onScanning: PropTypes.func
};
export default UnavailableStep;
|