diff --git a/src/components/close-button/close-button.css b/src/components/close-button/close-button.css index 1864e7b2aaede98cf6f4b827db6ba63586275f47..88ebb526ef01c81aeacae0597450e5c992b88951 100644 --- a/src/components/close-button/close-button.css +++ b/src/components/close-button/close-button.css @@ -49,3 +49,18 @@ width: 0.75rem; height: 0.75rem; } + +.back-icon { + position: relative; + margin: 0.25rem; + user-select: none; +} + +.small .back-icon { + width: 50%; +} + +.large .back-icon { + width: 2rem; + height: 2rem; +} diff --git a/src/components/close-button/close-button.jsx b/src/components/close-button/close-button.jsx index 039a8750b7ae108506a2077c07ad2e66496c1217..befac229f5b0a5da58f3c1e1b25b6d9d64c79357 100644 --- a/src/components/close-button/close-button.jsx +++ b/src/components/close-button/close-button.jsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import styles from './close-button.css'; import closeIcon from './icon--close.svg'; +import backIcon from './icon--back.svg'; const CloseButton = props => ( <div @@ -20,10 +21,16 @@ const CloseButton = props => ( tabIndex="0" onClick={props.onClick} > - <img - className={styles.closeIcon} - src={closeIcon} - /> + {props.buttonType === 'back' ? + <img + className={styles.backIcon} + src={backIcon} + /> : + <img + className={styles.closeIcon} + src={closeIcon} + /> + } </div> ); @@ -31,13 +38,15 @@ CloseButton.SIZE_SMALL = 'small'; CloseButton.SIZE_LARGE = 'large'; CloseButton.propTypes = { + buttonType: PropTypes.oneOf(['back', 'close']), className: PropTypes.string, onClick: PropTypes.func.isRequired, size: PropTypes.oneOf([CloseButton.SIZE_SMALL, CloseButton.SIZE_LARGE]) }; CloseButton.defaultProps = { - size: CloseButton.SIZE_LARGE + size: CloseButton.SIZE_LARGE, + buttonType: 'close' }; export default CloseButton; diff --git a/src/components/close-button/icon--back.svg b/src/components/close-button/icon--back.svg new file mode 100644 index 0000000000000000000000000000000000000000..e3f82a6fdb679c27301413397fc8838f74bbb9ae Binary files /dev/null and b/src/components/close-button/icon--back.svg differ diff --git a/src/components/import-modal/import-modal.css b/src/components/import-modal/import-modal.css index f622373680f3e7f8a17a87cb31c44f56ab13157b..b794fd7530cf3711fdf2dae1891df79c3138324d 100644 --- a/src/components/import-modal/import-modal.css +++ b/src/components/import-modal/import-modal.css @@ -20,9 +20,6 @@ border-radius: $space; user-select: none; width: 500px; - - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - color: $text-primary; overflow: hidden; } @@ -48,10 +45,6 @@ $sides: 20rem; box-sizing: border-box; width: 100%; background-color: $import-primary; - - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 1rem; - font-weight: normal; } .header-item { @@ -78,6 +71,10 @@ $sides: 20rem; cursor: default; } +.header-item-title h2 { + font-size: 1.25rem; +} + .header-item-close { display: flex; flex-basis: $sides; @@ -108,7 +105,7 @@ $sides: 20rem; .bad-input-container { border-color: $data-primary; - box-shadow: 0 0 0 0.2rem $data-transparent; + box-shadow: 0 0 0 0.2rem hsla(30, 100%, 55%, 0.15); } .input-row input { @@ -145,9 +142,9 @@ $sides: 20rem; text-align: center; display: flex; justify-content: center; - background: $data-tertiary; + background: hsla(30, 100%, 55%, 0.25); color: $data-primary; - border: 1px solid $ui-pane-border; + border: 1px solid $data-primary; border-radius: 0.25rem; } @@ -166,21 +163,15 @@ $sides: 20rem; } .button-row button { - padding: 0.5rem 2rem; + border: 1px solid $motion-primary; + border-radius: 0.25rem; + padding: 0.5rem 1.5rem; background: white; font-weight: bold; font-size: .875rem; cursor: pointer; -} - -.button-row button.no-button { - border: 1px solid $motion-primary; - border-radius: 0.25rem; color: $motion-primary; } -.button-row button + button { - margin-left: 0.5rem; -} .faq-link-text { margin: 2rem 0 .5rem 0; diff --git a/src/components/import-modal/import-modal.jsx b/src/components/import-modal/import-modal.jsx index 92185f75c7efda4f4d26321b4624831ef789f9e9..ad42929e7d6c24afced4c2febf2bda976ea27f2b 100644 --- a/src/components/import-modal/import-modal.jsx +++ b/src/components/import-modal/import-modal.jsx @@ -45,6 +45,7 @@ const ImportModal = ({intl, ...props}) => ( )} > <CloseButton + buttonType="back" size={CloseButton.SIZE_LARGE} onClick={props.onGoBack} /> @@ -104,7 +105,6 @@ const ImportModal = ({intl, ...props}) => ( } <Box className={styles.buttonRow}> <button - className={styles.noButton} onClick={props.onGoBack} > <FormattedMessage diff --git a/src/css/colors.css b/src/css/colors.css index de484da27ecf40cc1ac49dcabf869a8c773dfa75..5dd2f325c2a7fdc33d72160767720fe056ab273c 100644 --- a/src/css/colors.css +++ b/src/css/colors.css @@ -17,8 +17,6 @@ $sound-tertiary: #A63FA6; $control-primary: #FFAB19; $data-primary: #FF8C1A; -$data-tertiary: rgba(255,140,26,0.25); -$data-transparent: rgba(255,140,26,0.1); $form-border: #E9EEF2;