From 93176d811782bee19bb8222067fe346ff0c7e624 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 20 Feb 2019 13:47:17 +0100
Subject: [PATCH] added underline to header part of page when buttonactions set

---
 .../packages/ui-components/src/layout/Page.js | 37 +++++++++++--------
 scm-ui/styles/scm.scss                        |  9 ++++-
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/layout/Page.js b/scm-ui-components/packages/ui-components/src/layout/Page.js
index 718280053b..c796b145bc 100644
--- a/scm-ui-components/packages/ui-components/src/layout/Page.js
+++ b/scm-ui-components/packages/ui-components/src/layout/Page.js
@@ -16,21 +16,11 @@ type Props = {
 
 class Page extends React.Component<Props> {
   render() {
-    const { title, error, subtitle } = this.props;
+    const { error } = this.props;
     return (
       <section className="section">
         <div className="container">
-          <div className="columns">
-            <div className="column">
-              <Title title={title} />
-              <Subtitle subtitle={subtitle} />
-            </div>
-            <div className="column is-two-fifths">
-              <div className="is-pulled-right">
-              {this.renderPageActions()}
-              </div>
-            </div>
-          </div>
+          {this.renderPageHeader()}
           <ErrorNotification error={error} />
           {this.renderContent()}
         </div>
@@ -38,16 +28,33 @@ class Page extends React.Component<Props> {
     );
   }
 
-  renderPageActions() {
-    const { children } = this.props;
+  renderPageHeader() {
+    const { title, subtitle, children } = this.props;
 
     let content = null;
+    let pageActionsExists = false;
     React.Children.forEach(children, child => {
       if (child && child.type.name === "PageActions") {
         content = child;
+        pageActionsExists = true;
       }
     });
-    return content;
+
+    return (
+      <div
+        className={
+          pageActionsExists ? "columns page-header-with-actions" : "columns"
+        }
+      >
+        <div className="column">
+          <Title title={title} />
+          <Subtitle subtitle={subtitle} />
+        </div>
+        <div className="column is-two-fifths">
+          <div className="is-pulled-right">{content}</div>
+        </div>
+      </div>
+    );
   }
 
   renderContent() {
diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index 0e7b0fc420..64c72f7d06 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -3,6 +3,7 @@
 
 $blue: #33b2e8;
 $mint: #11dfd0;
+$primary: #00d1df;
 
 $info: $blue;
 
@@ -40,6 +41,12 @@ $info: $blue;
 .main {
   min-height: calc(100vh - 260px);
 }
+
+// top section when pageactions set
+.page-header-with-actions {
+  border-bottom: 1px solid $primary;
+}
+
 .footer {
   height: 50px;
 }
@@ -81,7 +88,7 @@ $fa-font-path: "webfonts";
   height: 2.5rem;
 
   &.is-primary {
-    background-color: #00d1df;
+    background-color: $primary;
   }
   &.is-primary:hover, &.is-primary.is-hovered {
     background-color: #00b9c6;