From 095ae81f80b49a59abc031c274f0b3e37ffcf3e1 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 20 Feb 2019 14:21:01 +0100
Subject: [PATCH] added small top spacing for page actions

---
 .../packages/ui-components/src/layout/Page.js | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 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 9a912f6780..86620d6ec3 100644
--- a/scm-ui-components/packages/ui-components/src/layout/Page.js
+++ b/scm-ui-components/packages/ui-components/src/layout/Page.js
@@ -4,6 +4,8 @@ import Loading from "./../Loading";
 import ErrorNotification from "./../ErrorNotification";
 import Title from "./Title";
 import Subtitle from "./Subtitle";
+import injectSheet from "react-jss";
+import classNames from "classnames";
 
 type Props = {
   title?: string,
@@ -11,7 +13,16 @@ type Props = {
   loading?: boolean,
   error?: Error,
   showContentOnError?: boolean,
-  children: React.Node
+  children: React.Node,
+
+  // context props
+  classes: Object
+};
+
+const styles = {
+  spacing: {
+    marginTop: "1.25rem"
+  }
 };
 
 class Page extends React.Component<Props> {
@@ -29,7 +40,7 @@ class Page extends React.Component<Props> {
   }
 
   renderPageHeader() {
-    const { title, subtitle, children } = this.props;
+    const { title, subtitle, children, classes } = this.props;
 
     let content = null;
     let pageActionsExists = false;
@@ -39,7 +50,9 @@ class Page extends React.Component<Props> {
         pageActionsExists = true;
       }
     });
-    let underline = pageActionsExists ? <hr className="header-with-actions" /> : null;
+    let underline = pageActionsExists ? (
+      <hr className="header-with-actions" />
+    ) : null;
 
     return (
       <>
@@ -49,7 +62,7 @@ class Page extends React.Component<Props> {
             <Subtitle subtitle={subtitle} />
           </div>
           <div className="column is-two-fifths">
-            <div className="is-pulled-right">{content}</div>
+            <div className={classNames(classes.spacing, "is-pulled-right")}>{content}</div>
           </div>
         </div>
         {underline}
@@ -77,4 +90,4 @@ class Page extends React.Component<Props> {
   }
 }
 
-export default Page;
+export default injectSheet(styles)(Page);