From 9fa15aa70049cd2f58f84c38d5e2e6d702a955dd Mon Sep 17 00:00:00 2001
From: JUDIT GRESKOVITS <juditgreskovits@gmail.com>
Date: Wed, 22 Mar 2017 16:50:26 +0000
Subject: [PATCH] Add topology bg colour and LayoutContainer

---
 frontend/src/components/article/index.js      | 11 +---
 frontend/src/components/layout/container.js   | 13 +++++
 frontend/src/components/layout/index.js       |  1 +
 .../src/components/metric-charts/index.js     |  2 +
 frontend/src/components/section/index.js      | 11 ++--
 frontend/src/components/services/view.js      | 52 +++++++++++--------
 frontend/src/containers/home/index.js         | 11 ++--
 frontend/src/containers/metrics/index.js      | 15 +++---
 frontend/src/containers/org/people.js         |  5 +-
 frontend/src/containers/org/projects.js       |  5 +-
 frontend/src/containers/org/settings.js       |  5 +-
 frontend/src/containers/project/feed.js       |  5 +-
 frontend/src/containers/project/instances.js  | 14 ++---
 frontend/src/containers/project/manifest.js   |  5 +-
 frontend/src/containers/project/people.js     |  5 +-
 frontend/src/containers/project/rollback.js   |  5 +-
 frontend/src/containers/project/settings.js   |  5 +-
 .../src/containers/service/activity-feed.js   |  5 +-
 frontend/src/containers/service/firewall.js   |  5 +-
 frontend/src/containers/service/instances.js  |  5 +-
 frontend/src/containers/service/networks.js   |  5 +-
 .../containers/service/service-manifest.js    |  5 +-
 frontend/src/containers/service/summary.js    |  5 +-
 .../src/containers/service/tags-metadata.js   |  5 +-
 frontend/src/containers/services/list.js      |  5 +-
 frontend/src/containers/services/topology.js  | 25 +++++----
 frontend/src/mock-state-testing.json          |  2 +-
 frontend/src/mock-state.json                  |  2 +-
 ui/src/components/colors/story.js             |  1 +
 ui/src/components/list/meta.js                |  2 +-
 ui/src/components/metric/full/view.js         |  1 -
 .../table-simple-table/table-body.js          |  1 +
 ui/src/components/table-simple-table/table.js |  1 +
 ui/src/components/tabs/tab/index.js           |  3 +-
 34 files changed, 161 insertions(+), 87 deletions(-)
 create mode 100644 frontend/src/components/layout/container.js
 create mode 100644 frontend/src/components/layout/index.js

diff --git a/frontend/src/components/article/index.js b/frontend/src/components/article/index.js
index 6828abe5..b9f663c1 100644
--- a/frontend/src/components/article/index.js
+++ b/frontend/src/components/article/index.js
@@ -1,13 +1,4 @@
 import styled from 'styled-components';
-import { breakpoints, colors } from '@ui/shared/constants';
-import { remcalc } from '@ui/shared/functions';
 
 // Main content Wrapper Styles
