diff --git a/ui/src/components/avatar/index.js b/ui/src/components/avatar/index.js index b43210a3..0ec2bff6 100644 --- a/ui/src/components/avatar/index.js +++ b/ui/src/components/avatar/index.js @@ -37,6 +37,8 @@ const Avatar = styled.div` overflow: hidden; position: relative; text-align: center; + + ${props => props.styles} `; module.exports = ({ @@ -77,7 +79,7 @@ module.exports = ({ ); return ( - + {av} ); diff --git a/ui/src/components/checkbox/index.js b/ui/src/components/checkbox/index.js index 15b0ce48..6a8aaae5 100644 --- a/ui/src/components/checkbox/index.js +++ b/ui/src/components/checkbox/index.js @@ -26,6 +26,8 @@ const StyledInput = styled.input` &:disabled + label::after { opacity: 0.3; } + + ${props => props.styles} `; const StyledLabel = styled.label` @@ -92,7 +94,7 @@ const Checkbox = ({ onChange={onChange} readOnly={readOnly} required={required} - style={style} + styles={style} tabIndex={tabIndex} type='checkbox' /> diff --git a/ui/src/components/close/index.js b/ui/src/components/close/index.js index 07658740..00e78635 100644 --- a/ui/src/components/close/index.js +++ b/ui/src/components/close/index.js @@ -18,19 +18,17 @@ const StyledButton = styled.button` top: ${remcalc(16)}; right: ${remcalc(16)}; - ${props => props.customStyles ? props.customStyles : null} + ${props => props.styles} `; const Close = ({ style, onClick, - customStyles = '' }) => { return ( Close props.styles} +`; + const NavLink = ({ activeClassName, activeStyle, @@ -39,7 +48,7 @@ const NavLink = ({ : className; return ( - {newChildren} - + ); }; diff --git a/ui/src/components/notification/index.js b/ui/src/components/notification/index.js index 619b559f..83b108ca 100644 --- a/ui/src/components/notification/index.js +++ b/ui/src/components/notification/index.js @@ -31,6 +31,7 @@ const StyledNotification = styled.div` width: 100%; ${baseBox(0)} + ${props => props.styles} &::before { background-color: ${props => colors[props.type] || colors.brandPrimary} @@ -60,7 +61,7 @@ const Notificaton = ({ return ( { renderClose } diff --git a/ui/src/components/radio-group/item.js b/ui/src/components/radio-group/item.js index 98177329..18333b44 100644 --- a/ui/src/components/radio-group/item.js +++ b/ui/src/components/radio-group/item.js @@ -1,19 +1,15 @@ const React = require('react'); -// const composers = require('../../shared/composers'); const fns = require('../../shared/functions'); const Styled = require('styled-components'); const constants = require('../../shared/constants'); -// const { -// verticallyAlignCenter -// } = composers; - const { remcalc } = fns; const { - boxes + boxes, + colors } = constants; const { @@ -21,7 +17,7 @@ const { } = Styled; const RadioItem = styled.div` - background: #FFFFFF; + background: ${colors.base.white}; border: ${boxes.border.unchecked}; cursor: pointer; flaot: left; diff --git a/ui/src/components/radio-group/style.css b/ui/src/components/radio-group/style.css deleted file mode 100644 index 61e7680e..00000000 --- a/ui/src/components/radio-group/style.css +++ /dev/null @@ -1,33 +0,0 @@ -~boxes: "../../shared/constants.js"; -~colors: "../../shared/constants.js"; - -:root { - --border-checked: ~boxes.border.checked; - --border-unchecked: ~boxes.border.unchecked; - --border-radius: remcalc(~boxes.borderRadius); - --bottom-shaddow: ~boxes.bottomShaddow; -} - -.group { - & .item { - background: #FFFFFF; - cursor: pointer; - margin-bottom: remcalc(15); - padding: remcalc(25); - - @add-mixin create-base-box-properties; - - &:last-child { - margin-bottom: initial; - } - - &.checked { - border: var(--border-checked); - box-shadow: var(--bottom-shaddow); - } - - &.disabled { - cursor: default; - } - } -} diff --git a/ui/src/components/radio/index.js b/ui/src/components/radio/index.js index 8c57492c..642317ca 100644 --- a/ui/src/components/radio/index.js +++ b/ui/src/components/radio/index.js @@ -32,6 +32,8 @@ const StyledInput = styled.input` `; const StyledLabel = styled.label` + + ${props => props.styles} `; const StyledContent = styled.div` @@ -82,7 +84,7 @@ const Radio = ({ }) => { return ( - + props.styles} `; const RangeSlider = ({ @@ -138,7 +140,7 @@ const RangeSlider = ({ ); diff --git a/ui/src/components/table-data-table/index.js b/ui/src/components/table-data-table/index.js index a665420b..0989974d 100644 --- a/ui/src/components/table-data-table/index.js +++ b/ui/src/components/table-data-table/index.js @@ -14,18 +14,21 @@ const StyledTitle = styled.h3` const StyledTableWrapper = styled.section` font-family: 'LibreFranklin', sans-serif; font-style: normal; + + ${props => props.styles} `; const Table = ({ children, columns = [], data = [], + style, title, }) => { return ( - + {title} props.styles} `; const Table = ({ children, + style, title, }) => ( - + {children} ); Table.propTypes = { children: React.PropTypes.node, + style: React.PropTypes.object, title: React.PropTypes.string, }; diff --git a/ui/src/components/textarea/index.js b/ui/src/components/textarea/index.js index f11d8aaa..07f95c36 100644 --- a/ui/src/components/textarea/index.js +++ b/ui/src/components/textarea/index.js @@ -22,6 +22,10 @@ const { default: styled } = Styled; +const StyledDiv = styled.div` + ${props => props.styles} +`; + const Label = styled.label` color: ${props => props.error ? colors.alert : colors.fonts.regular} `; @@ -81,7 +85,7 @@ const Textarea = ({ const _error = error ? ({error}) : null; return ( -
+
+ ); }; diff --git a/ui/src/components/tooltip/index.js b/ui/src/components/tooltip/index.js index f885792b..85c743e4 100644 --- a/ui/src/components/tooltip/index.js +++ b/ui/src/components/tooltip/index.js @@ -39,7 +39,7 @@ const StyledList = styled.ul` padding: ${remcalc(ulPadder)}; min-width: ${remcalc(200)}; - ${props => props.style} + ${props => props.styles} ${baseBox()} @@ -86,7 +86,7 @@ module.exports = ({ {children}