Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Uses polished (lib) to generate rgba values from existing hex color vars #22272

Merged
merged 4 commits into from
Aug 27, 2018
Merged

Uses polished (lib) to generate rgba values from existing hex color vars #22272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b9efa46
Adds and uses new rgba generation method for generating rgba colors f…
jasonrhodes Aug 22, 2018
0896a66
Removes old comments and duplicate imports
jasonrhodes Aug 22, 2018
52e8f91
Adds tests for rgba method and some jsdocs, and prettier fixes
jasonrhodes Aug 23, 2018
47b3717
Removed custom rgba in favor of polished.rgba
jasonrhodes Aug 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@ import styled from 'styled-components';
import { isEmpty } from 'lodash';
import Suggestion from './Suggestion';
import { units, colors, px, unit } from '../../../../style/variables';
import { rgba } from 'polished';

const List = styled.ul`
width: 100%;
border: 1px solid ${colors.gray4};
border-radius: ${px(units.quarter)};
box-shadow: 0px ${px(units.quarter)} ${px(units.double)} rgba(0, 0, 0, 0.1);
box-shadow: 0px ${px(units.quarter)} ${px(units.double)}
${rgba(colors.black, 0.1)};
position: absolute;
background: #fff;
z-index: 10;
Expand Down
5 changes: 3 additions & 2 deletions x-pack/plugins/apm/public/components/shared/Modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import Portal from 'react-portal';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Close } from './Icons';
import { fontSizes, units } from '../../style/variables';
import { fontSizes, units, colors } from '../../style/variables';
import { rgba } from 'polished';

const Header = styled.div`
display: flex;
Expand All @@ -36,7 +37,7 @@ const ModalFixed = styled.div`

const ModalOverlay = styled(ModalFixed)`
z-index: 10;
background: rgba(45, 45, 45, 0.8);
background: ${rgba(colors.gray2, 0.8)};
height: 100%;
`;

Expand Down
5 changes: 3 additions & 2 deletions x-pack/plugins/apm/public/store/selectors/chartSelectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
asDecimal,
tpmUnit
} from '../../utils/formatters';
import { rgba } from 'polished';

export const getEmptySerie = memoize(
(start = Date.now() - 3600000, end = Date.now()) => {
Expand Down Expand Up @@ -91,7 +92,7 @@ export function getResponseTimeSeries(chartsData) {
),
type: 'area',
color: 'none',
areaColor: 'rgba(49, 133, 252, 0.1)' // apmBlue
areaColor: rgba(colors.apmBlue, 0.1)
});

series.splice(1, 0, {
Expand All @@ -105,7 +106,7 @@ export function getResponseTimeSeries(chartsData) {
),
type: 'areaMaxHeight',
color: 'none',
areaColor: 'rgba(146, 0, 0, 0.1)' // apmRed
areaColor: rgba(colors.apmRed, 0.1)
});
}

Expand Down