From 1317894f2740ceba8eb137d017ffd2a7a836920c Mon Sep 17 00:00:00 2001
From: johnytiago <joaosao10@gmail.com>
Date: Wed, 9 May 2018 10:51:10 +0100
Subject: [PATCH] feat(instances): wip networks, tags

---
 packages/instance-steps/src/network/index.js  | 10 +++-
 packages/instance-steps/src/tags/index.js     | 48 ++++++++++---------
 .../resource-widgets/src/network/index.js     | 17 +++++--
 packages/ui-toolkit/src/key-value/index.js    |  2 +-
 packages/ui-toolkit/src/tags/item.js          |  4 +-
 5 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/packages/instance-steps/src/network/index.js b/packages/instance-steps/src/network/index.js
index c5571d50..9e68578b 100644
--- a/packages/instance-steps/src/network/index.js
+++ b/packages/instance-steps/src/network/index.js
@@ -9,6 +9,8 @@ import get from 'lodash.get';
 import forceArray from 'force-array';
 import includes from 'lodash.includes';
 import find from 'lodash.find';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
 
 import Step, {
   Header as StepHeader,
@@ -26,6 +28,10 @@ import { Forms, Values } from '../constants';
 const { IC_NW_F } = Forms;
 const { IC_NW_V_INFO_EXPANDED, IC_NW_V_MACHINES_EXPANDED } = Values;
 
+const Form = styled.form`
+  padding-top: ${remcalc(1)};
+`;
+
 const Network = ({
   preview = [],
   initialValues,
@@ -78,7 +84,7 @@ const Network = ({
                 <StatusLoader />
               ) : (
                 <Fragment>
-                  <form>
+                  <Form>
                     {networks.map(
                       (
                         {
@@ -105,7 +111,7 @@ const Network = ({
                         />
                       )
                     )}
-                  </form>
+                  </Form>
                   <Margin top="5">
                     <Button type="button" component={Link} to={next}>
                       Save
diff --git a/packages/instance-steps/src/tags/index.js b/packages/instance-steps/src/tags/index.js
index 030c77c1..bedaca9e 100644
--- a/packages/instance-steps/src/tags/index.js
+++ b/packages/instance-steps/src/tags/index.js
@@ -39,7 +39,7 @@ const TagList = styled(BaseTagList)`
 
 const Tag = ({ name, value, onRemoveClick }) => (
   <Margin right={1} bottom={1} key={`${name}-${value}`}>
-    <TagItem onRemoveClick={onRemoveClick}>
+    <TagItem fill="grey" onRemoveClick={onRemoveClick}>
       {name ? `${name}: ${value}` : value}
     </TagItem>
   </Margin>
@@ -96,28 +96,30 @@ const TagsContainer = ({
           ) : null}
           {addOpen ? (
             <Fragment>
-              <ReduxForm
-                form={IC_TAG_F_ADD}
-                destroyOnUnmount={false}
-                forceUnregisterOnUnmount={true}
-                shouldAsyncValidate={shouldAsyncValidate}
-                asyncValidate={handleValidate}
-                onSubmit={handleAddTag}
-              >
-                {props => (
-                  <Fragment>
-                    <KeyValue
-                      {...props}
-                      method="add"
-                      input="input"
-                      type="tag"
-                      expanded
-                      borderless
-                      onCancel={() => handleChangeAddOpen(false)}
-                    />
-                  </Fragment>
-                )}
-              </ReduxForm>
+              <Margin top={2}>
+                <ReduxForm
+                  form={IC_TAG_F_ADD}
+                  destroyOnUnmount={false}
+                  forceUnregisterOnUnmount={true}
+                  shouldAsyncValidate={shouldAsyncValidate}
+                  asyncValidate={handleValidate}
+                  onSubmit={handleAddTag}
+                >
+                  {props => (
+                    <Fragment>
+                      <KeyValue
+                        {...props}
+                        method="add"
+                        input="input"
+                        type="tag"
+                        expanded
+                        borderless
+                        onCancel={() => handleChangeAddOpen(false)}
+                      />
+                    </Fragment>
+                  )}
+                </ReduxForm>
+              </Margin>
             </Fragment>
           ) : (
             <Margin top={5}>
diff --git a/packages/resource-widgets/src/network/index.js b/packages/resource-widgets/src/network/index.js
index 2d7ab092..984befb9 100644
--- a/packages/resource-widgets/src/network/index.js
+++ b/packages/resource-widgets/src/network/index.js
@@ -6,6 +6,7 @@ import { Margin, Padding } from 'styled-components-spacing';
 import styled from 'styled-components';
 import Flex, { FlexItem } from 'styled-flex-component';
 import remcalc from 'remcalc';
+import { isNot } from 'styled-is';
 
 import {
   H4,
@@ -13,7 +14,7 @@ import {
   Small,
   DotIcon,
   Card,
-  CardHeader,
+  CardHeader as BaseCardHeader,
   CardHeaderMeta,
   CardHeaderBox,
   CardOutlet,
@@ -38,6 +39,12 @@ const Box = styled.div`
   min-width: ${remcalc(300)};
 `;
 
+const CardHeader = styled(BaseCardHeader)`
+  ${isNot('secondary')`
+    background-color: #f7f7f7;
+  `};
+`;
+
 export const Collapsed = ({ name, fabric, ...network }) => (
   <Margin inline right={3} top={3}>
     <Box>
@@ -186,7 +193,7 @@ export const Expanded = ({
                 <Fragment>
                   <Margin top={3}>
                     <Card collapsed={!infoExpanded} actionable={!infoExpanded}>
-                      <CardHeader
+                      <BaseCardHeader
                         secondary={false}
                         transparent={false}
                         onClick={onInfoClick}
@@ -199,7 +206,7 @@ export const Expanded = ({
                         <CardHeaderBox>
                           <ArrowIcon direction={infoExpanded ? 'up' : 'down'} />
                         </CardHeaderBox>
-                      </CardHeader>
+                      </BaseCardHeader>
                       {infoExpanded ? (
                         <CardOutlet>
                           <Padding all={3}>
@@ -277,7 +284,7 @@ export const Expanded = ({
                         collapsed={!machinesExpanded}
                         actionable={!machinesExpanded}
                       >
-                        <CardHeader
+                        <BaseCardHeader
                           secondary={false}
                           transparent={false}
                           onClick={onMachinesClick}
@@ -292,7 +299,7 @@ export const Expanded = ({
                               direction={machinesExpanded ? 'up' : 'down'}
                             />
                           </CardHeaderBox>
-                        </CardHeader>
+                        </BaseCardHeader>
                         {machinesExpanded ? (
                           <CardOutlet>
                             <Padding top={2} bottom={2} left={3} right={3}>
diff --git a/packages/ui-toolkit/src/key-value/index.js b/packages/ui-toolkit/src/key-value/index.js
index 6763968b..150544ee 100644
--- a/packages/ui-toolkit/src/key-value/index.js
+++ b/packages/ui-toolkit/src/key-value/index.js
@@ -210,7 +210,7 @@ export const KeyValue = ({
           onClick={handleHeaderClick}
         >
           <PaddingMaxWidth left={borderless ? 0 : 3} right={borderless ? 0 : 3}>
-            <Flex alignCenter justifyBetween full>
+            <Flex alignCenter justifyBetween>
               <Meta>
                 {method === 'add' || method === 'create' ? (
                   <H4>{`${titleCase(method)} ${type}`}</H4>
diff --git a/packages/ui-toolkit/src/tags/item.js b/packages/ui-toolkit/src/tags/item.js
index bf8e9b1a..ceaaa178 100644
--- a/packages/ui-toolkit/src/tags/item.js
+++ b/packages/ui-toolkit/src/tags/item.js
@@ -46,13 +46,13 @@ const Tag = styled.li`
 `;
 
 export default withTheme(
-  ({ theme, children, active, onRemoveClick, ...rest }) => (
+  ({ theme, children, active, onRemoveClick, fill = null, ...rest }) => (
     <Container>
       <Tag active={active} {...rest}>
         {children}
         {onRemoveClick ? (
           <CloseIcon
-            fill={active ? theme.primaryActive : theme.text}
+            fill={fill ? fill : active ? theme.primaryActive : theme.text}
             disabled
             onClick={onRemoveClick}
           />