root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding support for "info"-type Messages

Browse Source
This commit is contained in:
Jeff Avallone 2018-05-24 17:42:07 -04:00
parent 1a8bb762cb
commit 031dc2235a
3 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Message/index.js
View File

@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
import style from './style.css'; import style from './style.css';
import InfoIcon from 'feather-icons/dist/icons/info.svg';
import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg'; import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
import WarningIcon from 'feather-icons/dist/icons/alert-triangle.svg'; import WarningIcon from 'feather-icons/dist/icons/alert-triangle.svg';
const iconTypes = { const iconTypes = {
info: InfoIcon,
error: ErrorIcon, error: ErrorIcon,
warning: WarningIcon warning: WarningIcon
}; };
@ -36,6 +38,7 @@ const Message = ({ type, icon, heading, children }) => (
Message.propTypes = { Message.propTypes = {
type: PropTypes.oneOf([ type: PropTypes.oneOf([
'info',
'error', 'error',
'warning' 'warning'
]), ]),

12
src/components/Message/style.css
View File

@ -57,4 +57,16 @@
color: var(--color-orange); color: var(--color-orange);
} }
} }
&.info {
& .header {
background: var(--color-blue);
color: var(--color-white);
}
& svg {
background: var(--color-white);
color: var(--color-blue);
}
}
} }

1
src/globals.css
View File

@ -6,6 +6,7 @@
--color-white: #fff; --color-white: #fff;
--color-red: #b3151a; --color-red: #b3151a;
--color-orange: #fa0; --color-orange: #fa0;
--color-blue: #025d8c;
--gradient-green: linear-gradient(to bottom, --gradient-green: linear-gradient(to bottom,
var(--color-green) 0%, var(--color-green) 0%,