From a4b6f64c3950d35d67dbcfcbb4fb087c46cd2172 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Mon, 6 Feb 2017 15:30:33 +0000
Subject: [PATCH] updating empty service component

---
 frontend/src/components/empty/services.js | 84 ++++++++++++++++-------
 1 file changed, 61 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/empty/services.js b/frontend/src/components/empty/services.js
index f09ee66f..5a982bbf 100644
--- a/frontend/src/components/empty/services.js
+++ b/frontend/src/components/empty/services.js
@@ -1,13 +1,25 @@
 const React = require('react');
 const ReactIntl = require('react-intl');
+const Styled = require('styled-components');
 
 const Button = require('@ui/components/button');
 const Column = require('@ui/components/column');
 const Row = require('@ui/components/row');
 const BaseElements = require('@ui/components/base-elements');
 
+const fns = require('@ui/shared/functions');
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  remcalc,
+} = fns;
+
 const {
   P,
+  H2,
   H3,
 } = BaseElements;
 
@@ -15,34 +27,60 @@ const {
   FormattedMessage
 } = ReactIntl;
 
+const StyledBox = styled.div`
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
+  border: solid 1px #d8d8d8;
+  padding: ${remcalc('6 18 24')};
+  
+  & + & {
+    margin-top: ${remcalc(24)};
+  }
+`;
+
 module.exports = () => (
   <div>
     <Row name='empty-services'>
-      <Column md={6} xs={12}>
-        <H3>
-          <FormattedMessage id='add-services' />
-        </H3>
-        <P>
-          <FormattedMessage id='no-services' />
-        </P>
-      </Column>
-    </Row>
-    <Row>
-      <Column xs={12}>
-        <Button>
-          <FormattedMessage id='edit-project-manifest' />
-        </Button>
-      </Column>
-    </Row>
-    <Row>
-      <Column xs={12}>
-        <P>
-          <FormattedMessage id='or-bring-in-from' />
-        </P>
+      <Column>
+        <H2>
+          <FormattedMessage id='services' />
+        </H2>
 
-        <Button secondary>GitHub</Button>
-        <Button secondary>BitBucket</Button>
+        <Row>
+          <Column>
+            <StyledBox>
+              <Row>
+                <Column md={10}>
+                  <H3>
+                    <FormattedMessage id='import-services-title' />
+                  </H3>
+                  <P>
+                    <FormattedMessage id='import-services-body' />
+                  </P>
 
+                  <Button secondary>from GitHub</Button>
+                  <Button secondary>from GitLab</Button>
+                  <Button secondary>from BitBucket</Button>
+                </Column>
+              </Row>
+            </StyledBox>
+
+            <StyledBox>
+              <Row>
+                <Column md={9}>
+                  <H3>
+                    <FormattedMessage id='alt-import-services-title' />
+                  </H3>
+                  <P>
+                    <FormattedMessage id='alt-import-services-body' />
+                  </P>
+
+                  <Button secondary>Upload manifest</Button>
+                  <Button secondary>Edit manifest</Button>
+                </Column>
+              </Row>
+            </StyledBox>
+          </Column>
+        </Row>
       </Column>
     </Row>
   </div>