From 0c5276f10877b1c5220e1964efacdc7aa3b8b715 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Mon, 6 Feb 2017 16:18:44 +0000 Subject: [PATCH] grayDark constant color --- frontend/src/components/breadcrumb/index.js | 2 +- frontend/src/components/navigation/org.js | 9 ++++- ui/src/components/button/index.js | 4 +- ui/src/components/list/item.js | 6 +-- .../components/table-data-table/table-head.js | 10 ++--- .../components/table-data-table/table-row.js | 9 +++-- .../table-simple-table/table-row.js | 21 ++++++---- ui/src/components/table-simple-table/table.js | 39 ++++++------------- ui/src/components/tabs/tab/index.js | 2 +- ui/src/components/tooltip/index.js | 2 +- ui/src/shared/constants/colors.js | 3 +- 11 files changed, 52 insertions(+), 55 deletions(-) diff --git a/frontend/src/components/breadcrumb/index.js b/frontend/src/components/breadcrumb/index.js index 686b3980..a947f9e9 100644 --- a/frontend/src/components/breadcrumb/index.js +++ b/frontend/src/components/breadcrumb/index.js @@ -28,7 +28,7 @@ const { // Main Contonent Wrapper Styles const StyledDiv = styled.div` - border-bottom: solid ${remcalc(1)} #d8d8d8; + border-bottom: solid ${remcalc(1)} ${colors.greyDark}; padding: ${remcalc(30)} 0; margin-bottom: ${remcalc(21)}; `; diff --git a/frontend/src/components/navigation/org.js b/frontend/src/components/navigation/org.js index 316ad657..09754983 100644 --- a/frontend/src/components/navigation/org.js +++ b/frontend/src/components/navigation/org.js @@ -5,6 +5,7 @@ const Styled = require('styled-components'); const Avatar = require('@ui/components/avatar'); const Container = require('@ui/components/container'); +const constants = require('@ui/shared/constants'); const PropTypes = require('@root/prop-types'); const selectors = require('@state/selectors'); const Ul = require('@ui/components/horizontal-list/ul'); @@ -22,6 +23,10 @@ const { default: styled } = Styled; +const { + colors +} = constants; + const { orgsSelector } = selectors; @@ -32,7 +37,7 @@ const { const StyledNav = styled.div` background-color: #f2f2f2; - border-bottom: ${remcalc(1)} solid #d8d8d8; + border-bottom: ${remcalc(1)} solid ${colors.greyDark}; & ul { height: ${remcalc(60)}; @@ -45,7 +50,7 @@ const NavigationLinkContainer = styled.div` position: relative; padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)}; color: #646464; - border: solid ${remcalc(1)} #d8d8d8; + border: solid ${remcalc(1)} ${colors.greyDark}; height: ${remcalc(24)}; background-color: #f2f2f2; diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js index 5f0d2611..1f73fa77 100644 --- a/ui/src/components/button/index.js +++ b/ui/src/components/button/index.js @@ -34,7 +34,7 @@ const backgroundHover = match({ }, base.primaryLight); const backgroundActive = match({ - secondary: base.greyDark, + secondary: base.greyDarker, disabled: inactive.default }, base.primaryDark); @@ -49,7 +49,7 @@ const borderHover = match({ }, base.primaryDark); const borderActive = match({ - secondary: base.greyDark, + secondary: base.greyDarker, disabled: inactive.default }, base.primaryDark); diff --git a/ui/src/components/list/item.js b/ui/src/components/list/item.js index 091c3d63..86d3255c 100644 --- a/ui/src/components/list/item.js +++ b/ui/src/components/list/item.js @@ -20,9 +20,9 @@ const { const paper = ` 0 ${remcalc(8)} 0 ${remcalc(-5)} ${colors.base.grey}, - 0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.greyDark}, + 0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.greyDarker}, 0 ${remcalc(16)} 0 ${remcalc(-10)} ${colors.base.grey}, - 0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.greyDark}; + 0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.greyDarker}; `; const height = (props) => props.collapsed @@ -51,7 +51,7 @@ const Item = styled(Row)` height: ${height}; min-height: ${minHeight}; box-shadow: ${shadow}; - border: ${remcalc(1)} solid #D8D8D8; + border: ${remcalc(1)} solid ${colors.greyDark}; background-color: ${colors.base.white}; margin-bottom: ${marginBottom}; `; diff --git a/ui/src/components/table-data-table/table-head.js b/ui/src/components/table-data-table/table-head.js index 2210271c..85230096 100644 --- a/ui/src/components/table-data-table/table-head.js +++ b/ui/src/components/table-data-table/table-head.js @@ -8,9 +8,9 @@ const { remcalc } = fns; - const { - breakpoints + breakpoints, + colors } = constants; const { @@ -20,7 +20,7 @@ const { const StyledTableHeadItem = styled.td` border-bottom: none; padding: ${remcalc(24)}; - + ${breakpoints.medium` ${props => `width: ${props.mdWidth}`} `} @@ -30,8 +30,8 @@ const StyledTableHeadItem = styled.td` const StyledTableHead = styled.thead` background: #fafafa; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); - border: solid ${remcalc(1)} #d8d8d8; - + border: solid ${remcalc(1)} ${colors.greyDark}; + ${breakpoints.smallOnly` display: none; `} diff --git a/ui/src/components/table-data-table/table-row.js b/ui/src/components/table-data-table/table-row.js index 109dc342..2f2e3209 100644 --- a/ui/src/components/table-data-table/table-row.js +++ b/ui/src/components/table-data-table/table-row.js @@ -13,12 +13,13 @@ const { } = Styled; const { - breakpoints + breakpoints, + colors } = constants; const StyledRow = styled.tr` - border: solid ${remcalc(1)} #d8d8d8; - + border: solid ${remcalc(1)} ${colors.greyDark}; + ${breakpoints.smallOnly` display: block; `} @@ -26,7 +27,7 @@ const StyledRow = styled.tr` const StyledTableItem = styled.td` padding: ${remcalc(24)}; - + ${breakpoints.smallOnly` display: block; `} diff --git a/ui/src/components/table-simple-table/table-row.js b/ui/src/components/table-simple-table/table-row.js index 3817b656..effd13b8 100644 --- a/ui/src/components/table-simple-table/table-row.js +++ b/ui/src/components/table-simple-table/table-row.js @@ -1,9 +1,10 @@ -const fns = require('../../shared/functions'); -const composers = require('../../shared/composers'); - const React = require('react'); const Styled = require('styled-components'); +const fns = require('../../shared/functions'); +const composers = require('../../shared/composers'); +const constants = require('../../shared/constants'); + const { default: styled, css @@ -17,19 +18,23 @@ const { remcalc } = fns; +const { + colors +} = constants; + const StyledTableRow = styled.div` ${clearfix} - + padding: ${remcalc(24)} 0; - border-bottom: solid 1px #d8d8d8; - + border-bottom: solid 1px ${colors.greyDark}; + & > .table-item { text-align: center; - + ${props => { const width = 100 / props.itemCount; return css` - width: ${width}%; + width: ${width}%; `; }} } diff --git a/ui/src/components/table-simple-table/table.js b/ui/src/components/table-simple-table/table.js index 434b0e3a..14799d3c 100644 --- a/ui/src/components/table-simple-table/table.js +++ b/ui/src/components/table-simple-table/table.js @@ -1,45 +1,30 @@ const React = require('react'); const Styled = require('styled-components'); +const constants = require('../../shared/constants'); + const { default: styled } = Styled; +const { + colors +} = constants; + const StyledTableWrapper = styled.section` - border: solid 1px #d8d8d8 + border: solid 1px ${colors.greyDark} font-family: 'LibreFranklin', sans-serif; font-style: normal; `; -// const StyledTableHead = styled.thead``; -// const StyledTableBody = styled.tbody``; - -// const renderTable = ({ -// hasHeader = false, -// hasBody = true, -// width = '100%' -// }) => { -// -// const tableBody = () => { -// -// return ( -// -// ) -// } -// -// } - const Table = ({ children, title, -}) => { - - return ( - - {children} - - ); -}; +}) => ( + + {children} + +); Table.propTypes = { children: React.PropTypes.node, diff --git a/ui/src/components/tabs/tab/index.js b/ui/src/components/tabs/tab/index.js index 2aa1e567..df6320e3 100644 --- a/ui/src/components/tabs/tab/index.js +++ b/ui/src/components/tabs/tab/index.js @@ -61,7 +61,7 @@ const StyledRadio = styled.input` const StyledLabel = styled.label` background: transparent; - border: ${remcalc(1)} solid #D8D8D8; + border: ${remcalc(1)} solid ${colors.greyDark}; display: inline-block; font-size: ${remcalc(20)}; padding: ${remcalc('12 25')}; diff --git a/ui/src/components/tooltip/index.js b/ui/src/components/tooltip/index.js index 56fa0d90..8e583c7b 100644 --- a/ui/src/components/tooltip/index.js +++ b/ui/src/components/tooltip/index.js @@ -68,7 +68,7 @@ const StyledList = styled.ul` } &:before { border-color: rgba(216, 216, 216, 0); - border-bottom-color: #d8d8d8; + border-bottom-color: ${colors.greyDark}; border-width: ${remcalc(12)}; margin-left: ${remcalc(-12)}; } diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js index 40b78b0a..06a89c72 100644 --- a/ui/src/shared/constants/colors.js +++ b/ui/src/shared/constants/colors.js @@ -15,7 +15,8 @@ const base = { white: '#FFFFFF', grey: '#f8f8f8', greyLight: '#e9e9e9', - greyDark: '#919191', + greyDark: '#d8d8d8', + greyDarker: '#919191', red: '#DA4B42', yellow: '#E4A800', green: '#00AF66',