{
return (
- {serviceList}
+ { serviceList }
+ { instances && }
);
};
diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index dc1ed974..77766bfc 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -935,7 +935,7 @@
}]
}, {
"uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76",
- "name": "percona-secundary",
+ "name": "percona-secondary",
"datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
"service": "4ee4103e-1a52-4099-a48e-01588f597c70",
"project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js
index c349c004..4ebc1cda 100644
--- a/ui/src/components/button/index.js
+++ b/ui/src/components/button/index.js
@@ -1,4 +1,8 @@
-import { Baseline, typography } from '../../shared/composers';
+import {
+ Baseline,
+ typography,
+ paperEffect
+} from '../../shared/composers';
import { colors, boxes } from '../../shared/constants';
import { remcalc } from '../../shared/functions';
import isString from 'lodash.isstring';
@@ -14,41 +18,55 @@ const {
const background = match({
secondary: base.white,
- disabled: inactive.default
+ disabled: inactive.default,
+ tertiary: 'transparent'
}, base.primary);
const backgroundHover = match({
secondary: base.whiteHover,
- disabled: inactive.default
+ disabled: inactive.default,
+ tertiary: 'transparent'
}, base.primaryHover);
const backgroundActive = match({
secondary: base.whiteActive,
- disabled: inactive.default
+ disabled: inactive.default,
+ tertiary: 'transparent'
}, base.primaryHover);
const border = match({
secondary: base.grey,
- disabled: inactive.grey
+ disabled: inactive.grey,
+ tertiary: inactive.text
}, base.primaryDesaturated);
const borderHover = match({
secondary: base.grey,
- disabled: inactive.default
+ disabled: inactive.default,
+ tertiary: inactive.text
}, base.primaryDark);
const borderActive = match({
secondary: base.grey,
- disabled: inactive.default
+ disabled: inactive.default,
+ tertiary: inactive.text
}, base.primaryDesaturatedHover);
const color = match({
secondary: base.secondary,
- disabled: inactive.text
+ disabled: inactive.text,
+ tertiary: inactive.grey
}, base.white);
+const boxShadow = match({
+ secondary: 'box-shadow: ${boxes.bottomShaddow};',
+ disabled: 'box-shadow: ${boxes.bottomShaddow};',
+ tertiary: paperEffect
+}, '');
+
const borderRadius = match({
- rect: 0
+ rect: 0,
+ tertiary: 0
}, boxes.borderRadius);
// based on bootstrap 4
@@ -84,7 +102,7 @@ const style = css`
border-radius: ${borderRadius};
border: solid ${remcalc(1)} ${border};
- box-shadow: ${boxes.bottomShaddow};
+ ${boxShadow};
&:focus {
outline: 0;
diff --git a/ui/src/components/button/story.js b/ui/src/components/button/story.js
index 9cafe399..7702c49c 100644
--- a/ui/src/components/button/story.js
+++ b/ui/src/components/button/story.js
@@ -11,6 +11,10 @@ storiesOf('Button', module)
+ )).add('Tertiary', () => (
+
)).add('Disabled', () => (