Move the new dashboard button into the tab bar

greenbone · May 25, 2018 · cd4e088 · cd4e088
1 parent 9f6fa9d
commit cd4e088
Showing 1 changed file with 24 additions and 8 deletions.
diff --git a/ng/src/web/pages/start/page.js b/ng/src/web/pages/start/page.js
@@ -24,6 +24,8 @@ import React from 'react';
 
 import uuid from 'uuid/v4';
 
+import glamorous from 'glamorous';
+
 import {connect} from 'react-redux';
 
 import _ from 'gmp/locale';
@@ -47,6 +49,7 @@ import CloseButton from 'web/components/dialog/closebutton';
 import NewIcon from 'web/components/icon/newicon';
 
 import Divider from 'web/components/layout/divider';
+import Layout from 'web/components/layout/layout';
 
 import Section from 'web/components/section/section';
 
@@ -77,6 +80,10 @@ const DEFAULTS = {
 const DEFAULT_TAB = 0;
 const MAX_DASHBOARDS = 10;
 
+const StyledNewIcon = glamorous(NewIcon)({
+  margin: '0 10px',
+});
+
 class StartPage extends React.Component {
 
   constructor(...args) {
@@ -311,14 +318,6 @@ class StartPage extends React.Component {
     const canAdd = dashboards.length < MAX_DASHBOARDS;
     return (
       <React.Fragment>
-        <NewIcon
-          title={canAdd ?
-            _('Add new Dashboard') :
-            _('Dashboards limit reached')
-          }
-          active={canAdd}
-          onClick={canAdd ? this.handleOpenNewDashboardDialog : undefined}
-        />
         <Section
           title={_('Dashboards')}
           img="dashboard.svg"
@@ -353,6 +352,23 @@ class StartPage extends React.Component {
                   </Tab>
                 );
               })}
+
+              <Layout
+                align={['center', 'center']}
+                grow
+              >
+                <StyledNewIcon
+                  title={canAdd ?
+                    _('Add new Dashboard') :
+                    _('Dashboards limit reached')
+                  }
+                  active={canAdd}
+                  onClick={canAdd ?
+                    this.handleOpenNewDashboardDialog :
+                    undefined
+                  }
+                />
+              </Layout>
             </TabList>
           </TabLayout>