Notifications Icon Circles

.storybook/webpack.config.js

@@ -4,7 +4,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
+        test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
         loaders: [{
           loader: 'file-loader',
           options: {
@@ -27,6 +27,17 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+            },
+          }
+        ],
+      },
     ],
   },
   resolve: {

ui/app/components/app/index.scss

@@ -83,3 +83,7 @@
 @import 'connected-sites-list/index';
 
 @import '../ui/icon-with-fallback/index';
+
+@import '../ui/circle-icon/index';
+
+@import '../ui/alert-circle-icon/index';

ui/app/components/ui/alert-circle-icon/alert-circle-icon.component.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import CircleIcon from '../circle-icon'
+
+import danger from '../../../../../app/images/icons/red-triangle-exclaim.svg'
+import warning from '../../../../../app/images/icons/yellow-bell.svg'
+
+const typeConfig = {
+  danger: {
+    circleClass: 'alert-circle-icon--danger',
+    iconSource: danger,
+  },
+  warning: {
+    circleClass: 'alert-circle-icon--warning',
+    iconSource: warning,
+  },
+}
+
+export default class AlertCircleIcon extends Component {
+  static propTypes = {
+    type: PropTypes.oneOf(Object.keys(typeConfig)).isRequired,
+  }
+
+  render () {
+    return (
+      <CircleIcon { ...typeConfig[this.props.type] } />
+    )
+  }
+}

ui/app/components/ui/alert-circle-icon/alert-circle-icon.stories.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import AlertCircleIcon from './alert-circle-icon.component'
+
+export default {
+  title: 'AlertCircleIcon',
+}
+
+export const dangerCircleIcon = () => (
+  <AlertCircleIcon
+    type="danger"
+  />
+)
+
+export const warningCircleIcon = () => (
+  <AlertCircleIcon
+    type="warning"
+  />
+)

ui/app/components/ui/alert-circle-icon/index.js

@@ -0,0 +1 @@
+export { default } from './alert-circle-icon.component'

ui/app/components/ui/alert-circle-icon/index.scss

@@ -0,0 +1,13 @@
+.alert-circle-icon {
+  &--danger {
+    border-color: $danger-red;
+    color: $danger-red;
+    background: $danger-light-red;
+  }
+
+  &--warning {
+    border-color: $warning-yellow;
+    color: $warning-yellow;
+    background: $warning-light-yellow;
+  }
+}

ui/app/components/ui/circle-icon/circle-icon.component.js

@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+export default class CircleIcon extends PureComponent {
+  static propTypes = {
+    size: PropTypes.string,
+    circleClass: PropTypes.string,
+    iconSource: PropTypes.string.isRequired,
+    iconSize: PropTypes.string,
+  }
+
+  static defaultProps = {
+    size: '56px',
+    iconSize: '18px',
+    circleClass: '',
+  }
+
+  render () {
+    const {
+      size,
+      circleClass,
+      iconSize,
+      iconSource,
+    } = this.props
+
+    return (
+      <div
+        className="circle-icon__container"
+        style={{
+          height: size,
+          width: size,
+        }}
+      >
+        <div
+          className={`circle-icon__border circle-icon__circle ${circleClass}`}
+          style={{
+            height: size,
+            width: size,
+          }}
+        />
+        <img
+          src={iconSource}
+          className="circle-icon__icon"
+          style={{
+            height: iconSize,
+            width: iconSize,
+          }}
+        />
+      </div>
+    )
+  }
+}

ui/app/components/ui/circle-icon/circle-icon.stories.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import CircleIcon from './circle-icon.component'
+import img from '../../../../../app/images/eth_logo.svg'
+
+export default {
+  title: 'CircleIcon',
+}
+
+export const basicCircleIcon = () => (
+  <CircleIcon
+    border="1px solid"
+    borderColor="black"
+    background="white"
+    iconSize="42px"
+    iconSource={img}
+  />
+)

ui/app/components/ui/circle-icon/index.js

@@ -0,0 +1 @@
+export { default } from './circle-icon.component'

ui/app/components/ui/circle-icon/index.scss

@@ -0,0 +1,23 @@
+.circle-icon {
+  &__container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__border {
+    border-radius: 50%;
+    position: absolute;
+  }
+
+  &__circle {
+    border: 1px solid;
+    border-color: $black;
+    background: $white;
+  }
+
+  &__icon {
+    position: relative;
+  }
+}

ui/app/css/itcss/settings/variables.scss

@@ -61,6 +61,18 @@ $blizzard-blue: #bfdef3;
 $mischka: #dddee9;
 $web-orange: #f2a202;
 
+/*
+  notification and error message colors
+  */
+$success-green: #28A745;
+$success-light-green: #E8F9F1;
+$danger-red: #D73A49;
+$danger-light-red: #F8EAE8;
+$info-blue: #037DD6;
+$info-light-blue: #E8F4FD;
+$warning-yellow: #FFD33D;
+$warning-light-yellow: #FEFAE8;
+
 /*
   Z-Indicies
  */