From c268d88a4d147d5c791d461f1ea760373a11970b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Moreira?= Date: Wed, 30 May 2018 14:11:48 +0100 Subject: [PATCH] feat(instances): create instance - networks responsive next button --- packages/instance-steps/src/networks/index.js | 72 ++++++++++--------- 1 file changed, 37 insertions(+), 35 deletions(-) diff --git a/packages/instance-steps/src/networks/index.js b/packages/instance-steps/src/networks/index.js index 524327ae..312dac3d 100644 --- a/packages/instance-steps/src/networks/index.js +++ b/packages/instance-steps/src/networks/index.js @@ -1,5 +1,5 @@ import React, { Fragment } from 'react'; -import { Margin } from 'styled-components-spacing'; +import { Margin, Padding } from 'styled-components-spacing'; import { compose, graphql } from 'react-apollo'; import { Link } from 'react-router-dom'; import ReduxForm from 'declarative-redux-form'; @@ -9,7 +9,7 @@ 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 styled, { withTheme } from 'styled-components'; import remcalc from 'remcalc'; import Step, { @@ -28,10 +28,6 @@ import { Forms, Values } from '../constants'; const { IR_NW_F } = Forms; const { IR_NW_V_INFO_EXPANDED, IR_NW_V_MACHINES_EXPANDED } = Values; -const Form = styled.form` - padding-top: ${remcalc(1)}; -`; - const Networks = ({ preview = [], initialValues, @@ -41,6 +37,7 @@ const Networks = ({ setMachinesExpanded, networks = [], loading, + theme = {}, ...props }) => ( @@ -84,40 +81,45 @@ const Networks = ({ ) : ( -
- {networks.map( - ( - { - id, - selected, - infoExpanded, - machinesExpanded, - ...network - }, - index - ) => ( - setInfoExpanded(id, !infoExpanded)} - onMachinesClick={() => - setMachinesExpanded(id, !machinesExpanded) - } - {...network} - /> - ) - )} - + +
+ {networks.map( + ( + { + id, + selected, + infoExpanded, + machinesExpanded, + ...network + }, + index + ) => ( + + setInfoExpanded(id, !infoExpanded) + } + onMachinesClick={() => + setMachinesExpanded(id, !machinesExpanded) + } + {...network} + /> + ) + )} + +
@@ -198,4 +200,4 @@ export default compose( } }) ) -)(Networks); +)(withTheme(({ ...rest }) => ));