fix css bug on flash message close icon

src/component/FlashMessage.jsx

@@ -9,8 +9,10 @@ const FlashMessage = props => {
           <div className={classnames('flashmessage__container__header', props.flashMessage[0].type)} />
 
           <div className='card-body nopadding'>
-            <div className='flashmessage__container__close' onClick={() => props.removeFlashMessage(props.flashMessage[0].message)}>
-              <i className='fa fa-times' />
+            <div className='flashmessage__container__close'>
+              <div className='flashmessage__container__close__icon' onClick={() => props.removeFlashMessage(props.flashMessage[0].message)}>
+                <i className='fa fa-times' />
+              </div>
             </div>
 
             <div className='flashmessage__container__content'>

src/css/FlashMessage.styl

@@ -26,7 +26,9 @@
       display flex
       justify-content flex-end
       margin 5px
-      cursor pointer
+      &__icon
+        padding-right 10px
+        cursor pointer
     &__content
       display flex
       align-items center