Style notifications

packages/strapi-admin/admin/src/components/Notification/index.js

@@ -16,22 +16,22 @@ class Notification extends React.Component { // eslint-disable-line react/prefer
 
   options = {
     success: {
-      icon: 'ion-ios-checkmark-outline',
+      icon: 'fa-check',
       title: 'Success',
       class: 'notificationSuccess',
     },
     warning: {
-      icon: 'ion-ios-information-outline',
+      icon: 'fa-exclamation',
       title: 'Warning',
       class: 'notificationWarning',
     },
     error: {
-      icon: 'ion-ios-close-outline',
+      icon: 'fa-exclamation',
       title: 'Error',
       class: 'notificationError',
     },
     info: {
-      icon: 'ion-ios-information-outline',
+      icon: 'fa-info',
       title: 'Info',
       class: 'notificationInfo',
     },
@@ -42,12 +42,11 @@ class Notification extends React.Component { // eslint-disable-line react/prefer
 
     return (
       <li key={this.props.notification.id} className={`${styles.notification} ${styles[options.class]}`}>
-        <icon className={`ion ${options.icon} ${styles.notificationIcon}`}></icon>
-        <p className={styles.notificationContent}>
-          <span className={styles.notificationTitle}>{options.title}: </span>
-          <span><FormattedMessage id={this.props.notification.message} /></span>
-        </p>
-        <icon className={`ion ion-ios-close-empty pull-right ${styles.notificationClose}`} onClick={this.onCloseClicked}></icon>
+        <icon className={`fa ${options.icon} ${styles.notificationIcon}`}></icon>
+        <div className={styles.notificationContent}>
+          <p className={styles.notificationTitle}><FormattedMessage id={this.props.notification.message} /></p>
+        </div>
+        <icon className={`fa fa-close ${styles.notificationClose}`} onClick={this.onCloseClicked}></icon>
       </li>
     );
   }

packages/strapi-admin/admin/src/components/Notification/styles.scss

@@ -4,70 +4,69 @@
 .notification {
   position: relative;
   display: flex;
-  width: 45rem;
+  width: 28.6rem;
   align-items: stretch;
-  background: #5fc2a3;
+  background: $white;
   margin-bottom: 1.4rem;
-  transition: box-shadow 0.2s ease;
+  transition: all 0.2s ease;
   border-radius: 0.1rem;
-  box-shadow: 0 2px 6px $gray-light;
-  color: $white;
-}
-
-.notificationWarning {
-  background: $brand-warning;
-}
-
-.notificationError {
-  background: $brand-danger;
-}
-
-.notificationInfo {
-  background: $brand-info;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
+  color: #333740;
 }
 
 .notification:hover {
-  box-shadow: 0 1px 4px $gray-light;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
 }
 
 .notificationIcon {
   position: relative;
   display: block;
-  float: left;
   width: 18%;
   text-align: center;
   font-size: 2.4rem;
-}
 
-.notificationIcon:before {
-  position: absolute;
-  top: calc(50% - 1rem);
-  left: calc(50% - 1rem);
+  &:before {
+    position: absolute;
+    top: calc(50% - 1rem);
+    left: calc(50% - 1rem);
+    border-radius: 100%;
+    border: 1px solid $brand-success;
+    color: $brand-success;
+    height: 2rem;
+    width: 2rem;
+    font-size: 1.2rem;
+    padding-top: .3rem;
+    padding-left: 0.1rem;
+    text-align: center;
+  }
 }
 
 .notificationContent {
   display: block;
-  float: left;
   margin: 0;
-  padding-top: 1.4rem;
-  padding-bottom: 1.4rem;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
   padding-right: 1rem;
   border-right: 1px solid rgba(255, 255, 255, 0.3);
   width: 70%;
 }
 
 .notificationTitle {
-  font-weight: bold;
+  font-weight: 500;
+  font-size: 1.4rem;
+  margin-bottom: 0;
 }
 
+
 .notificationClose {
   position: relative;
   display: block;
-  float: left;
   cursor: pointer;
   width: 12%;
   opacity: 0.6;
   transition: opacity 0.1s ease;
+  font-size: 1.6rem;
+  color: #c2c4c7;
 
   &:hover {
     opacity: 1;
@@ -75,8 +74,30 @@
 
   &:before {
     position: absolute;
-    top: calc(50% - 1.5rem);
+    top: calc(50% - .9rem);
     left: calc(50% - 0.5rem);
-    font-size: 3rem;
   }
-}
+}
+
+.notificationWarning {
+  .notificationIcon:before {
+    border-color: $brand-warning;
+    color: $brand-warning;
+    padding-top: .4rem;
+  }
+}
+
+.notificationError {
+  .notificationIcon:before {
+    border-color: $brand-danger;
+    color: $brand-danger;
+    padding-top: .4rem;
+  }
+}
+
+.notificationInfo {
+  .notificationIcon:before {
+    border-color: $brand-primary;
+    color: $brand-primary;
+  }
+}

packages/strapi-admin/admin/src/styles/variables/variables.bootstrap.scss

@@ -94,10 +94,10 @@
 // Start with assigning color names to specific hex values.
 $white:  #fff !default;
 $black:  #000 !default;
-$red:    #d9534f !default;
-$orange: #f0ad4e !default;
+$red:    #ff203c !default;
+$orange: #ff5d00 !default;
 $yellow: #ffd500 !default;
-$green:  #5cb85c !default;
+$green:  #27b70f !default;
 $blue:   $strapi-blue !default;
 $teal:   #5bc0de !default;
 $pink:   #ff5b77 !default;

packages/strapi-admin/admin/src/styles/variables/variables.scss

@@ -9,7 +9,7 @@ $strapi-gray: #535F76;
 
 $strapi-blue-darker: #18202E;
 $strapi-blue-dark: #151C2E;
-$strapi-blue: #1C5DE7;
+$strapi-blue: #0097f7;
 
 // - layout
 // -- left menu