From 7b308592231e5f567ef8a3b8ce23055501337d71 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Tue, 29 Nov 2016 14:11:32 +0000
Subject: [PATCH] removing clearfix and updating component

---
 ui/src/components/base/style.css         | 15 +++++++++++++++
 ui/src/components/notification/readme.md | 12 ++++++------
 ui/src/components/notification/style.css |  2 +-
 ui/src/shared/composers.css              | 12 ------------
 4 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/ui/src/components/base/style.css b/ui/src/components/base/style.css
index 7deee3d9..f99be794 100644
--- a/ui/src/components/base/style.css
+++ b/ui/src/components/base/style.css
@@ -591,5 +591,20 @@
     & [hidden] {
       display: none !important;
     }
+
+    /**************************************************************************
+     *                             GOBAL HELPERS                              *
+     **************************************************************************/
+     & .clearfix {
+       &::before,
+       &::after {
+         content: "";
+         display: table;
+       }
+
+       &::after {
+         clear: both;
+       }
+     }
   }
 }
diff --git a/ui/src/components/notification/readme.md b/ui/src/components/notification/readme.md
index ed49b57e..a114f555 100644
--- a/ui/src/components/notification/readme.md
+++ b/ui/src/components/notification/readme.md
@@ -34,8 +34,8 @@ nmodule.exports = ReactDOM.renderToString(
     </Row>
     <Row>
       <Column>
-        <Notificaton type='warning' icon='question'>
-          <p style={style}>This is the question content</p>   
+        <Notificaton type='alert' icon='exclamation'>
+          <p style={style}>This is the alert content</p>   
         </Notificaton>
       </Column>
     </Row>
@@ -51,14 +51,14 @@ const Notificaton = require('ui/avatar');
 
 module.exports = () => {
   return (
-    <Notificaton type='warning' icon='exclamation'>  
+    <Notificaton type='warning' icon='question'>  
       <p>This is the warning content</p>
     </Notificaton>
     <Notificaton type='warning' icon='question'>
-      <p>This is the warning content</p>
+      <p>This is the question content</p>
     </Notificaton>
-    <Notificaton type='warning' icon='question'>
-      <p>This is the warning content</p>
+    <Notificaton type='alert' icon='exclamation'>
+      <p>This is the alert content</p>
     </Notificaton>
   );
 }
diff --git a/ui/src/components/notification/style.css b/ui/src/components/notification/style.css
index 6fdde4ac..bde961cf 100644
--- a/ui/src/components/notification/style.css
+++ b/ui/src/components/notification/style.css
@@ -13,7 +13,7 @@
 .notification {
   border-radius: 4px;
   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
-  composes: clearfix from "../../shared/composers.css";
+  display: inline-block;
   height: 100%;
 
   &__warning {
diff --git a/ui/src/shared/composers.css b/ui/src/shared/composers.css
index eb1340cc..25713bc6 100644
--- a/ui/src/shared/composers.css
+++ b/ui/src/shared/composers.css
@@ -9,15 +9,3 @@
 .clear {
   clear: both;
 }
-
-.clearfix {
-  &::before,
-  &::after {
-    content: "";
-    display: table;
-  }
-
-  &::after {
-    clear: both;
-  }
-}