From 7c0a23251eb29acbcdb0945f5c6e2bf1686224a6 Mon Sep 17 00:00:00 2001
From: Bilal <bilal@saburly.com>
Date: Thu, 8 Oct 2020 23:17:49 +0300
Subject: [PATCH] improve modal dialogs

---
 client/src/common/InputModal.js | 15 ++++-----------
 client/src/common/Modal.css     |  3 +++
 client/src/common/YesNoModal.js | 15 ++++-----------
 3 files changed, 11 insertions(+), 22 deletions(-)
 create mode 100644 client/src/common/Modal.css

diff --git a/client/src/common/InputModal.js b/client/src/common/InputModal.js
index dae5eaf..2a54b37 100644
--- a/client/src/common/InputModal.js
+++ b/client/src/common/InputModal.js
@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
-import {Modal, Button, Row, Col} from 'react-materialize';
+import {Modal, Button} from 'react-materialize';
+import "./Modal.css";
 
 const InputModal = (props) => {
   const { title, body, confirmAction, stopAction, triggerNode, defaultInputValue, inputLabel } = props;
@@ -8,17 +9,9 @@ const InputModal = (props) => {
   return(
     <Modal
       actions={[
-        <Row>
-          <Col s={3}>
-            <Button modal="confirm" node="button" waves="green" onClick={() => confirmAction(inputField.current.value)}>Do it</Button>
-          </Col>
-          <Col s={3}>
-            <Button modal="close" node="button" waves="red" onClick={stopAction}>Stop</Button>
-          </Col>
-        </Row>
+        <Button modal="confirm" node="button" className="orange" onClick={() => confirmAction(inputField.current.value)}>Do it</Button>,
+        <Button modal="close" node="button" className="bump" onClick={stopAction}>Nope</Button>
       ]}
-      bottomSheet
-      fixedFooter={false}
       header={title}
       id="Modal-1"
       open={false}
diff --git a/client/src/common/Modal.css b/client/src/common/Modal.css
new file mode 100644
index 0000000..fa60c74
--- /dev/null
+++ b/client/src/common/Modal.css
@@ -0,0 +1,3 @@
+.bump {
+    margin-left: 1em !important;
+}
\ No newline at end of file
diff --git a/client/src/common/YesNoModal.js b/client/src/common/YesNoModal.js
index 688b9e9..a2863c6 100644
--- a/client/src/common/YesNoModal.js
+++ b/client/src/common/YesNoModal.js
@@ -1,22 +1,15 @@
 import React from 'react';
-import { Modal, Button, Row, Col } from 'react-materialize';
+import { Modal, Button } from 'react-materialize';
+import "./Modal.css";
 
 const YesNoModal = (props) => {
   const { title, body, yesAction, noAction, triggerNode } = props;
   return(
     <Modal
       actions={[
-        <Row>
-          <Col s={3}>
-            <Button modal="confirm" node="button" waves="green" onClick={yesAction}>Yes</Button>
-          </Col>
-          <Col s={3}>
-            <Button modal="close" node="button" waves="red" onClick={noAction}>No</Button>
-          </Col>
-        </Row>
+        <Button modal="confirm" node="button" className="orange" onClick={yesAction}>Do it</Button>,
+        <Button modal="close" node="button" className="bump" onClick={noAction}>Nope</Button>
       ]}
-      bottomSheet
-      fixedFooter={false}
       header={title}
       id="Modal-0"
       open={false}