removing clearfix and updating component

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;
+       }
+     }
   }
 }

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>
   );
 }

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 {

ui/src/shared/composers.css

@@ -9,15 +9,3 @@
 .clear {
   clear: both;
 }
-
-.clearfix {
-  &::before,
-  &::after {
-    content: "";
-    display: table;
-  }
-
-  &::after {
-    clear: both;
-  }
-}