styles to icons in Notifications

app/javascript/packs/app/constants/colors.js

@@ -3,3 +3,4 @@ export const WHITE_COLOR = "#fff";
 export const BORDER_GRAY_COLOR = "#d2d2d2";
 export const WILD_SAND_COLOR = "#f5f5f5";
 export const MYSTIC_COLOR = "#eaeff2";
+export const ICON_GREEN_COLOR = "#8fd13f";

app/javascript/packs/src/settings/components/NotificationsGroup.jsx

@@ -3,12 +3,12 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 
 import NotificationsSwitchGroup from "./NotificationsSwitchGroup";
+import { WHITE_COLOR } from "../../../app/constants/colors";
 
 const Icon = styled.span`
-  background-color: silver;
   border-radius: 50%;
-  color: #f5f5f5;
-  display: block !important;
+  color: ${WHITE_COLOR};
+  display: block;
   font-size: 15px;
   height: 30px;
   margin-right: 15px;
@@ -18,19 +18,44 @@ const Icon = styled.span`
   width: 30px;
 `;
 
+const Image = styled.span`
+  border-radius: 50%;
+  color: ${WHITE_COLOR};
+  display: block;
+  font-size: 15px;
+  height: 30px;
+  margin-right: 15px;
+  width: 30px;
+  overflow: hidden;
+`;
+
 class NotificationsGroup extends Component {
   constructor(props) {
     super(props);
   }
 
   render() {
+    let imgOrIcon;
+
+    if (this.props.imgUrl === "") {
+      imgOrIcon = (
+        <Icon style={{ backgroundColor: this.props.iconBackground }}>
+          <i className={this.props.iconClasses} />
+        </Icon>
+      );
+    } else {
+      imgOrIcon = (
+        <Image>
+          <img src={this.props.imgUrl} alt="default avatar" />
+        </Image>
+      );
+    }
+
     return (
       <div>
         <div className="row">
           <div className="col-sm-2">
-            <Icon>
-              <i className="fa fa-newspaper-o" />
-            </Icon>
+            {imgOrIcon}
           </div>
           <div className="col-sm-10">
             <h5>
@@ -50,7 +75,10 @@ class NotificationsGroup extends Component {
 NotificationsGroup.propTypes = {
   title: PropTypes.string.isRequired,
   subtitle: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired
+  type: PropTypes.string.isRequired,
+  imgUrl: PropTypes.string.isRequired,
+  iconClasses: PropTypes.string.isRequired,
+  iconBackground: PropTypes.string.isRequired
 };
 
 export default NotificationsGroup;

app/javascript/packs/src/settings/components/SettingsPreferences.jsx

@@ -11,6 +11,10 @@ import {
   RECENT_NOTIFICATION,
   SYSTEM_NOTIFICATION
 } from "./constants";
+import {
+  MAIN_COLOR_BLUE,
+  ICON_GREEN_COLOR
+} from "../../../app/constants/colors";
 
 class SettingsPreferences extends Component {
   constructor(props) {
@@ -63,19 +67,25 @@ class SettingsPreferences extends Component {
           type={ASSIGNMENT_NOTIFICATION}
           title="Assignement"
           subtitle="Assignment notifications appear whenever you get assigned to a team, project, task."
-          imageUrl={this.props.avatarPath}
+          imgUrl=""
+          iconClasses="fa fa-newspaper-o"
+          iconBackground={MAIN_COLOR_BLUE}
         />
         <NotificationsGroup
           type={RECENT_NOTIFICATION}
           title="Recent changes"
           subtitle="Recent changes notifications appear whenever there is a change on a task you are assigned to."
-          imageUrl={this.props.avatarPath}
+          imgUrl={this.props.avatarPath}
+          iconClasses=""
+          iconBackground=""
         />
         <NotificationsGroup
           type={SYSTEM_NOTIFICATION}
           title="System message"
           subtitle="System message notifications are specifically sent by site maintainers to notify all users about a system update."
-          imageUrl={this.props.avatarPath}
+          imgUrl=""
+          iconClasses="glyphicon glyphicon-tower"
+          iconBackground={ICON_GREEN_COLOR}
         />
       </div>
     );