Adding orange mode to CloseButton component, further alerts CSS changes.

src/components/alerts/alert.css

@@ -11,14 +11,14 @@
     align-items: left;
     border: 1px solid #FF8C1A;
     border-radius: 8px;
-    padding: 12px;
+    padding: 8px;
     box-shadow: 0px 0px 0px 2px rgba(255, 140, 26, 0.25);
     margin-bottom: 7px;
 }
 
 .alert-icon {
-    vertical-align: middle;
     margin-right: 5px;
+    vertical-align: middle;
 }
 
 .alert-message {
@@ -30,5 +30,6 @@
 }
 
 .alert-close-button {
-    color: #FF8C1A;
+    margin-top: 7px;
+    margin-right: 4px;
 }

src/components/alerts/alert.jsx

@@ -22,15 +22,16 @@ const AlertComponent = ({
                     src={iconURL}
                 />
             ) : null}
-            {message}
             <FormattedMessage
-                defaultMessage="Tutorials"
+                defaultMessage="Disconnect message to go here"
                 description="Title for button to return to tutorials library"
                 id="gui.cards.all-tutorials"
             />
         </div>
         <CloseButton
-            size={CloseButton.SIZE_SMALL}
+            className={styles.alertCloseButton}
+            color={'orange'}
+            size={CloseButton.SIZE_LARGE}
             onClick={onCloseAlert}
         />
     </Box>

src/components/close-button/close-button.css

@@ -20,6 +20,11 @@
     box-shadow: 0 0 0 4px $ui-black-transparent;
 }
 
+.close-button.large.orange:hover {
+    transform: scale(1.1, 1.1);
+    box-shadow: 0px 0px 0px 4px hsla(29, 100%, 54%, 0.2);
+}
+
 .small {
     width: 0.825rem;
     height: 0.825rem;
@@ -33,6 +38,11 @@
     box-shadow: 0 0 0 2px $ui-black-transparent;
 }
 
+.large.orange {
+    background-color: hsla(29, 100%, 54%, 0.2);
+    box-shadow: 0px 0px 0px 2px hsla(29, 100%, 54%, 0.2);
+}
+
 .close-icon {
     position: relative;
     margin: 0.25rem;
@@ -41,6 +51,11 @@
     transform: rotate(45deg);
 }
 
+.close-icon.orange {
+    transform: rotate(45deg);
+    transform: scale(1.4);
+}
+
 .small .close-icon {
     width: 50%;
 }

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 closeIconOrange from './icon--close-orange.svg';
 import backIcon from '../../lib/assets/icon--back.svg';
 
 const CloseButton = props => (
@@ -14,7 +15,8 @@ const CloseButton = props => (
             props.className,
             {
                 [styles.small]: props.size === CloseButton.SIZE_SMALL,
-                [styles.large]: props.size === CloseButton.SIZE_LARGE
+                [styles.large]: props.size === CloseButton.SIZE_LARGE,
+                [styles.orange]: props.color === CloseButton.COLOR_ORANGE
             }
         )}
         role="button"
@@ -27,8 +29,16 @@ const CloseButton = props => (
                 src={backIcon}
             /> :
             <img
-                className={styles.closeIcon}
-                src={closeIcon}
+                className={classNames(
+                    styles.closeIcon,
+                    {
+                        [styles.orange]: props.color === CloseButton.COLOR_ORANGE
+                    }
+                )}
+                src={props.color === CloseButton.COLOR_ORANGE ?
+                    closeIconOrange :
+                    closeIcon
+                }
             />
         }
     </div>
@@ -36,10 +46,12 @@ const CloseButton = props => (
 
 CloseButton.SIZE_SMALL = 'small';
 CloseButton.SIZE_LARGE = 'large';
+CloseButton.COLOR_ORANGE = 'orange';
 
 CloseButton.propTypes = {
     buttonType: PropTypes.oneOf(['back', 'close']),
     className: PropTypes.string,
+    color: PropTypes.string,
     onClick: PropTypes.func.isRequired,
     size: PropTypes.oneOf([CloseButton.SIZE_SMALL, CloseButton.SIZE_LARGE])
 };