More style/color updates.

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;
+}

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;

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;

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

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;