From 002ef5f99e33f3081f732f1d6598d5c7d0b14e51 Mon Sep 17 00:00:00 2001
From: Virginie Ky <virginie.ky@gmail.com>
Date: Thu, 23 Jan 2020 09:36:25 +0100
Subject: [PATCH] notifications UI fix

Signed-off-by: Virginie Ky <virginie.ky@gmail.com>
---
 .../admin/src/components/Notification/Li.js   | 177 ++++++++++--------
 .../src/components/Notification/index.js      |   3 +-
 .../strapi-admin/admin/src/themes/colors.js   |   2 +-
 3 files changed, 101 insertions(+), 81 deletions(-)

diff --git a/packages/strapi-admin/admin/src/components/Notification/Li.js b/packages/strapi-admin/admin/src/components/Notification/Li.js
index 12500214d0..cb88ebefaf 100644
--- a/packages/strapi-admin/admin/src/components/Notification/Li.js
+++ b/packages/strapi-admin/admin/src/components/Notification/Li.js
@@ -2,104 +2,122 @@ import styled, { createGlobalStyle } from 'styled-components';
 import PropTypes from 'prop-types';
 
 const GlobalNotification = createGlobalStyle`
-.notificationIcon {
-  position: relative;
-  display: block;
-  width: 60px;
-  height: 60px;
-  > div {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    top: 20px; left:20px;
-    border-radius: 10px;
-    border: 1px solid ${props => props.theme.main.colors.green};
-    display: flex;
-    i, svg {
-      margin: auto;
-      font-size: 1.2rem;
-      color: ${props => props.theme.main.colors.green};
+  .notificationIcon {
+    position: relative;
+    display: block;
+    width: 60px;
+    height: 60px;
+    > div {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      top: 19px;
+      left:20px;
+      border-radius: 10px;
+      border: 1px solid ${props => props.theme.main.colors.green};
+      display: flex;
+      svg {
+        margin: auto;
+        color: ${props => props.theme.main.colors.green};
+        width: 10px;
+        height: 9px;
+      }
     }
   }
-}
 
-.notificationContent {
-  display: flex;
-  align-items: center;
-  width: 220px;
-  margin: 0;
-  padding-right: 10px;
-  border-right: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.notificationTitle {
-  margin-bottom: 0;
-  font-size: 1.4rem;
-  font-weight: 400;
-  line-height: 1.8rem;
-}
-
-
-.notificationClose {
-  cursor: pointer;
-  opacity: 0.6;
-  position: relative;
-  display: flex;
-  width: 20px;
-  font-size: 1.4rem;
-  color: #BBC2BF;
-  transition: opacity 0.1s ease;
-  -webkit-font-smoothing: antialiased;
-
-  &:hover {
-    opacity: 1;
+  .notificationContent {
+    display: flex;
+    align-items: center;
+    width: 220px;
+    margin: 0;
+    padding-right: 10px;
+    border-right: 1px solid rgba(255, 255, 255, 0.3);
   }
 
-  svg {
-    margin: auto;
-    font-size: 1.3rem;
-    font-weight: 100!important;
+  .notificationTitle {
+    margin-bottom: 0;
+    font-size: 1.4rem;
+    font-weight: 400;
+    line-height: 1.8rem;
   }
-}
 
-.notificationSuccess{
-  background: linear-gradient(100deg , #FFFFFF 50%, rgba(39, 183, 15, .05)), ${props =>
+  .notificationClose {
+    cursor: pointer;
+    opacity: 0.6;
+    position: relative;
+    display: flex;
+    width: 20px;
+    font-size: 1.4rem;
+    color: #BBC2BF;
+    transition: opacity 0.1s ease;
+    -webkit-font-smoothing: antialiased;
+    margin-right: 15px
+
+    &:hover {
+      opacity: 1;
+    }
+
+    svg {
+      margin: auto;
+      font-size: 1.3rem;
+      font-weight: 100!important;
+    }
+  }
+
+  .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 =>
+  .notificationWarning {
+    background: linear-gradient(100deg , #FFFFFF 50%, rgba(250, 156, 0, .05)), ${props =>
     props.theme.main.colors.white};
 
-  .notificationIcon:before {
-    padding-top: 4px;
-    border-color: ${props => props.theme.main.colors.orange};
-    color: ${props => props.theme.main.colors.orange};
+    .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;
+  .notificationError {
+    background: linear-gradient(100deg , #FFFFFF 50%, rgba(255, 93, 0, .05)), $white;
 
-  .notificationIcon:before {
-    padding-top: 4px;
-    border-color: $brand-danger; // red
-    border-color: ${props => props.theme.main.colors.red};
-    color: ${props => props.theme.main.colors.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 =>
+  .notificationInfo {
+    background: linear-gradient(100deg , #FFFFFF 50%, rgba(28, 93, 231, .05)), ${props =>
     props.theme.main.colors.white};
 
-  .notificationIcon:before {
-    border-color: ${props => props.theme.main.colors.blue};
-    color: ${props => props.theme.main.colors.blue};
+    .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.
diff --git a/packages/strapi-admin/admin/src/components/Notification/index.js b/packages/strapi-admin/admin/src/components/Notification/index.js
index 43a89d7075..0ddbecdf42 100644
--- a/packages/strapi-admin/admin/src/components/Notification/index.js
+++ b/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>
       </>
diff --git a/packages/strapi-admin/admin/src/themes/colors.js b/packages/strapi-admin/admin/src/themes/colors.js
index e9490418fa..fc3fa67334 100644
--- a/packages/strapi-admin/admin/src/themes/colors.js
+++ b/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',