diff --git a/packages/my-joyent/src/assets/cloud.svg b/packages/my-joyent/src/assets/cloud.svg
new file mode 100644
index 00000000..7a03130b
--- /dev/null
+++ b/packages/my-joyent/src/assets/cloud.svg
@@ -0,0 +1,18 @@
+
diff --git a/packages/my-joyent/src/components/empty/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/empty/__tests__/__snapshots__/index.spec.js.snap
new file mode 100644
index 00000000..0e87cd87
--- /dev/null
+++ b/packages/my-joyent/src/components/empty/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders without throwing 1`] = `
+.c4 {
+ font-size: 0.9375rem;
+ line-height: 1.5;
+ font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+ font-weight: 600;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: start;
+ -webkit-justify-content: flex-start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ -webkit-flex-grow: 2;
+ -ms-flex-grow: 2;
+ flex-grow: 2;
+ -webkit-flex-basis: 5.625rem;
+ -ms-flex-basis: 5.625rem;
+ flex-basis: 5.625rem;
+ width: 100%;
+ padding: 0.75rem 1.125rem 0 1.125rem;
+ -webkit-transition: all 300ms ease;
+ transition: all 300ms ease;
+}
+
+.c5 {
+ display: inline-block;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+
+.c1 {
+ box-sizing: border-box;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex: 0 1 auto;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ margin-right: -0.5rem;
+ margin-left: -0.5rem;
+ position: relative;
+ height: auto;
+ min-height: 7.875rem;
+ margin-bottom: 0.625rem;
+ border: 0.0625rem solid;
+ box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin-right: 0rem;
+ margin-left: 0rem;
+ border-radius: 4px;
+ border: 1px solid;
+ box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
+ min-height: 11.5625rem;
+ min-width: 292px;
+ cursor: pointer;
+ -webkit-transition: all 300ms ease;
+ transition: all 300ms ease;
+}
+
+.c3 {
+ font-weight: 600;
+ font-size: 0.9375rem;
+ color: #808080;
+ -webkit-flex-basis: 0;
+ -ms-flex-basis: 0;
+ flex-basis: 0;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-flex-grow: 0;
+ -ms-flex-grow: 0;
+ flex-grow: 0;
+ margin-bottom: 0.5rem;
+}
+
+.c6 {
+ font-weight: normal;
+}
+
+.c0 {
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+
+.c2 {
+ margin-bottom: 18px;
+}
+
+
+
+
+
+ There are no packages that meet your criteria
+
+
+
+
+ Please adjust the filters to see some packages here
+
+
+
+`;
diff --git a/packages/my-joyent/src/components/empty/__tests__/index.spec.js b/packages/my-joyent/src/components/empty/__tests__/index.spec.js
new file mode 100644
index 00000000..b047ae6b
--- /dev/null
+++ b/packages/my-joyent/src/components/empty/__tests__/index.spec.js
@@ -0,0 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import { Router } from '@mocks/';
+import Empty from '../';
+
+it('renders without throwing', () => {
+ const tree = renderer
+ .create(
+
+
+
+ )
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+});
diff --git a/packages/my-joyent/src/components/empty/index.js b/packages/my-joyent/src/components/empty/index.js
new file mode 100644
index 00000000..ce66f388
--- /dev/null
+++ b/packages/my-joyent/src/components/empty/index.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+import { Card, CardTitle } from 'joyent-ui-toolkit';
+
+import Cloud from '../../assets/cloud.svg';
+
+const Title = styled(CardTitle)`
+ font-weight: 600;
+ font-size: ${remcalc(15)};
+ color: #808080;
+ flex-basis: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-grow: 0;
+ margin-bottom: ${remcalc(8)};
+`;
+
+const SubTitle = styled(Title)`
+ font-weight: normal;
+`;
+
+const CardStyled = styled(Card)`
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+`;
+
+const StyledCloud = styled(Cloud)`
+ /* Prettier Comment */
+ margin-bottom: 18px;
+`;
+
+const Empty = () => (
+
+
+ There are no packages that meet your criteria
+ Please adjust the filters to see some packages here
+
+);
+
+export default Empty;
diff --git a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
index 7ce0e0ce..ffa37fb8 100644
--- a/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
+++ b/packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders without throwing 1`] = `
-.c12 {
+.c6 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@@ -49,47 +49,47 @@ exports[`renders without throwing 1`] = `
font-weight: 600;
}
-.c12::-moz-focus-inner,
-.c12[type='button']::-moz-focus-inner,
-.c12[type='reset']::-moz-focus-inner,
-.c12[type='submit']::-moz-focus-inner {
+.c6::-moz-focus-inner,
+.c6[type='button']::-moz-focus-inner,
+.c6[type='reset']::-moz-focus-inner,
+.c6[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
-.c12:-moz-focusring,
-.c12[type='button']:-moz-focusring,
-.c12[type='reset']:-moz-focusring,
-.c12[type='submit']:-moz-focusring {
+.c6:-moz-focusring,
+.c6[type='button']:-moz-focusring,
+.c6[type='reset']:-moz-focusring,
+.c6[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
-.c12:focus {
+.c6:focus {
outline: 0;
text-decoration: none;
}
-.c12:hover {
+.c6:hover {
border: solid 0.0625rem;
}
-.c12:active,
-.c12:active:hover,
-.c12:active:focus {
+.c6:active,
+.c6:active:hover,
+.c6:active:focus {
background-image: none;
outline: 0;
}
-.c12[disabled] {
+.c6[disabled] {
cursor: not-allowed;
pointer-events: none;
}
-.c12 + button {
+.c6 + button {
margin-left: 1.25rem;
}
-.c13 {
+.c7 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@@ -136,47 +136,66 @@ exports[`renders without throwing 1`] = `
font-weight: 600;
}
-.c13::-moz-focus-inner,
-.c13[type='button']::-moz-focus-inner,
-.c13[type='reset']::-moz-focus-inner,
-.c13[type='submit']::-moz-focus-inner {
+.c7::-moz-focus-inner,
+.c7[type='button']::-moz-focus-inner,
+.c7[type='reset']::-moz-focus-inner,
+.c7[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
-.c13:-moz-focusring,
-.c13[type='button']:-moz-focusring,
-.c13[type='reset']:-moz-focusring,
-.c13[type='submit']:-moz-focusring {
+.c7:-moz-focusring,
+.c7[type='button']:-moz-focusring,
+.c7[type='reset']:-moz-focusring,
+.c7[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
-.c13:focus {
+.c7:focus {
outline: 0;
text-decoration: none;
}
-.c13:hover {
+.c7:hover {
border: solid 0.0625rem;
}
-.c13:active,
-.c13:active:hover,
-.c13:active:focus {
+.c7:active,
+.c7:active:hover,
+.c7:active:focus {
background-image: none;
outline: 0;
}
-.c13[disabled] {
+.c7[disabled] {
cursor: not-allowed;
pointer-events: none;
}
-.c13 + button {
+.c7 + button {
margin-left: 1.25rem;
}
-.c1 {
+.c2 {
+ font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+ font-weight: 400;
+ font-size: 0.9375rem;
+ font-style: normal;
+ font-stretch: normal;
+ display: block;
+}
+
+.c4 {
+ font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+ font-weight: 400;
+ font-size: 0.9375rem;
+ font-style: normal;
+ font-stretch: normal;
+ display: block;
+ margin-bottom: 0.375rem;
+}
+
+.c10 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
@@ -187,25 +206,23 @@ exports[`renders without throwing 1`] = `
font-weight: bold;
}
-.c7 {
- font-weight: 600;
- font-size: 0.625rem;
- color: #464646;
+.c14 {
+ font-size: 0.8125rem;
position: absolute;
top: 0.875rem;
right: auto;
+ color: #464646;
}
-.c9 {
- font-weight: 600;
- font-size: 0.625rem;
- color: #464646;
+.c16 {
+ font-size: 0.8125rem;
position: absolute;
top: 0.875rem;
right: 1px;
+ color: #464646;
}
-.c8 {
+.c15 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -225,17 +242,17 @@ exports[`renders without throwing 1`] = `
margin-top: 0.125rem;
}
-.c8::active {
+.c15::active {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
-.c8::focus {
+.c15::focus {
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
}
-.c10 {
+.c17 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -255,17 +272,17 @@ exports[`renders without throwing 1`] = `
margin-top: 0.125rem;
}
-.c10::active {
+.c17::active {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
-.c10::focus {
+.c17::focus {
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
}
-.c5 {
+.c12 {
background: #D8D8D8;
cursor: pointer;
display: block;
@@ -273,40 +290,40 @@ exports[`renders without throwing 1`] = `
position: relative;
}
-.c6 {
+.c13 {
background: #364ACD;
height: 100%;
position: absolute;
}
-.c4 {
+.c11 {
position: relative;
min-height: 0.625rem;
}
-.c3 {
+.c9 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
-.c2 {
+.c8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
-.c2 > div {
+.c8 > div {
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
}
-.c2 > div:not(:last-child) {
+.c8 > div:not(:last-child) {
margin-right: 2.25rem;
}
-.c11 {
+.c5 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -316,47 +333,107 @@ exports[`renders without throwing 1`] = `
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
- margin-top: 2.25rem;
+ margin-bottom: 1.125rem;
}
.c0 {
width: 100%;
}
+.c1 {
+ line-height: 24px;
+ font-size: 21px;
+ margin-bottom: 1.125rem;
+}
+
+.c3 {
+ margin-bottom: 0.5rem;
+}
+
+
+
+
+
+
+
+
+
+
+
+
without throwing 1`] = `
/>
0.256
@@ -377,7 +454,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={50.688}
aria-valuemin={0.256}
aria-valuenow={0.256}
- className="c8"
+ className="c15"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -395,7 +472,7 @@ exports[`renders without throwing 1`] = `
50.688
@@ -406,7 +483,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={50.688}
aria-valuemin={0.256}
aria-valuenow={50.688}
- className="c10"
+ className="c17"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -427,26 +504,26 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = `
/>
0.25
@@ -467,7 +544,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={3.25}
aria-valuemin={0.25}
aria-valuenow={0.25}
- className="c8"
+ className="c15"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -485,7 +562,7 @@ exports[`renders without throwing 1`] = `
3.25
@@ -496,7 +573,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={3.25}
aria-valuemin={0.25}
aria-valuenow={3.25}
- className="c10"
+ className="c17"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -517,26 +594,26 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = `
/>
0.01
@@ -557,7 +634,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={107.26}
aria-valuemin={0.01}
aria-valuenow={0.01}
- className="c8"
+ className="c15"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -575,7 +652,7 @@ exports[`renders without throwing 1`] = `
107.26
@@ -586,7 +663,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={107.26}
aria-valuemin={0.01}
aria-valuenow={107.26}
- className="c10"
+ className="c17"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -607,26 +684,26 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = `
/>
0.016
@@ -647,7 +724,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={0.525}
aria-valuemin={0.016}
aria-valuenow={0.016}
- className="c8"
+ className="c15"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -665,7 +742,7 @@ exports[`renders without throwing 1`] = `
0.525
@@ -676,7 +753,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={0.525}
aria-valuemin={0.016}
aria-valuenow={0.525}
- className="c10"
+ className="c17"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -696,46 +773,5 @@ exports[`renders without throwing 1`] = `
-
-
-
-
-
-
-
-
-
`;
diff --git a/packages/my-joyent/src/components/filters/filters.js b/packages/my-joyent/src/components/filters/filters.js
index 216b8148..448e89dc 100644
--- a/packages/my-joyent/src/components/filters/filters.js
+++ b/packages/my-joyent/src/components/filters/filters.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import isEqual from 'lodash.isequal';
-import { FormLabel, Button } from 'joyent-ui-toolkit';
+import { Label, Button } from 'joyent-ui-toolkit';
import { default as defaultState } from '@state/state';
import Sliders from '@components/sliders';
@@ -11,7 +11,7 @@ const GroupWrapper = styled.section`
display: flex;
justify-content: space-between;
width: 100%;
- margin-top: ${remcalc(36)};
+ margin-bottom: ${remcalc(18)};
`;
const Wrapper = styled.section`
@@ -19,6 +19,17 @@ const Wrapper = styled.section`
width: 100%;
`;
+const Title = styled(Label)`
+ line-height: 24px;
+ font-size: 21px;
+ margin-bottom: ${remcalc(18)};
+`;
+
+const Subtitle = styled(Label)`
+ /* Comment for prettier */
+ margin-bottom: ${remcalc(8)};
+`;
+
class Filters extends Component {
constructor(props) {
super(props);
@@ -47,22 +58,15 @@ class Filters extends Component {
cpuSliderChange,
diskSliderChange,
costSliderChange,
- groupChange
+ groupChange,
+ packages
} = this.props;
const { reset } = this.state;
-
return (
- Choose a package
-
+ Choose package
+ Filter by package type
{filters.groups
@@ -88,6 +92,16 @@ class Filters extends Component {
Reset Filters
+
+
);
}
diff --git a/packages/my-joyent/src/components/home/home.js b/packages/my-joyent/src/components/home/home.js
index e9a6aca8..a40fd155 100644
--- a/packages/my-joyent/src/components/home/home.js
+++ b/packages/my-joyent/src/components/home/home.js
@@ -15,7 +15,7 @@ import {
const Main = styled.main`
/* Prettier stahp */
margin-bottom: 40px;
-`
+`;
class Home extends Component {
constructor(props) {
@@ -56,7 +56,7 @@ class Home extends Component {
render() {
const { showMessage } = this.state;
- const { filters, onFilterReset } = this.props;
+ const { filters, onFilterReset, packages } = this.props;
const _msg = showMessage ? (
{_msg}
this.changeGroup(group)}
diff --git a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
index fd98980d..0dd1652e 100644
--- a/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap
@@ -175,7 +175,7 @@ exports[`renders without throwing 1`] = `
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
- color: rgba(73,73,73,0.5);
+ color: #bdbdbd;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
diff --git a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
index 17680757..a363ffe7 100644
--- a/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
+++ b/packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap
@@ -184,7 +184,7 @@ exports[`renders without throwing 1`] = `
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
- color: rgba(73,73,73,0.5);
+ color: #bdbdbd;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
diff --git a/packages/my-joyent/src/components/packages/list.js b/packages/my-joyent/src/components/packages/list.js
index 40346631..aad7a338 100644
--- a/packages/my-joyent/src/components/packages/list.js
+++ b/packages/my-joyent/src/components/packages/list.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
import { Col } from 'react-styled-flexboxgrid';
import Package from '@components/package';
+import Empty from '@components/empty';
const ListStyled = styled.section`
display: flex;
@@ -49,8 +50,10 @@ class Packages extends Component {
/>
))
- ) : (
- 'There are no packages that meet your criteria'
+ ) : (
+
+
+
)}
);
diff --git a/packages/my-joyent/src/components/sliders/index.js b/packages/my-joyent/src/components/sliders/index.js
index 4d2cfd55..0330d8cb 100644
--- a/packages/my-joyent/src/components/sliders/index.js
+++ b/packages/my-joyent/src/components/sliders/index.js
@@ -21,10 +21,12 @@ const Sliders = ({
cpuSliderChange,
diskSliderChange,
costSliderChange,
- reset
+ reset,
+ greyed
}) => (
without throwing 1`] = `
margin-left: -0.5rem;
}
-.c34 {
+.c38 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@@ -29,7 +29,7 @@ exports[`renders without throwing 1`] = `
padding-left: 0.5rem;
}
-.c38 {
+.c42 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@@ -141,7 +141,7 @@ exports[`renders without throwing 1`] = `
margin-left: 1.25rem;
}
-.c31 {
+.c25 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@@ -189,47 +189,47 @@ exports[`renders without throwing 1`] = `
font-weight: 600;
}
-.c31::-moz-focus-inner,
-.c31[type='button']::-moz-focus-inner,
-.c31[type='reset']::-moz-focus-inner,
-.c31[type='submit']::-moz-focus-inner {
+.c25::-moz-focus-inner,
+.c25[type='button']::-moz-focus-inner,
+.c25[type='reset']::-moz-focus-inner,
+.c25[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
-.c31:-moz-focusring,
-.c31[type='button']:-moz-focusring,
-.c31[type='reset']:-moz-focusring,
-.c31[type='submit']:-moz-focusring {
+.c25:-moz-focusring,
+.c25[type='button']:-moz-focusring,
+.c25[type='reset']:-moz-focusring,
+.c25[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
-.c31:focus {
+.c25:focus {
outline: 0;
text-decoration: none;
}
-.c31:hover {
+.c25:hover {
border: solid 0.0625rem;
}
-.c31:active,
-.c31:active:hover,
-.c31:active:focus {
+.c25:active,
+.c25:active:hover,
+.c25:active:focus {
background-image: none;
outline: 0;
}
-.c31[disabled] {
+.c25[disabled] {
cursor: not-allowed;
pointer-events: none;
}
-.c31 + button {
+.c25 + button {
margin-left: 1.25rem;
}
-.c32 {
+.c26 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@@ -276,47 +276,47 @@ exports[`renders without throwing 1`] = `
font-weight: 600;
}
-.c32::-moz-focus-inner,
-.c32[type='button']::-moz-focus-inner,
-.c32[type='reset']::-moz-focus-inner,
-.c32[type='submit']::-moz-focus-inner {
+.c26::-moz-focus-inner,
+.c26[type='button']::-moz-focus-inner,
+.c26[type='reset']::-moz-focus-inner,
+.c26[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
-.c32:-moz-focusring,
-.c32[type='button']:-moz-focusring,
-.c32[type='reset']:-moz-focusring,
-.c32[type='submit']:-moz-focusring {
+.c26:-moz-focusring,
+.c26[type='button']:-moz-focusring,
+.c26[type='reset']:-moz-focusring,
+.c26[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
-.c32:focus {
+.c26:focus {
outline: 0;
text-decoration: none;
}
-.c32:hover {
+.c26:hover {
border: solid 0.0625rem;
}
-.c32:active,
-.c32:active:hover,
-.c32:active:focus {
+.c26:active,
+.c26:active:hover,
+.c26:active:focus {
background-image: none;
outline: 0;
}
-.c32[disabled] {
+.c26[disabled] {
cursor: not-allowed;
pointer-events: none;
}
-.c32 + button {
+.c26 + button {
margin-left: 1.25rem;
}
-.c45 {
+.c49 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@@ -361,43 +361,43 @@ exports[`renders without throwing 1`] = `
border: solid 0.0625rem;
}
-.c45::-moz-focus-inner,
-.c45[type='button']::-moz-focus-inner,
-.c45[type='reset']::-moz-focus-inner,
-.c45[type='submit']::-moz-focus-inner {
+.c49::-moz-focus-inner,
+.c49[type='button']::-moz-focus-inner,
+.c49[type='reset']::-moz-focus-inner,
+.c49[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
-.c45:-moz-focusring,
-.c45[type='button']:-moz-focusring,
-.c45[type='reset']:-moz-focusring,
-.c45[type='submit']:-moz-focusring {
+.c49:-moz-focusring,
+.c49[type='button']:-moz-focusring,
+.c49[type='reset']:-moz-focusring,
+.c49[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
-.c45:focus {
+.c49:focus {
outline: 0;
text-decoration: none;
}
-.c45:hover {
+.c49:hover {
border: solid 0.0625rem;
}
-.c45:active,
-.c45:active:hover,
-.c45:active:focus {
+.c49:active,
+.c49:active:hover,
+.c49:active:focus {
background-image: none;
outline: 0;
}
-.c45[disabled] {
+.c49[disabled] {
cursor: not-allowed;
pointer-events: none;
}
-.c45 + button {
+.c49 + button {
margin-left: 1.25rem;
}
@@ -427,6 +427,25 @@ exports[`renders without throwing 1`] = `
margin: 0.1875rem 0.625rem 0.1875rem 0.625rem;
}
+.c21 {
+ font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+ font-weight: 400;
+ font-size: 0.9375rem;
+ font-style: normal;
+ font-stretch: normal;
+ display: block;
+}
+
+.c23 {
+ font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+ font-weight: 400;
+ font-size: 0.9375rem;
+ font-style: normal;
+ font-stretch: normal;
+ display: block;
+ margin-bottom: 0.375rem;
+}
+
.c14 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
@@ -452,7 +471,7 @@ exports[`renders without throwing 1`] = `
box-shadow: none;
}
-.c20 {
+.c29 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
font-size: 0.9375rem;
@@ -498,25 +517,23 @@ exports[`renders without throwing 1`] = `
top: 0.1875rem;
}
-.c26 {
- font-weight: 600;
- font-size: 0.625rem;
- color: #464646;
+.c33 {
+ font-size: 0.8125rem;
position: absolute;
top: 0.875rem;
right: auto;
+ color: #464646;
}
-.c28 {
- font-weight: 600;
- font-size: 0.625rem;
- color: #464646;
+.c35 {
+ font-size: 0.8125rem;
position: absolute;
top: 0.875rem;
right: 1px;
+ color: #464646;
}
-.c27 {
+.c34 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -536,17 +553,17 @@ exports[`renders without throwing 1`] = `
margin-top: 0.125rem;
}
-.c27::active {
+.c34::active {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
-.c27::focus {
+.c34::focus {
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
}
-.c29 {
+.c36 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -566,17 +583,17 @@ exports[`renders without throwing 1`] = `
margin-top: 0.125rem;
}
-.c29::active {
+.c36::active {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
-.c29::focus {
+.c36::focus {
box-shadow: 0 0 0 5px rgba(63,81,181,0.2);
}
-.c24 {
+.c31 {
background: #D8D8D8;
cursor: pointer;
display: block;
@@ -584,23 +601,23 @@ exports[`renders without throwing 1`] = `
position: relative;
}
-.c25 {
+.c32 {
background: #364ACD;
height: 100%;
position: absolute;
}
-.c23 {
+.c30 {
position: relative;
min-height: 0.625rem;
}
-.c22 {
+.c28 {
margin-bottom: 0.625rem;
margin-top: 0.75rem;
}
-.c40 {
+.c44 {
font-size: 0.9375rem;
line-height: 1.5;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
@@ -628,7 +645,7 @@ exports[`renders without throwing 1`] = `
transition: all 300ms ease;
}
-.c36 {
+.c40 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -666,7 +683,7 @@ exports[`renders without throwing 1`] = `
transition: all 300ms ease;
}
-.c37 {
+.c41 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -695,7 +712,7 @@ exports[`renders without throwing 1`] = `
flex-direction: row;
}
-.c39 {
+.c43 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -721,7 +738,7 @@ exports[`renders without throwing 1`] = `
transform: translateY(-50%);
}
-.c42 {
+.c46 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
@@ -737,14 +754,14 @@ exports[`renders without throwing 1`] = `
justify-content: flex-end;
}
-.c41 {
+.c45 {
display: inline-block;
padding: 0 1.125rem;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
}
-.c43 {
+.c47 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
-webkit-flex-grow: 1;
@@ -755,7 +772,7 @@ exports[`renders without throwing 1`] = `
flex-basis: 5.625rem;
}
-.c44 {
+.c48 {
display: inline-block;
-webkit-flex-direction: column;
-ms-flex-direction: column;
@@ -765,7 +782,7 @@ exports[`renders without throwing 1`] = `
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
- color: rgba(73,73,73,0.5);
+ color: #bdbdbd;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
@@ -796,24 +813,24 @@ exports[`renders without throwing 1`] = `
margin: 0;
}
-.c21 {
+.c27 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
-.c21 > div {
+.c27 > div {
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
}
-.c21 > div:not(:last-child) {
+.c27 > div:not(:last-child) {
margin-right: 2.25rem;
}
-.c30 {
+.c24 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -823,19 +840,29 @@ exports[`renders without throwing 1`] = `
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
- margin-top: 2.25rem;
+ margin-bottom: 1.125rem;
}
.c19 {
width: 100%;
}
-.c35 {
+.c20 {
+ line-height: 24px;
+ font-size: 21px;
+ margin-bottom: 1.125rem;
+}
+
+.c22 {
+ margin-bottom: 0.5rem;
+}
+
+.c39 {
margin-right: 1.125rem;
margin-bottom: 1.125rem;
}
-.c33 {
+.c37 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -856,7 +883,7 @@ exports[`renders without throwing 1`] = `
}
@media only screen and (min-width:0em) {
- .c34 {
+ .c38 {
-webkit-flex-basis: 100%;
-ms-flex-basis: 100%;
flex-basis: 100%;
@@ -866,7 +893,7 @@ exports[`renders without throwing 1`] = `
}
@media only screen and (min-width:48em) {
- .c34 {
+ .c38 {
-webkit-flex-basis: 50%;
-ms-flex-basis: 50%;
flex-basis: 50%;
@@ -876,7 +903,7 @@ exports[`renders without throwing 1`] = `
}
@media only screen and (min-width:64em) {
- .c34 {
+ .c38 {
-webkit-flex-basis: 33.333333333333336%;
-ms-flex-basis: 33.333333333333336%;
flex-basis: 33.333333333333336%;
@@ -886,7 +913,7 @@ exports[`renders without throwing 1`] = `
}
@media only screen and (min-width:75em) {
- .c34 {
+ .c38 {
-webkit-flex-basis: 25%;
-ms-flex-basis: 25%;
flex-basis: 25%;
@@ -896,7 +923,7 @@ exports[`renders without throwing 1`] = `
}
@media only screen and (min-width:0em) {
- .c38 {
+ .c42 {
-webkit-flex-basis: 50%;
-ms-flex-basis: 50%;
flex-basis: 50%;
@@ -1052,36 +1079,86 @@ exports[`renders without throwing 1`] = `
className="c19"
>
+
+
+
+
+
+
+
+
+
+
+
without throwing 1`] = `
/>
0.256
@@ -1102,7 +1179,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={63.8}
aria-valuemin={0.256}
aria-valuenow={0.256}
- className="c27"
+ className="c34"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -1120,7 +1197,7 @@ exports[`renders without throwing 1`] = `
63.8
@@ -1131,7 +1208,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={63.8}
aria-valuemin={0.256}
aria-valuenow={63.8}
- className="c29"
+ className="c36"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -1152,26 +1229,26 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = `
/>
0.25
@@ -1192,7 +1269,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={8}
aria-valuemin={0.25}
aria-valuenow={0.25}
- className="c27"
+ className="c34"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -1210,7 +1287,7 @@ exports[`renders without throwing 1`] = `
8
@@ -1221,7 +1298,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={8}
aria-valuemin={0.25}
aria-valuenow={8}
- className="c29"
+ className="c36"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -1242,26 +1319,26 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = `
/>
0.01
@@ -1282,7 +1359,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={4.9}
aria-valuemin={0.01}
aria-valuenow={0.01}
- className="c27"
+ className="c34"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -1300,7 +1377,7 @@ exports[`renders without throwing 1`] = `
4.9
@@ -1311,7 +1388,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={4.9}
aria-valuemin={0.01}
aria-valuenow={4.9}
- className="c29"
+ className="c36"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -1332,26 +1409,26 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = `
/>
0.016
@@ -1372,7 +1449,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={2.131}
aria-valuemin={0.016}
aria-valuenow={0.016}
- className="c27"
+ className="c34"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -1390,7 +1467,7 @@ exports[`renders without throwing 1`] = `
2.131
@@ -1401,7 +1478,7 @@ exports[`renders without throwing 1`] = `
aria-valuemax={2.131}
aria-valuemin={0.016}
aria-valuenow={2.131}
- className="c29"
+ className="c36"
draggable="false"
onKeyDown={[Function]}
onMouseDown={[Function]}
@@ -1421,77 +1498,36 @@ exports[`renders without throwing 1`] = `
-
-
-
-
-
-
-
-
-
@@ -1500,58 +1536,58 @@ exports[`renders without throwing 1`] = `
per hour
0.256
GB RAM
0.25
vCPUs
0.1
TB disk
SSD
Compute Optimized
@@ -1563,27 +1599,27 @@ exports[`renders without throwing 1`] = `
@@ -1592,58 +1628,58 @@ exports[`renders without throwing 1`] = `
per hour
0.768
GB RAM
0.5
vCPUs
0.25
TB disk
SSD
Compute Optimized
@@ -1655,27 +1691,27 @@ exports[`renders without throwing 1`] = `
@@ -1684,58 +1720,58 @@ exports[`renders without throwing 1`] = `
per hour
1.8
GB RAM
1
vCPUs
0.5
TB disk
SSD
Compute Optimized
@@ -1747,27 +1783,27 @@ exports[`renders without throwing 1`] = `
@@ -1776,58 +1812,58 @@ exports[`renders without throwing 1`] = `
per hour
3.8
GB RAM
2
vCPUs
1
TB disk
SSD
Compute Optimized
@@ -1839,27 +1875,27 @@ exports[`renders without throwing 1`] = `
@@ -1868,58 +1904,58 @@ exports[`renders without throwing 1`] = `
per hour
7.8
GB RAM
4
vCPUs
2
TB disk
SSD
Compute Optimized
@@ -1931,27 +1967,27 @@ exports[`renders without throwing 1`] = `
@@ -1960,58 +1996,58 @@ exports[`renders without throwing 1`] = `
per hour
15.8
GB RAM
8
vCPUs
4
TB disk
SSD
Compute Optimized
@@ -2023,27 +2059,27 @@ exports[`renders without throwing 1`] = `
@@ -2052,58 +2088,58 @@ exports[`renders without throwing 1`] = `
per hour
3.8
GB RAM
1
vCPUs
0.5
TB disk
SSD
General Purpose
@@ -2115,27 +2151,27 @@ exports[`renders without throwing 1`] = `
@@ -2144,58 +2180,58 @@ exports[`renders without throwing 1`] = `
per hour
7.8
GB RAM
2
vCPUs
1
TB disk
SSD
General Purpose
@@ -2207,27 +2243,27 @@ exports[`renders without throwing 1`] = `
@@ -2236,58 +2272,58 @@ exports[`renders without throwing 1`] = `
per hour
15.8
GB RAM
4
vCPUs
2
TB disk
SSD
General Purpose
@@ -2299,27 +2335,27 @@ exports[`renders without throwing 1`] = `
@@ -2328,58 +2364,58 @@ exports[`renders without throwing 1`] = `
per hour
31.8
GB RAM
8
vCPUs
4
TB disk
SSD
General Purpose
@@ -2391,27 +2427,27 @@ exports[`renders without throwing 1`] = `
@@ -2420,58 +2456,58 @@ exports[`renders without throwing 1`] = `
per hour
15.8
GB RAM
2
vCPUs
1
TB disk
SSD
Memory Optimized
@@ -2483,27 +2519,27 @@ exports[`renders without throwing 1`] = `
@@ -2512,58 +2548,58 @@ exports[`renders without throwing 1`] = `
per hour
31.8
GB RAM
4
vCPUs
2
TB disk
SSD
Memory Optimized
@@ -2575,27 +2611,27 @@ exports[`renders without throwing 1`] = `
@@ -2604,58 +2640,58 @@ exports[`renders without throwing 1`] = `
per hour
63.8
GB RAM
8
vCPUs
4
TB disk
SSD
Memory Optimized
@@ -2667,27 +2703,27 @@ exports[`renders without throwing 1`] = `
@@ -2696,58 +2732,58 @@ exports[`renders without throwing 1`] = `
per hour
31.8
GB RAM
4
vCPUs
8
TB disk
SSD
Storage Optimized
@@ -2759,27 +2795,27 @@ exports[`renders without throwing 1`] = `
@@ -2788,58 +2824,58 @@ exports[`renders without throwing 1`] = `
per hour
63.8
GB RAM
8
vCPUs
16
TB disk
SSD
Storage Optimized
@@ -2851,27 +2887,27 @@ exports[`renders without throwing 1`] = `
@@ -2880,58 +2916,58 @@ exports[`renders without throwing 1`] = `
per hour
15.8
GB RAM
2
vCPUs
12
TB disk
SSD
Storage Optimized
@@ -2943,27 +2979,27 @@ exports[`renders without throwing 1`] = `
@@ -2972,58 +3008,58 @@ exports[`renders without throwing 1`] = `
per hour
31.8
GB RAM
4
vCPUs
24
TB disk
SSD
Storage Optimized
@@ -3035,27 +3071,27 @@ exports[`renders without throwing 1`] = `
@@ -3064,58 +3100,58 @@ exports[`renders without throwing 1`] = `
per hour
63.8
GB RAM
8
vCPUs
49
TB disk
SSD
Storage Optimized
@@ -3132,7 +3168,7 @@ exports[`renders without throwing 1`] = `
className="c2"
>
diff --git a/packages/my-joyent/src/containers/home/index.js b/packages/my-joyent/src/containers/home/index.js
index f2283291..04d28097 100644
--- a/packages/my-joyent/src/containers/home/index.js
+++ b/packages/my-joyent/src/containers/home/index.js
@@ -14,7 +14,8 @@ const HomeHOC = (props) => (
const mapStateToProps = state => {
return {
- filters: state.app.filters
+ filters: state.app.filters,
+ packages: state.app.packages.length
};
};
diff --git a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
index 77a1ae99..d185c678 100644
--- a/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap
@@ -184,7 +184,7 @@ exports[`renders without throwing 1`] = `
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
- color: rgba(73,73,73,0.5);
+ color: #bdbdbd;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
diff --git a/packages/ui-toolkit/src/card/footer.js b/packages/ui-toolkit/src/card/footer.js
index 41cc6655..d87bf446 100644
--- a/packages/ui-toolkit/src/card/footer.js
+++ b/packages/ui-toolkit/src/card/footer.js
@@ -3,6 +3,7 @@ import is from 'styled-is';
import styled from 'styled-components';
import Baseline from '../baseline';
import typography from '../typography';
+import theme from '../theme';
import remcalc from 'remcalc';
import PropTypes from 'prop-types';
import Title from './title';
@@ -26,7 +27,7 @@ const Span = styled.span`
font-weight: 500;
text-transform: uppercase;
- color: rgba(73, 73, 73, 0.5);
+ color: ${theme.greyLight};
transition: all 300ms ease;
${is('selected')`
diff --git a/packages/ui-toolkit/src/slider/index.js b/packages/ui-toolkit/src/slider/index.js
index ca99ccf8..f0e5c4ec 100644
--- a/packages/ui-toolkit/src/slider/index.js
+++ b/packages/ui-toolkit/src/slider/index.js
@@ -59,16 +59,17 @@ Slider.propTypes = {
disabled: PropTypes.bool,
draggableTrack: PropTypes.bool,
onChangeStart: PropTypes.func,
- children: PropTypes.node
+ children: PropTypes.node,
+ greyed: PropTypes.bool,
};
Slider.defaultProps = {
onChangeComplete: () => {},
onChange: () => {},
formatLabel: value =>
- (value.toString().split('.')[1] || []).length > 3
- ? Math.round(value).toFixed(3)
- : value,
+ (value.toString().split('.')[1] || []).length > 3
+ ? Math.round(value).toFixed(3)
+ : value,
onChangeStart: () => {},
step: 1
};
diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx
index f982428b..da00a142 100755
--- a/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx
+++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/input-range.jsx
@@ -642,6 +642,7 @@ export default class InputRange extends Component {
classNames={this.props.classNames}
formatLabel={this.props.formatLabel}
key={key}
+ greyed={this.props.greyed}
maxValue={maxValue}
minValue={minValue}
onSliderDrag={this.handleSliderDrag}
diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx
index f047bbf6..290a0be2 100755
--- a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx
+++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx
@@ -6,12 +6,11 @@ import remcalc from 'remcalc';
import theme from '../../../theme';
const Span = styled.span`
- font-weight: 600;
- font-size: ${remcalc(10)};
- color: ${theme.secondary};
+ font-size: ${remcalc(13)};
position: absolute;
top: ${remcalc(14)};
right: ${props => (props.type === 'max' ? '1px' : 'auto')};
+ color: ${props => (props.greyed ? theme.greyLight : theme.secondary)};
`;
/**
@@ -26,7 +25,11 @@ export default function Label(props) {
? props.formatLabel(props.children, props.type)
: props.children;
- return {labelValue};
+ return (
+
+ {labelValue}
+
+ );
}
/**
@@ -40,5 +43,6 @@ Label.propTypes = {
children: PropTypes.node.isRequired,
classNames: PropTypes.objectOf(PropTypes.string),
formatLabel: PropTypes.func,
- type: PropTypes.string
+ type: PropTypes.string,
+ greyed: PropTypes.bool
};
diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx
index 325c3b1d..e1ca9b3e 100755
--- a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx
+++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx
@@ -289,7 +289,7 @@ export default class Slider extends Component {
this.node = node;
}}
>
-