Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

updating metric component - removed !importants and used new constants

This commit is contained in:
Alex Windett 2017-02-02 15:48:45 +00:00
parent 1dad247e0e
commit 078ec20aaf
9 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/add-metric/description.js
View File

@ -12,7 +12,7 @@ const {
const StyledDescription = styled.p` const StyledDescription = styled.p`
margin: 0; margin: 0;
color: ${colors.regular}; color: ${colors.base.secondary};
`; `;
const Description = (props) => ( const Description = (props) => (

2
ui/src/components/add-metric/link.js
View File

@ -6,7 +6,7 @@ const {
} = Styled; } = Styled;
const StyledLink = styled.a` const StyledLink = styled.a`
text-decoration: underline !important; text-decoration: underline;
`; `;
const Link = ({ const Link = ({

4
ui/src/components/add-metric/tile.js
View File

@ -28,8 +28,8 @@ const StyledTile = styled.div`
width: ${remcalc(300)}; width: ${remcalc(300)};
height: ${remcalc(247)}; height: ${remcalc(247)};
box-shadow: ${boxes.bottomShaddow}; box-shadow: ${boxes.bottomShaddow};
border: ${remcalc(1)} solid ${colors.borderSecondary}; border: ${remcalc(1)} solid ${colors.base.greyLight};
background-color: ${colors.brandSecondary}; background-color: ${colors.base.white};
${breakpoints.small` ${breakpoints.small`
width: ${remcalc(300)}; width: ${remcalc(300)};

2
ui/src/components/add-metric/title.js
View File

@ -12,7 +12,7 @@ const {
const StyledTitle = styled.h4` const StyledTitle = styled.h4`
margin: 0; margin: 0;
color: ${colors.semibold}; color: ${colors.fonts.semibold};
`; `;
const Title = ({ const Title = ({

8
ui/src/components/anchor/index.js
View File

@ -3,16 +3,16 @@ const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const { const {
colors base,
} = constants; } = constants.colors;
const { const {
default: styled default: styled
} = Styled; } = Styled;
const color = (props) => props.secondary const color = (props) => props.secondary
? colors.brandSecondaryLink ? base.secondary
: colors.brandPrimaryLink; : base.primary;
const Anchor = styled.a` const Anchor = styled.a`
color: ${color} !important; color: ${color} !important;

4
ui/src/components/button/index.js
View File

@ -39,8 +39,8 @@ const backgroundActive = match({
}, base.primaryDark); }, base.primaryDark);
const border = match({ const border = match({
secondary: base.white, secondary: base.greyLight,
disabled: inactive.default disabled: inactive.greyLight
}, base.primary); }, base.primary);
const borderHover = match({ const borderHover = match({

6
ui/src/components/horizontal-list/li.js
View File

@ -21,14 +21,14 @@ module.exports = styled.li`
padding-bottom: ${remcalc(10)}; padding-bottom: ${remcalc(10)};
& a { & a {
color: ${colors.fonts.regular}; color: ${colors.base.primary};
text-decoration: none; text-decoration: none;
} }
& a.active { & a.active {
cursor: default; cursor: default;
color: ${colors.brandPrimaryLink}; color: ${colors.base.primary};
border-bottom: 2px solid ${colors.brandPrimaryLinkUnderline}; border-bottom: 2px solid ${colors.base.primary};
padding-bottom: ${remcalc(6)}; padding-bottom: ${remcalc(6)};
} }
`; `;

4
ui/src/shared/constants/boxes.js
View File

@ -16,7 +16,7 @@ module.exports = {
insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`, insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`,
border: { border: {
checked: `${remcalc(1)} solid ${base.primary}`, checked: `${remcalc(1)} solid ${base.primary}`,
unchecked: `${remcalc(1)} solid ${base.borderSecondary}`, unchecked: `${remcalc(1)} solid ${base.greyLight}`,
confirmed: `${remcalc(1)} solid ${base.secondaryLight}` confirmed: `${remcalc(1)} solid ${base.greyLight}`
} }
}; };

6
ui/src/shared/constants/colors.js
View File

@ -14,8 +14,8 @@ const base = {
secondaryLight: '#919191', secondaryLight: '#919191',
white: '#FFFFFF', white: '#FFFFFF',
grey: '#f8f8f8', grey: '#f8f8f8',
greyDark: '#e9e9e9', greyLight: '#e9e9e9',
greyLight: '#919191', greyDark: '#919191',
red: '#DA4B42', red: '#DA4B42',
yellow: '#E4A800', yellow: '#E4A800',
green: '#00AF66', green: '#00AF66',
@ -28,7 +28,7 @@ const fonts = {
const inactive = { const inactive = {
default: '#FAFAFA', default: '#FAFAFA',
border: '#D8D8D8', border: base.greyLight,
text: base.greyLight text: base.greyLight
}; };