-export default styled.article`
-  padding: 2rem;
-  // border-top: ${remcalc(1)} solid ${colors.base.grey};
-
-  ${breakpoints.large`
-    padding: 0;
-  `}
-`;
+export default styled.article``;
diff --git a/frontend/src/components/layout/container.js b/frontend/src/components/layout/container.js
new file mode 100644
index 00000000..69e5e9ab
--- /dev/null
+++ b/frontend/src/components/layout/container.js
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import Container from '@ui/components/container';
+import { breakpoints } from '@ui/shared/constants';
+
+const LayoutContainer = styled(Container)`
+  padding: 2rem;
+
+  ${breakpoints.large`
+    padding: 0;
+  `}
+`;
+
+export default LayoutContainer;
diff --git a/frontend/src/components/layout/index.js b/frontend/src/components/layout/index.js
new file mode 100644
index 00000000..d0d40032
--- /dev/null
+++ b/frontend/src/components/layout/index.js
@@ -0,0 +1 @@
+export { default as LayoutContainer } from './container';
diff --git a/frontend/src/components/metric-charts/index.js b/frontend/src/components/metric-charts/index.js
index 05477f25..9808002b 100644
--- a/frontend/src/components/metric-charts/index.js
+++ b/frontend/src/components/metric-charts/index.js
@@ -64,6 +64,8 @@ const MetricCharts = ({
           yMax={type.max}
           yMeasurement={type.measurement}
           yMin={type.min}
+          width={940}
+          height={262}
         />
       </MetricView>
     );
diff --git a/frontend/src/components/section/index.js b/frontend/src/components/section/index.js
index c5035cef..6d81d0ba 100644
--- a/frontend/src/components/section/index.js
+++ b/frontend/src/components/section/index.js
@@ -9,6 +9,7 @@ import { remcalc } from '@ui/shared/functions';
 import PropTypes from '@root/prop-types';
 import Ul from '@ui/components/horizontal-list/ul';
 import Breadcrumb from '@components/breadcrumb';
+import { LayoutContainer } from '@components/layout';
 
 const StyledHorizontalList = styled(Ul)`
   padding: 0;
@@ -46,10 +47,12 @@ const Section = (props) => {
 
   return (
     <div>
-      <Breadcrumb {...props} />
-      <StyledHorizontalList name='project-nav'>
-        {navLinks}
-      </StyledHorizontalList>
+      <LayoutContainer>
+        <Breadcrumb {...props} />
+        <StyledHorizontalList name='project-nav'>
+          {navLinks}
+        </StyledHorizontalList>
+      </LayoutContainer>
       {children}
     </div>
   );
diff --git a/frontend/src/components/services/view.js b/frontend/src/components/services/view.js
index fb937aac..aff0921d 100644
--- a/frontend/src/components/services/view.js
+++ b/frontend/src/components/services/view.js
@@ -3,6 +3,7 @@ import EmptyServices from '@components/empty/services';
 import PropTypes from '@root/prop-types';
 import Row from '@ui/components/row';
 import Column from '@ui/components/column';
+import { LayoutContainer } from '@components/layout';
 import { H2 } from '@ui/components/base-elements';
 import {
   FormGroup,
@@ -41,24 +42,27 @@ const ServicesView = ({
     }
   };
 
-  const filter = toggleValue === 'topology'
-    ? (
-      <Column xs={7}>
-        <TopologyFilter services={services} project={project} />
-      </Column>
-    ) : null;
+  const filter = (
+    <Column xs={7}>
+      <TopologyFilter services={services} project={project} />
+    </Column>
+  );
 
   const toggle = services ? (
+    <Column xs={5}>
+      <FormGroup name='service-view' value={toggleValue}>
+        <StyledLegend>View</StyledLegend>
+        <ToggleList>
+          <Toggle value='topology' onChange={onToggleChange}>Topology</Toggle>
+          <Toggle value='list' onChange={onToggleChange}>List</Toggle>
+        </ToggleList>
+      </FormGroup>
+    </Column>
+  ) : null;
+
+  const controls = services ? (
     <PaddedRow>
-      <Column xs={5}>
-        <FormGroup name='service-view' value={toggleValue}>
-          <StyledLegend>View</StyledLegend>
-          <ToggleList>
-            <Toggle value='topology' onChange={onToggleChange}>Topology</Toggle>
-            <Toggle value='list' onChange={onToggleChange}>List</Toggle>
-          </ToggleList>
-        </FormGroup>
-      </Column>
+      { toggle }
       { filter }
     </PaddedRow>
   ) : null;
@@ -68,13 +72,17 @@ const ServicesView = ({
   );
 
   return (
-    <Row>
-      <Column xs={12}>
-        <H2>Services</H2>
-        { toggle }
-        { content }
-      </Column>
-    </Row>
+    <div>
+      <LayoutContainer>
+        <Row>
+          <Column xs={12}>
+            <H2>Services</H2>
+            { controls }
+          </Column>
+        </Row>
+      </LayoutContainer>
+      { content }
+    </div>
   );
 };
 
diff --git a/frontend/src/containers/home/index.js b/frontend/src/containers/home/index.js
index 2b78902a..35dd6cb5 100644
--- a/frontend/src/containers/home/index.js
+++ b/frontend/src/containers/home/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
 
-import Container from '@ui/components/container';
 import Org from '@containers/org';
 import PropTypes from '@root/prop-types';
 import Redirect from '@components/redirect';
@@ -18,12 +17,10 @@ const Home = ({
 
   return (
     <div>
-      <Container>
-        <Switch>
-          <Route component={Org} path='/:org/:section?' />
-          <Route component={notFound} />
-        </Switch>
-      </Container>
+      <Switch>
+        <Route component={Org} path='/:org/:section?' />
+        <Route component={notFound} />
+      </Switch>
     </div>
   );
 };
diff --git a/frontend/src/containers/metrics/index.js b/frontend/src/containers/metrics/index.js
index 268dad9d..9a5e27b6 100644
--- a/frontend/src/containers/metrics/index.js
+++ b/frontend/src/containers/metrics/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { LayoutContainer } from '@components/layout';
 
 import { toggleMonitorView } from '@state/actions';
 // import AddMetrics from '@root/components/metric-charts/add-metrics';
@@ -24,12 +25,14 @@ const Metrics = ({
   const onRemoveMetric = (ev) => null;
 
   return (
-    <MetricCharts
-      datasets={datasets}
-      onDurationChange={metricDurationChange}
-      onRemoveMetric={onRemoveMetric}
-      onSettingsClick={onMonitorsClick}
-    />
+    <LayoutContainer>
+      <MetricCharts
+        datasets={datasets}
+        onDurationChange={metricDurationChange}
+        onRemoveMetric={onRemoveMetric}
+        onSettingsClick={onMonitorsClick}
+      />
+    </LayoutContainer>
   );
 
   /*return (
diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js
index efb0026b..943c9c42 100644
--- a/frontend/src/containers/org/people.js
+++ b/frontend/src/containers/org/people.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { LayoutContainer } from '@components/layout';
 import PeopleSection from '@components/people-list';
 import Section from './section';
 
@@ -21,7 +22,9 @@ import {
 
 const People = (props) => (
   <Section {...props}>
-    <PeopleSection {...props} />
+    <LayoutContainer>
+      <PeopleSection {...props} />
+    </LayoutContainer>
   </Section>
 );
 
diff --git a/frontend/src/containers/org/projects.js b/frontend/src/containers/org/projects.js
index 9b124576..5f39df50 100644
--- a/frontend/src/containers/org/projects.js
+++ b/frontend/src/containers/org/projects.js
@@ -1,13 +1,16 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import Section from './section';
+import { LayoutContainer } from '@components/layout';
 import Projects from '@containers/projects';
 import Project from '@containers/project';
 
 export default () => {
   const list = (props) => (
     <Section {...props}>
-      <Projects {...props} />
+      <LayoutContainer>
+        <Projects {...props} />
+      </LayoutContainer>
     </Section>
   );
 
diff --git a/frontend/src/containers/org/settings.js b/frontend/src/containers/org/settings.js
index 94fc368d..a69539e7 100644
--- a/frontend/src/containers/org/settings.js
+++ b/frontend/src/containers/org/settings.js
@@ -1,10 +1,13 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import Section from './section';
+import { LayoutContainer } from '@components/layout';
 
 const Settings = (props) => (
   <Section {...props}>
-    <p>settings</p>
+    <LayoutContainer>
+      <p>settings</p>
+    </LayoutContainer>
   </Section>
 );
 
diff --git a/frontend/src/containers/project/feed.js b/frontend/src/containers/project/feed.js
index 7815a5d5..81588e5f 100644
--- a/frontend/src/containers/project/feed.js
+++ b/frontend/src/containers/project/feed.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import Section from './section';
+import { LayoutContainer } from '@components/layout';
 
 export default (props) => (
   <Section {...props}>
-    <p>Project Feed</p>
+    <LayoutContainer>
+      <p>Project Feed</p>
+    </LayoutContainer>
   </Section>
 );
diff --git a/frontend/src/containers/project/instances.js b/frontend/src/containers/project/instances.js
index 8eb5f3de..29bc933f 100644
--- a/frontend/src/containers/project/instances.js
+++ b/frontend/src/containers/project/instances.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { toggleInstanceCollapsed } from '@state/actions';
+import { LayoutContainer } from '@components/layout';
 import EmptyInstances from '@components/empty/instances';
 import PropTypes from '@root/prop-types';
 import Section from './section';
@@ -19,11 +20,13 @@ const Instances = (props) => {
 
   return (
     <Section {...props}>
-      {empty}
-      <InstanceList
-        instances={instances}
-        toggleCollapsed={toggleCollapsed}
-      />
+      <LayoutContainer>
+        {empty}
+        <InstanceList
+          instances={instances}
+          toggleCollapsed={toggleCollapsed}
+        />
+      </LayoutContainer>
     </Section>
   );
 };
@@ -49,4 +52,3 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(Instances);
-
diff --git a/frontend/src/containers/project/manifest.js b/frontend/src/containers/project/manifest.js
index 633697b2..88eeaed5 100644
--- a/frontend/src/containers/project/manifest.js
+++ b/frontend/src/containers/project/manifest.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import Section from './section';
+import { LayoutContainer } from '@components/layout';
 
 export default (props) => (
   <Section {...props}>
-    <p>manifest</p>
+    <LayoutContainer>
+      <p>manifest</p>
+    </LayoutContainer>
   </Section>
 );
diff --git a/frontend/src/containers/project/people.js b/frontend/src/containers/project/people.js
index 498e4ab3..2addc87a 100644
--- a/frontend/src/containers/project/people.js
+++ b/frontend/src/containers/project/people.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { LayoutContainer } from '@components/layout';
 import PeopleSection from '@components/people-list';
 import Section from './section';
 
@@ -21,7 +22,9 @@ import {
 
 const People = (props) => (
   <Section {...props}>
-    <PeopleSection {...props} />
+    <LayoutContainer>
+      <PeopleSection {...props} />
+    </LayoutContainer>
   </Section>
 );
 
diff --git a/frontend/src/containers/project/rollback.js b/frontend/src/containers/project/rollback.js
index 81727099..cfa66bb3 100644
--- a/frontend/src/containers/project/rollback.js
+++ b/frontend/src/containers/project/rollback.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import Section from './section';
+import { LayoutContainer } from '@components/layout';
 
 export default (props) => (
   <Section {...props}>
-    <p>Rollback</p>
+    <LayoutContainer>
+      <p>Rollback</p>
+    </LayoutContainer>
   </Section>
 );
diff --git a/frontend/src/containers/project/settings.js b/frontend/src/containers/project/settings.js
index 6083a4a9..c7f879e0 100644
--- a/frontend/src/containers/project/settings.js
+++ b/frontend/src/containers/project/settings.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import Section from './section';
+import { LayoutContainer } from '@components/layout';
 
 export default (props) => (
   <Section {...props}>
-    <p>settings</p>
+    <LayoutContainer>
+      <p>settings</p>
+    </LayoutContainer>
   </Section>
 );
diff --git a/frontend/src/containers/service/activity-feed.js b/frontend/src/containers/service/activity-feed.js
index ebc2d933..f05b36aa 100644
--- a/frontend/src/containers/service/activity-feed.js
+++ b/frontend/src/containers/service/activity-feed.js
@@ -1,5 +1,8 @@
 import React from 'react';
+import { LayoutContainer } from '@components/layout';
 
 export default () => (
-  <p>activity-feed</p>
+  <LayoutContainer>
+    <p>activity-feed</p>
+  </LayoutContainer>
 );
diff --git a/frontend/src/containers/service/firewall.js b/frontend/src/containers/service/firewall.js
index 0c16dcf4..69ecd8d9 100644
--- a/frontend/src/containers/service/firewall.js
+++ b/frontend/src/containers/service/firewall.js
@@ -1,5 +1,8 @@
 import React from 'react';
+import { LayoutContainer } from '@components/layout';
 
 export default () => (
-  <p>firewall</p>
+  <LayoutContainer>
+    <p>firewall</p>
+  </LayoutContainer>
 );
diff --git a/frontend/src/containers/service/instances.js b/frontend/src/containers/service/instances.js
index db2ddb70..7927e58d 100644
--- a/frontend/src/containers/service/instances.js
+++ b/frontend/src/containers/service/instances.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { toggleInstanceCollapsed } from '@state/actions';
+import { LayoutContainer } from '@components/layout';
 import EmptyInstances from '@components/empty/instances';
 import PropTypes from '@root/prop-types';
 import InstanceList from '@components/instance-list';
@@ -15,13 +16,13 @@ const Instances = ({
   );
 
   return (
-    <div>
+    <LayoutContainer>
       {empty}
       <InstanceList
         instances={instances}
         toggleCollapsed={toggleCollapsed}
       />
-    </div>
+    </LayoutContainer>
   );
 };
 
diff --git a/frontend/src/containers/service/networks.js b/frontend/src/containers/service/networks.js
index cee7965f..c196b350 100644
--- a/frontend/src/containers/service/networks.js
+++ b/frontend/src/containers/service/networks.js
@@ -1,5 +1,8 @@
 import React from 'react';
+import { LayoutContainer } from '@components/layout';
 
 export default () => (
-  <p>networks</p>
+  <LayoutContainer>
+    <p>networks</p>
+  </LayoutContainer>
 );
diff --git a/frontend/src/containers/service/service-manifest.js b/frontend/src/containers/service/service-manifest.js
index 41c785f2..e2ece8c6 100644
--- a/frontend/src/containers/service/service-manifest.js
+++ b/frontend/src/containers/service/service-manifest.js
@@ -1,5 +1,8 @@
 import React from 'react';
+import { LayoutContainer } from '@components/layout';
 
 export default () => (
-  <p>service-manifest</p>
+  <LayoutContainer>
+    <p>service-manifest</p>
+  </LayoutContainer>
 );
diff --git a/frontend/src/containers/service/summary.js b/frontend/src/containers/service/summary.js
index 24290a72..f2cab771 100644
--- a/frontend/src/containers/service/summary.js
+++ b/frontend/src/containers/service/summary.js
@@ -1,5 +1,8 @@
 import React from 'react';
+import { LayoutContainer } from '@components/layout';
 
 export default () => (
-  <p>summary</p>
+  <LayoutContainer>
+    <p>summary</p>
+  </LayoutContainer>
 );
diff --git a/frontend/src/containers/service/tags-metadata.js b/frontend/src/containers/service/tags-metadata.js
index 45c09fe6..b4f2c8e1 100644
--- a/frontend/src/containers/service/tags-metadata.js
+++ b/frontend/src/containers/service/tags-metadata.js
@@ -1,5 +1,8 @@
 import React from 'react';
+import { LayoutContainer } from '@components/layout';
 
 export default () => (
-  <p>tags-metadata</p>
+  <LayoutContainer>
+    <p>tags-metadata</p>
+  </LayoutContainer>
 );
diff --git a/frontend/src/containers/services/list.js b/frontend/src/containers/services/list.js
index 510bc1be..5841c0a9 100644
--- a/frontend/src/containers/services/list.js
+++ b/frontend/src/containers/services/list.js
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
 import PropTypes from '@root/prop-types';
+import { LayoutContainer } from '@components/layout';
 import ServiceItem from '@components/service/item';
 import UnmanagedInstances  from '@components/services/unmanaged-instances';
 import { toggleTooltip } from '@state/actions';
@@ -79,7 +80,7 @@ class Services extends React.Component {
     ));
 
     return (
-      <div>
+      <LayoutContainer>
         { instances && <UnmanagedInstances instances={instances} /> }
         <StyledContainer>
           <div ref={this.ref('container')}>
@@ -87,7 +88,7 @@ class Services extends React.Component {
             <ServicesTooltip {...uiTooltip} />
           </div>
         </StyledContainer>
-      </div>
+      </LayoutContainer>
     );
   }
 }
diff --git a/frontend/src/containers/services/topology.js b/frontend/src/containers/services/topology.js
index 5f6da987..1a891c56 100644
--- a/frontend/src/containers/services/topology.js
+++ b/frontend/src/containers/services/topology.js
@@ -2,10 +2,11 @@ import React from 'react';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
 import PropTypes from '@root/prop-types';
+import { colors } from '@ui/shared/constants';
 import { TopologyGraph } from '@ui/components/topology';
+import { LayoutContainer } from '@components/layout';
 import ServicesTooltip from '@components/services/tooltip';
 
-
 import { toggleTooltip } from '@state/actions';
 
 import {
@@ -15,7 +16,11 @@ import {
   serviceUiTooltipSelector
 } from '@state/selectors';
 
-const StyledContainer = styled.div`
+const StyledBackground = styled.div`
+  background-color: ${colors.base.whiteActive};
+`;
+
+const StyledContainer = styled(LayoutContainer)`
   position: relative;
 `;
 
@@ -31,13 +36,15 @@ const Services = (props) => {
   };
 
   return (
-    <StyledContainer>
-      <TopologyGraph
-        onQuickActions={onQuickActions}
-        services={services}
-      />
-      <ServicesTooltip {...uiTooltip} />
-    </StyledContainer>
+    <StyledBackground>
+      <StyledContainer>
+        <TopologyGraph
+          onQuickActions={onQuickActions}
+          services={services}
+        />
+        <ServicesTooltip {...uiTooltip} />
+      </StyledContainer>
+    </StyledBackground>
   );
 };
 
