Colours from constants lagend for toggle

frontend/src/components/services/view.js

@@ -7,8 +7,17 @@ import { H2 } from '@ui/components/base-elements';
 import {
   FormGroup,
   Toggle,
-  ToggleList
+  ToggleList,
+  Legend
 } from '@ui/components/form';
+import styled from 'styled-components';
+import { unitcalc } from '@ui/shared/functions';
+
+const StyledLegend = styled(Legend)`
+  float: left;
+  padding-top: ${unitcalc(2)};
+  margin-right: ${unitcalc(1.5)};
+`;
 
 const ServicesView = ({
   children,
@@ -37,6 +46,7 @@ const ServicesView = ({
 
     return (
       <FormGroup name='service-view' value={value}>
+        <StyledLegend>View</StyledLegend>
         <ToggleList>
           <Toggle value='topology' onChange={onToggleChange}>Topology</Toggle>
           <Toggle value='list' onChange={onToggleChange}>List</Toggle>

ui/src/components/form/index.js

@@ -6,7 +6,7 @@ export { default as FormLabel } from './label';
 export { default as Legend } from './legend';
 export { default as FormMeta } from './meta';
 export { default as Radio } from './radio';
-export { RadioList as RadioList } from './radio';
+export { RadioList } from './radio';
 export { default as Select } from './select';
 export { default as Toggle } from './toggle';
-export { ToggleList as ToggleList } from './toggle';
+export { ToggleList } from './toggle';

ui/src/components/topology/graph-link.js

@@ -1,21 +1,22 @@
 import styled from 'styled-components';
 import { Baseline } from '../../shared/composers';
+import { colors } from '../../shared/constants';
 import PropTypes from './prop-types';
 import React from 'react';
 
 const StyledLine = styled.line`
-  stroke: #343434;
+  stroke: ${colors.base.secondaryActive};
   stroke-width: 1.5;
 `;
 
 const StyledCircle = styled.circle`
-  stroke: #343434;
-  fill: #464646;
+  stroke: ${colors.base.secondaryActive};
+  fill: colors.base.secondary;
   stroke-width: 1.5;
 `;
 
 const StyledArrow = styled.line`
-  stroke: white;
+  stroke: ${colors.base.white};
   stroke-width: 2;
   stroke-linecap: round;
 `;

ui/src/components/topology/graph-node-button.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Baseline } from '../../shared/composers';
+import { colors } from '../../shared/constants';
 import styled from 'styled-components';
 
 const StyledButton = styled.rect`
@@ -8,13 +9,14 @@ const StyledButton = styled.rect`
 `;
 
 const StyledButtonCircle = styled.circle`
-  fill: ${props => props.connected ? '#ffffff' : '#464646'};
+  fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
 `;
 
 const GraphNodeButton = ({
   connected,
   buttonRect,
-  onButtonClick
+  onButtonClick,
+  index
 }) => {
 
   const buttonCircleRadius = 2;
@@ -36,7 +38,10 @@ const GraphNodeButton = ({
       <StyledButton
         height={buttonRect.height}
         onClick={onButtonClick}
+        onKeyDown={onButtonClick}
         width={buttonRect.width}
+        role='button'
+        tabIndex={100 + index}
       />
       {buttonCircles}
     </g>
@@ -51,6 +56,7 @@ GraphNodeButton.propTypes = {
     height: React.PropTypes.number
   }).isRequired,
   connected: React.PropTypes.bool,
+  index: React.PropTypes.number.isRequired,
   onButtonClick: React.PropTypes.func.isRequired
 };
 

ui/src/components/topology/graph-node-info.js

@@ -1,21 +1,22 @@
 import React from 'react';
 import { Baseline } from '../../shared/composers';
+import { colors } from '../../shared/constants';
 import DataCentresIcon from './icon-data-centers.svg';
 import InstancesIcon from './icon-instances.svg';
 import styled from 'styled-components';
 
 const StyledText = styled.text`
-  fill: ${props => props.connected ? '#ffffff' : '#464646'};
+  fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
   font-size: 12px;
   opacity: 0.8;
 `;
 
 const StyledInstancesIcon = styled(InstancesIcon)`
-  fill: ${props => props.connected ? '#ffffff' : '#464646'};
+  fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
 `;
 
 const StyledDataCentresIcon = styled(DataCentresIcon)`
-  fill: ${props => props.connected ? '#ffffff' : '#464646'};
+  fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
 `;
 
 const GraphNodeInfo = ({

ui/src/components/topology/graph-node-metrics.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Baseline } from '../../shared/composers';
+import { colors } from '../../shared/constants';
 import styled from 'styled-components';
 
 const StyledText = styled.text`
-  fill: ${props => props.connected ? '#ffffff' : '#464646'};
+  fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
   font-size: 12px;
   opacity: 0.8;
 `;

ui/src/components/topology/graph-node.js

@@ -1,4 +1,5 @@
 import { Baseline } from '../../shared/composers';
+import { colors } from '../../shared/constants';
 import PropTypes from './prop-types';
 // import HeartIcon from './icon-heart.svg';
 import GraphNodeButton from './graph-node-button';
@@ -7,39 +8,44 @@ import GraphNodeMetrics from './graph-node-metrics';
 import styled from 'styled-components';
 import React from 'react';
 
+
+
 const StyledRect = styled.rect`
-  stroke: ${props => props.connected ? '#343434' : '#d8d8d8'};
-  fill: ${props => props.connected ? '#464646' : '#ffffff'};
+  stroke: ${props => props.connected ?
+    colors.base.secondaryActive : colors.base.grey};
+  fill: ${props => props.connected ? colors.base.secondary : colors.base.white};
   stroke-width: 1.5;
   rx: 4;
   ry: 4;
 `;
 
 const StyledShadowRect = styled.rect`
-  fill: ${props => props.connected ? '#464646' : '#d8d8d8'};
+  fill: ${props => props.connected ? colors.base.secondary : colors.base.grey};
   opacity: 0.33;
   rx: 4;
   ry: 4;
 `;
 
 const StyledLine = styled.line`
-  stroke: ${props => props.connected ? '#343434' : '#d8d8d8'};
+  stroke: ${props => props.connected ?
+    colors.base.secondaryActive : colors.base.grey};
   stroke-width: 1.5;
 `;
 
 const StyledText = styled.text`
-  fill: ${props => props.connected ? '#ffffff' : '#464646'};
+  fill: ${props => props.connected ? colors.base.white : colors.base.secondary};
   font-size: 16px;
   font-weight: 600;
 `;
 
 const HeartCircle = styled.circle`
-  fill: #00af66;
+  fill: ${colors.base.green};
 `;
 
 const GraphNode = ({
   connected,
   data,
+  index,
   size,
   onDragStart
 }) => {
@@ -150,6 +156,7 @@ const GraphNode = ({
       <GraphNodeButton
         buttonRect={buttonRect}
         onButtonClick={onButtonClick}
+        index={index}
         connected={connected}
       />
       {/*<GraphNodeInfo
@@ -171,6 +178,7 @@ const GraphNode = ({
 GraphNode.propTypes = {
   connected: React.PropTypes.bool,
   data: React.PropTypes.object.isRequired,
+  index: React.PropTypes.number.isRequired,
   onDragStart: React.PropTypes.func,
   size: PropTypes.Size
 };