From e2d089e9867d243e58bff7ddf65c6a77409a667a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Thu, 31 Jan 2019 10:50:15 +0100
Subject: [PATCH 01/13] change classes to bulma classes

---
 .../ui-components/src/modals/ConfirmAlert.js   | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
index 1f93024865..37cd849047 100644
--- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
+++ b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
@@ -32,11 +32,15 @@ class ConfirmAlert extends React.Component<Props> {
     const { title, message, buttons } = this.props;
 
     return (
-      <div className="react-confirm-alert-overlay">
-        <div className="react-confirm-alert">
-          {
-            <div className="react-confirm-alert-body">
-              {title && <h1>{title}</h1>}
+      <div className="modal is-active">
+        <div className="modal-card">
+
+            <header className="modal-card-head">
+              <p className="modal-card-title">
+                {title}
+              </p>
+            </header>
+            <section className="modal-card-body">
               {message}
               <div className="react-confirm-alert-button-group">
                 {buttons.map((button, i) => (
@@ -49,8 +53,8 @@ class ConfirmAlert extends React.Component<Props> {
                   </button>
                 ))}
               </div>
-            </div>
-          }
+            </section>
+
         </div>
       </div>
     );

From 7a6d5e4cc4034453a73d9b4b21c2b0e14f5d8fe7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Thu, 31 Jan 2019 11:01:37 +0100
Subject: [PATCH 02/13] set background

---
 .../packages/ui-components/src/modals/ConfirmAlert.js            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
index 37cd849047..e7501a39a6 100644
--- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
+++ b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
@@ -33,6 +33,7 @@ class ConfirmAlert extends React.Component<Props> {
 
     return (
       <div className="modal is-active">
+        <div className="modal-background" />
         <div className="modal-card">
 
             <header className="modal-card-head">

From 1f6801978071744e95f136531dc05a43abdf52c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Thu, 31 Jan 2019 11:07:54 +0100
Subject: [PATCH 03/13] add close button

---
 .../packages/ui-components/src/modals/ConfirmAlert.js        | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
index e7501a39a6..ad296cee6b 100644
--- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
+++ b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
@@ -40,6 +40,11 @@ class ConfirmAlert extends React.Component<Props> {
               <p className="modal-card-title">
                 {title}
               </p>
+              <button
+                className="delete"
+                aria-label="close"
+                onClick={() => this.close()}
+              />
             </header>
             <section className="modal-card-body">
               {message}

From 9e9b3b14d7a6a3291bc65ef4c721e26da41cff66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Fri, 1 Feb 2019 08:47:38 +0100
Subject: [PATCH 04/13] add extra root for modals and use it

---
 .../ui-components/src/modals/ConfirmAlert.js  | 30 ++++---------------
 scm-ui/public/index.mustache                  |  2 ++
 2 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
index ad296cee6b..416853cffa 100644
--- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
+++ b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
@@ -1,8 +1,6 @@
 // @flow
-//modified from https://github.com/GA-MO/react-confirm-alert
-
 import * as React from "react";
-import { render, unmountComponentAtNode } from "react-dom";
+import ReactDOM from "react-dom";
 import "./ConfirmAlert.css";
 
 type Button = {
@@ -25,7 +23,7 @@ class ConfirmAlert extends React.Component<Props> {
   };
 
   close = () => {
-    removeElementReconfirm();
+    ReactDOM.unmountComponentAtNode(document.getElementById("modalRoot"));
   };
 
   render() {
@@ -67,27 +65,11 @@ class ConfirmAlert extends React.Component<Props> {
   }
 }
 
-function createElementReconfirm(properties: Props) {
-  const divTarget = document.createElement("div");
-  divTarget.id = "react-confirm-alert";
-  if (document.body) {
-    document.body.appendChild(divTarget);
-    render(<ConfirmAlert {...properties} />, divTarget);
-  }
-}
-
-function removeElementReconfirm() {
-  const target = document.getElementById("react-confirm-alert");
-  if (target) {
-    unmountComponentAtNode(target);
-    if (target.parentNode) {
-      target.parentNode.removeChild(target);
-    }
-  }
-}
-
 export function confirmAlert(properties: Props) {
-  createElementReconfirm(properties);
+  const root = document.getElementById("modalRoot");
+  if(root){
+    ReactDOM.render(<ConfirmAlert {...properties}/>, root);
+  }
 }
 
 export default ConfirmAlert;
diff --git a/scm-ui/public/index.mustache b/scm-ui/public/index.mustache
index 590b5e3cdb..75efc78088 100644
--- a/scm-ui/public/index.mustache
+++ b/scm-ui/public/index.mustache
@@ -21,6 +21,8 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+    <div id="modalRoot"></div>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

From 7bd69f754bb1778e17810f0707650f0ed4b01008 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Fri, 1 Feb 2019 09:43:14 +0100
Subject: [PATCH 05/13] use bulma classes

---
 .../ui-components/src/modals/ConfirmAlert.css | 102 ------------------
 .../ui-components/src/modals/ConfirmAlert.js  |  14 ++-
 2 files changed, 6 insertions(+), 110 deletions(-)
 delete mode 100644 scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.css

diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.css b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.css
deleted file mode 100644
index 96246a44a5..0000000000
--- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.css
+++ /dev/null
@@ -1,102 +0,0 @@
-/*modified from https://github.com/GA-MO/react-confirm-alert*/
-.react-confirm-alert-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 99;
-  background: rgba(255, 255, 255, 0.9);
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flex;
-  display: -o-flex;
-  display: flex;
-  justify-content: center;
-  -ms-align-items: center;
-  align-items: center;
-  opacity: 0;
-  -webkit-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-  -moz-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-  -o-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-  animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
-}
-
-.react-confirm-alert-body {
-  font-family: Arial, Helvetica, sans-serif;
-  width: 400px;
-  padding: 30px;
-  text-align: left;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
-  color: #666;
-}
-
-.react-confirm-alert-body > h1 {
-  margin-top: 0;
-}
-
-.react-confirm-alert-body > h3 {
-  margin: 0;
-  font-size: 16px;
-}
-
-.react-confirm-alert-button-group {
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flex;
-  display: -o-flex;
-  display: flex;
-  justify-content: flex-start;
-  margin-top: 20px;
-}
-
-.react-confirm-alert-button-group > button {
-  outline: none;
-  background: #333;
-  border: none;
-  display: inline-block;
-  padding: 6px 18px;
-  color: #eee;
-  margin-right: 10px;
-  border-radius: 5px;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-@-webkit-keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@-moz-keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@-o-keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes react-confirm-alert-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
index 416853cffa..16d3d501b6 100644
--- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
+++ b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
@@ -1,9 +1,8 @@
 // @flow
 import * as React from "react";
 import ReactDOM from "react-dom";
-import "./ConfirmAlert.css";
 
-type Button = {
+type ButtonType = {
   label: string,
   onClick: () => void | null
 };
@@ -11,11 +10,11 @@ type Button = {
 type Props = {
   title: string,
   message: string,
-  buttons: Button[]
+  buttons: ButtonType[]
 };
 
 class ConfirmAlert extends React.Component<Props> {
-  handleClickButton = (button: Button) => {
+  handleClickButton = (button: ButtonType) => {
     if (button.onClick) {
       button.onClick();
     }
@@ -46,15 +45,14 @@ class ConfirmAlert extends React.Component<Props> {
             </header>
             <section className="modal-card-body">
               {message}
-              <div className="react-confirm-alert-button-group">
+              <div className="buttons">
                 {buttons.map((button, i) => (
-                  <button
+                  <a className="button"
                     key={i}
                     onClick={() => this.handleClickButton(button)}
-                    href="javascript:void(0);"
                   >
                     {button.label}
-                  </button>
+                  </a>
                 ))}
               </div>
             </section>

From 87ffe37cd6e0fef732ca57b4be7f324e2b468e88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Fri, 1 Feb 2019 09:47:03 +0100
Subject: [PATCH 06/13] improve styling

---
 .../packages/ui-components/src/modals/ConfirmAlert.js         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
index 16d3d501b6..fd95417d32 100644
--- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
+++ b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
@@ -45,9 +45,9 @@ class ConfirmAlert extends React.Component<Props> {
             </header>
             <section className="modal-card-body">
               {message}
-              <div className="buttons">
+              <div className="buttons is-right">
                 {buttons.map((button, i) => (
-                  <a className="button"
+                  <a className="button is-info is-right"
                     key={i}
                     onClick={() => this.handleClickButton(button)}
                   >

From 782cdb996fde06ca97f4c2de0af743c3dff30e39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Fri, 1 Feb 2019 10:02:19 +0100
Subject: [PATCH 07/13] create modal component

---
 .../ui-components/src/modals/ConfirmAlert.js  | 56 +++++++++----------
 .../ui-components/src/modals/Modal.js         | 44 +++++++++++++++
 .../ui-components/src/modals/index.js         |  1 +
 3 files changed, 71 insertions(+), 30 deletions(-)
 create mode 100644 scm-ui-components/packages/ui-components/src/modals/Modal.js

diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
index fd95417d32..e9ecffefd9 100644
--- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
+++ b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import ReactDOM from "react-dom";
+import Modal from "./Modal";
 
 type ButtonType = {
   label: string,
@@ -28,37 +29,32 @@ class ConfirmAlert extends React.Component<Props> {
   render() {
     const { title, message, buttons } = this.props;
 
-    return (
-      <div className="modal is-active">
-        <div className="modal-background" />
-        <div className="modal-card">
-
-            <header className="modal-card-head">
-              <p className="modal-card-title">
-                {title}
-              </p>
-              <button
-                className="delete"
-                aria-label="close"
-                onClick={() => this.close()}
-              />
-            </header>
-            <section className="modal-card-body">
-              {message}
-              <div className="buttons is-right">
-                {buttons.map((button, i) => (
-                  <a className="button is-info is-right"
-                    key={i}
-                    onClick={() => this.handleClickButton(button)}
-                  >
-                    {button.label}
-                  </a>
-                ))}
-              </div>
-            </section>
-
+    const closeButton = (
+      <button
+      className="delete"
+      aria-label="close"
+      onClick={() => this.close()}
+      />
+    );
+    const body= (
+      <>
+        {message}
+        <div className="buttons is-right">
+          {buttons.map((button, i) => (
+            <a className="button is-info is-right"
+               key={i}
+               onClick={() => this.handleClickButton(button)}
+            >
+              {button.label}
+            </a>
+          ))}
         </div>
-      </div>
+        </>
+    );
+
+
+    return (
+      <Modal title={title} closeButton={closeButton} body={body} active={true}/>
     );
   }
 }
diff --git a/scm-ui-components/packages/ui-components/src/modals/Modal.js b/scm-ui-components/packages/ui-components/src/modals/Modal.js
new file mode 100644
index 0000000000..2638eb13fa
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/modals/Modal.js
@@ -0,0 +1,44 @@
+// @flow
+import * as React from "react";
+import classNames from "classnames";
+
+type Props = {
+  title: string,
+  closeButton: any,
+  body: any,
+  active: boolean
+};
+
+class Modal extends React.Component<Props> {
+
+  render() {
+    const { title, closeButton, body, active } = this.props;
+
+    const isActive = active ? "is-active" : null;
+
+    return (
+      <div className={classNames(
+        "modal",
+        isActive
+      )}>
+        <div className="modal-background" />
+        <div className="modal-card">
+
+          <header className="modal-card-head">
+            <p className="modal-card-title">
+              {title}
+            </p>
+            {closeButton}
+          </header>
+          <section className="modal-card-body">
+            {body}
+          </section>
+
+        </div>
+      </div>
+    );
+  }
+}
+
+
+export default Modal;
diff --git a/scm-ui-components/packages/ui-components/src/modals/index.js b/scm-ui-components/packages/ui-components/src/modals/index.js
index e75d082c1c..13b205dd1c 100644
--- a/scm-ui-components/packages/ui-components/src/modals/index.js
+++ b/scm-ui-components/packages/ui-components/src/modals/index.js
@@ -1,4 +1,5 @@
 // @create-index
 
 export { default as ConfirmAlert, confirmAlert } from "./ConfirmAlert.js";
+export { default as Modal } from "./Modal.js";
 

From a2cb0b15b7804aead6dba5ef61e19725c5b7370a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Fri, 1 Feb 2019 10:07:00 +0100
Subject: [PATCH 08/13] use modal component for advanced permissions dialog

---
 .../containers/AdvancedPermissionsDialog.js   | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js b/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
index 0d844fdf3f..5d53605484 100644
--- a/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
+++ b/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React from "react";
-import { Button, SubmitButton } from "@scm-manager/ui-components";
+import { Button, SubmitButton, Modal } from "@scm-manager/ui-components";
 import { translate } from "react-i18next";
 import PermissionCheckbox from "../components/PermissionCheckbox";
 
@@ -38,6 +38,7 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
 
     const verbSelectBoxes = Object.entries(verbs).map(e => (
       <PermissionCheckbox
+        key={e[0]}
         disabled={readOnly}
         name={e[0]}
         checked={e[1]}
@@ -49,32 +50,30 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
       <SubmitButton label={t("permission.advanced.dialog.submit")} />
     ) : null;
 
+    const closeButton = (
+      <button className="delete" aria-label="close" onClick={() => onClose()} />
+    );
+
+    const body = (
+      <>
+        <div className="content">{verbSelectBoxes}</div>
+        <form onSubmit={this.onSubmit}>
+          {submitButton}
+          <Button
+            label={t("permission.advanced.dialog.abort")}
+            action={onClose}
+          />
+        </form>
+      </>
+    );
+
     return (
-      <div className={"modal is-active"}>
-        <div className="modal-background" />
-        <div className="modal-card">
-          <header className="modal-card-head">
-            <p className="modal-card-title">
-              {t("permission.advanced.dialog.title")}
-            </p>
-            <button
-              className="delete"
-              aria-label="close"
-              onClick={() => onClose()}
-            />
-          </header>
-          <section className="modal-card-body">
-            <div className="content">{verbSelectBoxes}</div>
-            <form onSubmit={this.onSubmit}>
-              {submitButton}
-              <Button
-                label={t("permission.advanced.dialog.abort")}
-                action={onClose}
-              />
-            </form>
-          </section>
-        </div>
-      </div>
+      <Modal
+        title={t("permission.advanced.dialog.title")}
+        closeButton={closeButton}
+        body={body}
+        active={true}
+      />
     );
   }
 

From 73260f0072258cb00bb91dc3aa149c7b13fc85d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Fri, 1 Feb 2019 10:39:41 +0100
Subject: [PATCH 09/13] resize modal to length of content

---
 .../ui-components/src/modals/Modal.js         | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/modals/Modal.js b/scm-ui-components/packages/ui-components/src/modals/Modal.js
index 2638eb13fa..cf1b011102 100644
--- a/scm-ui-components/packages/ui-components/src/modals/Modal.js
+++ b/scm-ui-components/packages/ui-components/src/modals/Modal.js
@@ -1,18 +1,30 @@
 // @flow
 import * as React from "react";
 import classNames from "classnames";
+import injectSheet from "react-jss";
 
 type Props = {
   title: string,
   closeButton: any,
   body: any,
-  active: boolean
+  active: boolean,
+  classes: any
 };
 
+const styles = {
+  resize: {
+    maxWidth: "100%",
+    width: "auto !important",
+    display: "inline-block"
+  }
+};
+
+
+
 class Modal extends React.Component<Props> {
 
   render() {
-    const { title, closeButton, body, active } = this.props;
+    const { title, closeButton, body, active, classes } = this.props;
 
     const isActive = active ? "is-active" : null;
 
@@ -22,7 +34,7 @@ class Modal extends React.Component<Props> {
         isActive
       )}>
         <div className="modal-background" />
-        <div className="modal-card">
+        <div className={classNames("modal-card", classes.resize)}>
 
           <header className="modal-card-head">
             <p className="modal-card-title">
@@ -41,4 +53,4 @@ class Modal extends React.Component<Props> {
 }
 
 
-export default Modal;
+export default injectSheet(styles)(Modal);

From ba971beea3cbb79bd654236a2607e6de2084512c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Fri, 1 Feb 2019 10:43:11 +0100
Subject: [PATCH 10/13] do not forward close button but close function as
 button is always the same

---
 .../packages/ui-components/src/modals/ConfirmAlert.js  |  9 +--------
 .../packages/ui-components/src/modals/Modal.js         | 10 +++++++---
 .../containers/AdvancedPermissionsDialog.js            |  5 +----
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
index e9ecffefd9..13d5bae5f8 100644
--- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
+++ b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
@@ -29,13 +29,6 @@ class ConfirmAlert extends React.Component<Props> {
   render() {
     const { title, message, buttons } = this.props;
 
-    const closeButton = (
-      <button
-      className="delete"
-      aria-label="close"
-      onClick={() => this.close()}
-      />
-    );
     const body= (
       <>
         {message}
@@ -54,7 +47,7 @@ class ConfirmAlert extends React.Component<Props> {
 
 
     return (
-      <Modal title={title} closeButton={closeButton} body={body} active={true}/>
+      <Modal title={title} closeFunction={() => this.close()} body={body} active={true}/>
     );
   }
 }
diff --git a/scm-ui-components/packages/ui-components/src/modals/Modal.js b/scm-ui-components/packages/ui-components/src/modals/Modal.js
index cf1b011102..febcbcd79d 100644
--- a/scm-ui-components/packages/ui-components/src/modals/Modal.js
+++ b/scm-ui-components/packages/ui-components/src/modals/Modal.js
@@ -5,7 +5,7 @@ import injectSheet from "react-jss";
 
 type Props = {
   title: string,
-  closeButton: any,
+  closeFunction: () => void,
   body: any,
   active: boolean,
   classes: any
@@ -24,7 +24,7 @@ const styles = {
 class Modal extends React.Component<Props> {
 
   render() {
-    const { title, closeButton, body, active, classes } = this.props;
+    const { title, closeFunction, body, active, classes } = this.props;
 
     const isActive = active ? "is-active" : null;
 
@@ -40,7 +40,11 @@ class Modal extends React.Component<Props> {
             <p className="modal-card-title">
               {title}
             </p>
-            {closeButton}
+            <button
+              className="delete"
+              aria-label="close"
+              onClick={closeFunction}
+            />
           </header>
           <section className="modal-card-body">
             {body}
diff --git a/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js b/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
index 5d53605484..643e2150e5 100644
--- a/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
+++ b/scm-ui/src/repos/permissions/containers/AdvancedPermissionsDialog.js
@@ -50,9 +50,6 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
       <SubmitButton label={t("permission.advanced.dialog.submit")} />
     ) : null;
 
-    const closeButton = (
-      <button className="delete" aria-label="close" onClick={() => onClose()} />
-    );
 
     const body = (
       <>
@@ -70,7 +67,7 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
     return (
       <Modal
         title={t("permission.advanced.dialog.title")}
-        closeButton={closeButton}
+        closeFunction={() => onClose()}
         body={body}
         active={true}
       />

From b3a3162d34f25362f49ecb2398c8bba83e8f4d00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Fri, 1 Feb 2019 11:09:07 +0100
Subject: [PATCH 11/13] renaming

---
 .../packages/ui-components/src/modals/ConfirmAlert.js       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
index 13d5bae5f8..4192411eb7 100644
--- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
+++ b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
@@ -3,7 +3,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import Modal from "./Modal";
 
-type ButtonType = {
+type Button = {
   label: string,
   onClick: () => void | null
 };
@@ -11,11 +11,11 @@ type ButtonType = {
 type Props = {
   title: string,
   message: string,
-  buttons: ButtonType[]
+  buttons: Button[]
 };
 
 class ConfirmAlert extends React.Component<Props> {
-  handleClickButton = (button: ButtonType) => {
+  handleClickButton = (button: Button) => {
     if (button.onClick) {
       button.onClick();
     }

From 9fae4c7d46b03c1d62551c62c5278fb6c0ef25b1 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Thu, 7 Feb 2019 13:53:15 +0100
Subject: [PATCH 12/13] added modal footer

---
 .../ui-components/src/modals/ConfirmAlert.js  | 37 +++++++++++--------
 .../ui-components/src/modals/Modal.js         | 28 ++++++--------
 scm-ui/styles/scm.scss                        |  7 ++++
 3 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
index 4192411eb7..6fe08c8ce8 100644
--- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
+++ b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
@@ -29,33 +29,40 @@ class ConfirmAlert extends React.Component<Props> {
   render() {
     const { title, message, buttons } = this.props;
 
-    const body= (
-      <>
-        {message}
-        <div className="buttons is-right">
-          {buttons.map((button, i) => (
-            <a className="button is-info is-right"
-               key={i}
-               onClick={() => this.handleClickButton(button)}
+    const body = <>{message}</>;
+
+    const footer = (
+      <div className="field is-grouped">
+        {buttons.map((button, i) => (
+          <p className="control">
+            <a
+              className="button is-info"
+              key={i}
+              onClick={() => this.handleClickButton(button)}
             >
               {button.label}
             </a>
-          ))}
-        </div>
-        </>
+          </p>
+        ))}
+      </div>
     );
 
-
     return (
-      <Modal title={title} closeFunction={() => this.close()} body={body} active={true}/>
+      <Modal
+        title={title}
+        closeFunction={() => this.close()}
+        body={body}
+        active={true}
+        footer={footer}
+      />
     );
   }
 }
 
 export function confirmAlert(properties: Props) {
   const root = document.getElementById("modalRoot");
-  if(root){
-    ReactDOM.render(<ConfirmAlert {...properties}/>, root);
+  if (root) {
+    ReactDOM.render(<ConfirmAlert {...properties} />, root);
   }
 }
 
diff --git a/scm-ui-components/packages/ui-components/src/modals/Modal.js b/scm-ui-components/packages/ui-components/src/modals/Modal.js
index febcbcd79d..58da89381d 100644
--- a/scm-ui-components/packages/ui-components/src/modals/Modal.js
+++ b/scm-ui-components/packages/ui-components/src/modals/Modal.js
@@ -7,6 +7,7 @@ type Props = {
   title: string,
   closeFunction: () => void,
   body: any,
+  footer?: any,
   active: boolean,
   classes: any
 };
@@ -19,42 +20,35 @@ const styles = {
   }
 };
 
-
-
 class Modal extends React.Component<Props> {
-
   render() {
-    const { title, closeFunction, body, active, classes } = this.props;
+    const { title, closeFunction, body, footer, active, classes } = this.props;
 
     const isActive = active ? "is-active" : null;
 
+    let showFooter = null;
+    if (footer) {
+      showFooter = <footer className="modal-card-foot">{footer}</footer>;
+    }
+
     return (
-      <div className={classNames(
-        "modal",
-        isActive
-      )}>
+      <div className={classNames("modal", isActive)}>
         <div className="modal-background" />
         <div className={classNames("modal-card", classes.resize)}>
-
           <header className="modal-card-head">
-            <p className="modal-card-title">
-              {title}
-            </p>
+            <p className="modal-card-title">{title}</p>
             <button
               className="delete"
               aria-label="close"
               onClick={closeFunction}
             />
           </header>
-          <section className="modal-card-body">
-            {body}
-          </section>
-
+          <section className="modal-card-body">{body}</section>
+          {showFooter}
         </div>
       </div>
     );
   }
 }
 
-
 export default injectSheet(styles)(Modal);
diff --git a/scm-ui/styles/scm.scss b/scm-ui/styles/scm.scss
index be708d1bea..ce9e164482 100644
--- a/scm-ui/styles/scm.scss
+++ b/scm-ui/styles/scm.scss
@@ -314,3 +314,10 @@ $fa-font-path: "webfonts";
     border-bottom: 1px solid #eee;
   }
 }
+
+// modal
+.modal {
+  .modal-card-foot {
+    justify-content: flex-end; // pulled-right
+  }
+}

From 5a8e3fcc53e6c041973cecf9b4742d16273d4cbf Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Thu, 7 Feb 2019 16:17:14 +0000
Subject: [PATCH 13/13] Close branch
 feature/using_same_modal_classes_for_modals