diff --git a/frontend/src/mock-state-testing.json b/frontend/src/mock-state-testing.json
index 71550a2a..4e6cfcc1 100644
--- a/frontend/src/mock-state-testing.json
+++ b/frontend/src/mock-state-testing.json
@@ -309,7 +309,7 @@
       "sections": [
         "summary",
         "instances",
-        "metric-s",
+        "metrics",
         "networks",
         "tags-metadata",
         "activity-feed",
diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index 7d4ae27a..2551e698 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -332,7 +332,7 @@
       "sections": [
         "summary",
         "instances",
-        "metric-s",
+        "metrics",
         "networks",
         "tags-metadata",
         "activity-feed",
diff --git a/ui/src/components/colors/story.js b/ui/src/components/colors/story.js
index f9233884..6487627f 100644
--- a/ui/src/components/colors/story.js
+++ b/ui/src/components/colors/story.js
@@ -2,6 +2,7 @@ import { storiesOf } from '@kadira/storybook';
 import React from 'react';
 import styled from 'styled-components';
 import { colors } from '../../shared/constants';
+import { remcalc } from '../../shared/functions';
 import Column from '../column';
 import Row from '../row';
 
diff --git a/ui/src/components/list/meta.js b/ui/src/components/list/meta.js
index 109a5b4c..e7a71ae0 100644
--- a/ui/src/components/list/meta.js
+++ b/ui/src/components/list/meta.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Subscriber } from 'react-broadcast';
 import { Baseline } from '../../shared/composers';
-import { is, isNot } from '../../shared/functions';
+import { is } from '../../shared/functions';
 import Column from '../column';
 import Row from '../row';
 import View from './view';
diff --git a/ui/src/components/metric/full/view.js b/ui/src/components/metric/full/view.js
index 44116f00..33e5fac8 100644
--- a/ui/src/components/metric/full/view.js
+++ b/ui/src/components/metric/full/view.js
@@ -9,7 +9,6 @@ const Container = styled.div`
   box-sizing: border-box;
   margin: ${remcalc(24)} 0;
   width: 100%;
-  max-width: ${remcalc(940)};
   box-shadow: ${boxes.bottomShaddow};
   border: ${remcalc(1)} solid ${colors.base.grey};
   background-color: ${colors.base.white};
diff --git a/ui/src/components/table-simple-table/table-body.js b/ui/src/components/table-simple-table/table-body.js
index bc88537c..3fba5593 100644
--- a/ui/src/components/table-simple-table/table-body.js
+++ b/ui/src/components/table-simple-table/table-body.js
@@ -1,4 +1,5 @@
 import { clearfix, Baseline } from '../../shared/composers';
+import { remcalc } from '../../shared/functions';
 import styled from 'styled-components';
 import React from 'react';
 
diff --git a/ui/src/components/table-simple-table/table.js b/ui/src/components/table-simple-table/table.js
index 7d5b90d2..27c46b61 100644
--- a/ui/src/components/table-simple-table/table.js
+++ b/ui/src/components/table-simple-table/table.js
@@ -1,5 +1,6 @@
 import { colors } from '../../shared/constants';
 import { Baseline } from '../../shared/composers';
+import { remcalc } from '../../shared/functions';
 import styled from 'styled-components';
 import React from 'react';
 
diff --git a/ui/src/components/tabs/tab/index.js b/ui/src/components/tabs/tab/index.js
index 8dbe5893..e2fd994d 100644
--- a/ui/src/components/tabs/tab/index.js
+++ b/ui/src/components/tabs/tab/index.js
@@ -36,7 +36,8 @@ const StyledLabel = styled.label`
   font-size: ${remcalc(20)};
   margin: 0 0.5rem 0 0;
   vertical-align: bottom;
-  box-shadow: inset ${remcalc(2)} ${remcalc(-6)} ${remcalc(10)} 0 rgba(0,0,0,0.06);
+  box-shadow: inset ${remcalc(2)} ${remcalc(-6)}
+    ${remcalc(10)} 0 rgba(0,0,0,0.06);
 `;
 
 const StyledPanel = styled.div`