diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index efb85d232b92..7d71274db355 100644 --- a/.storybook/webpack.config.js +++ b/.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: { diff --git a/app/images/icons/blue-circle-info.svg b/app/images/icons/blue-circle-info.svg new file mode 100644 index 000000000000..ebed859d5e7f --- /dev/null +++ b/app/images/icons/blue-circle-info.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/green-circle-check.svg b/app/images/icons/green-circle-check.svg new file mode 100644 index 000000000000..305b326f763c --- /dev/null +++ b/app/images/icons/green-circle-check.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/red-triangle-exclaim.svg b/app/images/icons/red-triangle-exclaim.svg new file mode 100644 index 000000000000..064908c786e7 --- /dev/null +++ b/app/images/icons/red-triangle-exclaim.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/images/icons/yellow-bell.svg b/app/images/icons/yellow-bell.svg new file mode 100644 index 000000000000..f40e00194522 --- /dev/null +++ b/app/images/icons/yellow-bell.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss index cc3cedfde121..82ed1314bb33 100644 --- a/ui/app/components/app/index.scss +++ b/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'; diff --git a/ui/app/components/ui/alert-circle-icon/alert-circle-icon.component.js b/ui/app/components/ui/alert-circle-icon/alert-circle-icon.component.js new file mode 100644 index 000000000000..78074fa4d56e --- /dev/null +++ b/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 ( + + ) + } +} diff --git a/ui/app/components/ui/alert-circle-icon/alert-circle-icon.stories.js b/ui/app/components/ui/alert-circle-icon/alert-circle-icon.stories.js new file mode 100644 index 000000000000..9f873bf2bbd8 --- /dev/null +++ b/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 = () => ( + +) + +export const warningCircleIcon = () => ( + +) diff --git a/ui/app/components/ui/alert-circle-icon/index.js b/ui/app/components/ui/alert-circle-icon/index.js new file mode 100644 index 000000000000..3cf319925344 --- /dev/null +++ b/ui/app/components/ui/alert-circle-icon/index.js @@ -0,0 +1 @@ +export { default } from './alert-circle-icon.component' diff --git a/ui/app/components/ui/alert-circle-icon/index.scss b/ui/app/components/ui/alert-circle-icon/index.scss new file mode 100644 index 000000000000..b5f5d6cc68b8 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/ui/app/components/ui/circle-icon/circle-icon.component.js b/ui/app/components/ui/circle-icon/circle-icon.component.js new file mode 100644 index 000000000000..0472455351e5 --- /dev/null +++ b/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 ( +
+
+ +
+ ) + } +} diff --git a/ui/app/components/ui/circle-icon/circle-icon.stories.js b/ui/app/components/ui/circle-icon/circle-icon.stories.js new file mode 100644 index 000000000000..3d57b5f71a12 --- /dev/null +++ b/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 = () => ( + +) diff --git a/ui/app/components/ui/circle-icon/index.js b/ui/app/components/ui/circle-icon/index.js new file mode 100644 index 000000000000..d5cfd62c1382 --- /dev/null +++ b/ui/app/components/ui/circle-icon/index.js @@ -0,0 +1 @@ +export { default } from './circle-icon.component' diff --git a/ui/app/components/ui/circle-icon/index.scss b/ui/app/components/ui/circle-icon/index.scss new file mode 100644 index 000000000000..82310ed15392 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 8e2f03a0a6e2..7302a648d72a 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/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 */