Alerts styling.

src/components/alerts/alert.css

@@ -9,19 +9,19 @@
 }
 
 .alert {
-    border: 1px solid $ui-tertiary;
-    border-radius: 0.75rem;
+    border: 1px solid #FF8C1A;
+    border-radius: 8px;
     display: flex;
     flex-direction: column;
     cursor: move;
-    background: orange;
-    height: 60px;
-    width: 300px;
-    line-height: 60px;
-    color: $ui-white;
+    background: #FFF0DF;
+    width: 448px;
+    color: #000;
     z-index: 20;
     overflow: hidden;
-    box-shadow: 0px 5px 25px 5px $ui-black-transparent;
-    align-items: center;
+    padding: 16px;
+    font-size: 10pt;
+    box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);;
+    align-items: left;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }

src/components/alerts/alerts.jsx

@@ -8,7 +8,7 @@ import styles from './alert.css';
 const Alerts = props => (
     <Draggable
         bounds="parent"
-        position={{x: 550, y: 0}}
+        position={{x: 500, y: 0}}
     >
         <div className={styles.alertContainer}>
             <div className={styles.alert}>