notifications UI fix

Signed-off-by: Virginie Ky <virginie.ky@gmail.com>

packages/strapi-admin/admin/src/components/Notification/Li.js

@@ -11,14 +11,16 @@ const GlobalNotification = createGlobalStyle`
       position: absolute;
       width: 20px;
       height: 20px;
-    top: 20px; left:20px;
+      top: 19px;
+      left:20px;
       border-radius: 10px;
       border: 1px solid ${props => props.theme.main.colors.green};
       display: flex;
-    i, svg {
+      svg {
         margin: auto;
-      font-size: 1.2rem;
         color: ${props => props.theme.main.colors.green};
+        width: 10px;
+        height: 9px;
       }
     }
   }
@@ -39,7 +41,6 @@ const GlobalNotification = createGlobalStyle`
     line-height: 1.8rem;
   }
 
-
   .notificationClose {
     cursor: pointer;
     opacity: 0.6;
@@ -50,6 +51,7 @@ const GlobalNotification = createGlobalStyle`
     color: #BBC2BF;
     transition: opacity 0.1s ease;
     -webkit-font-smoothing: antialiased;
+    margin-right: 15px
 
     &:hover {
       opacity: 1;
@@ -65,41 +67,57 @@ const GlobalNotification = createGlobalStyle`
   .notificationSuccess{
     background: linear-gradient(100deg , #FFFFFF 50%, rgba(39, 183, 15, .05)), ${props =>
     props.theme.main.colors.white};
+    
+    .notificationIcon {
+      div {
+        border-color: ${props => props.theme.main.colors.green};
+      } 
+      svg {
+        color: ${props => props.theme.main.colors.green};
+      }
+    } 
   }
 
   .notificationWarning {
     background: linear-gradient(100deg , #FFFFFF 50%, rgba(250, 156, 0, .05)), ${props =>
     props.theme.main.colors.white};
 
-  .notificationIcon:before {
-    padding-top: 4px;
+    .notificationIcon {
+      div {
         border-color: ${props => props.theme.main.colors.orange};
+      } 
+      svg {
         color: ${props => props.theme.main.colors.orange};
       }
     } 
+  }
 
   .notificationError {
     background: linear-gradient(100deg , #FFFFFF 50%, rgba(255, 93, 0, .05)), $white;
 
-  .notificationIcon:before {
-    padding-top: 4px;
-    border-color: $brand-danger; // red
+    .notificationIcon {
+      div {
         border-color: ${props => props.theme.main.colors.red};
+      } 
+      svg {
         color: ${props => props.theme.main.colors.red};
       }
     } 
+  }
 
   .notificationInfo {
     background: linear-gradient(100deg , #FFFFFF 50%, rgba(28, 93, 231, .05)), ${props =>
     props.theme.main.colors.white};
 
-  .notificationIcon:before {
+    .notificationIcon {
+      div {
         border-color: ${props => props.theme.main.colors.blue};
+      } 
+      svg {
         color: ${props => props.theme.main.colors.blue};
       }
     } 
-
-
+  }
 `;
 
 const Li = styled.li`
@@ -116,6 +134,7 @@ const Li = styled.li`
   transition: all 0.15s ease;
   overflow: hidden;
   z-index: 10;
+  border-left: 2px solid ${props => props.theme.main.colors.green};
 
   // The last notification must appear from
   // the background of the previous one.

packages/strapi-admin/admin/src/components/Notification/index.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { isObject } from 'lodash';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Remove } from '@buffetjs/icons';
 import Li, { GlobalNotification } from './Li';
 class Notification extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
@@ -73,7 +74,7 @@ class Notification extends React.Component {
             <p className="notificationTitle">{content}</p>
           </div>
           <div className={`notificationClose`}>
-            <FontAwesomeIcon icon="times" onClick={this.handleCloseClicked} />
+            <Remove onClick={this.handleCloseClicked} />
           </div>
         </Li>
       </>

packages/strapi-admin/admin/src/themes/colors.js

@@ -4,7 +4,7 @@ const colors = {
   red: '#ff203c',
   orange: '#ff5d00',
   yellow: '#ffd500',
-  green: '#27b70f',
+  green: '#6dbb1a',
   blue: '#0097f7',
   teal: '#5bc0de',
   pink: '#ff5b77',