Merge pull request #95 from smiclea/CORWEB-150

Use SVG for the Notification's popup close button CORWEB-150

src/components/organisms/Notifications/NotificationsStyle.js

@@ -18,6 +18,8 @@ import { css } from 'styled-components'
 import Palette from '../../styleUtils/Palette'
 import StyleProps from '../../styleUtils/StyleProps'
 
+import closeImage from './images/close.svg'
+
 const NotificationsStyle = css`
   .notifications-br {
     width: 244px !important;
@@ -42,14 +44,14 @@ const NotificationsStyle = css`
     height: auto !important;
   }
   .notification-dismiss {
-    background-color: ${Palette.grayscale[3]} !important;
     border-radius: 4px !important;
     width: 16px !important;
     height: 16px !important;
-    color: ${Palette.grayscale[1]} !important;
     font-size: 16px !important;
     top: 8px !important;
     right: 8px !important;
+    text-indent: -2000px;
+    background: url('${closeImage}') center no-repeat !important;
   }
   .notification-title {
     padding-left: 24px !important;

src/components/organisms/Notifications/images/close.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon/Close</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Nav/PNBU/Item-Popup-Notification" transform="translate(-232.000000, -8.000000)">
+            <g id="Icon/Close" transform="translate(232.000000, 8.000000)">
+                <rect id="Rectangle-1" fill="#A4AAB5" fill-rule="evenodd" x="0" y="0" width="16" height="16" rx="4"></rect>
+                <path d="M12,4 L4,12" id="Line" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"></path>
+                <path d="M12,12 L4,4" id="Line-Copy" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>