From 66032ac03f40e88a28b77dc421ae25547265a174 Mon Sep 17 00:00:00 2001
From: Bilal <bilal@saburly.com>
Date: Fri, 4 Sep 2020 17:42:01 +0300
Subject: [PATCH] improve money move form

---
 client/src/App.css               |  4 ++++
 client/src/cash/MakeMoneyMove.js | 24 ++++++++++++------------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index cc1ca1d..4a6d56e 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -45,3 +45,7 @@
   margin-right: 100px;
 }
 
+.required:before {
+  color: red;
+  content: "* ";
+}
\ No newline at end of file
diff --git a/client/src/cash/MakeMoneyMove.js b/client/src/cash/MakeMoneyMove.js
index 4220a5d..67a274a 100644
--- a/client/src/cash/MakeMoneyMove.js
+++ b/client/src/cash/MakeMoneyMove.js
@@ -39,7 +39,6 @@ const MakeMoneyMove = (props) => {
     const homieOptions = homiesCash.map(homieToOptionMapper);
 
     const handleFromHomieChange = (e) => {
-        console.log("from homie", e.target.value);
         setSelectedFrom(e.target.value);
     };
     const filteredHomieCashes = homiesCash.filter((homieCash) => homieCash.homie.id !== parseInt(selectedFrom));
@@ -92,23 +91,24 @@ const MakeMoneyMove = (props) => {
     const disableSubmit = () => (!formComplete() || submitInProgress);
 
     return (
-        <div className="center-align">
+        <div className="center-align container">
             <form onSubmit={handleSubmit}>
                 <h3>Make Money Move</h3>
-                <TextInput label="How Much?"
-                           type="number"
-                           required pattern="^\\?(([1-9](\\d*|\\d{0,2}(,\\d{3})*))|0)(\\.\\d{1,2})?$"
-                           value={`${amountToMove}`}
-                           step="0.01"
-                           onChange={handleAmountChange}/>
-                <label>From: </label>
+
+                <div className="input-field col s12">
+                    <input id="how-much" type="number" className="validate" step="0.01" required="required" value={amountToMove} onChange={handleAmountChange} pattern="^\\?(([1-9](\\d*|\\d{0,2}(,\\d{3})*))|0)(\\.\\d{1,2})?$" />
+                    <label className="required" htmlFor="how-much">How much?</label>
+                    <span className="helper-text" data-error="Yo! Put some money" />
+                </div>
+
+                <label>From (only if you can say): </label>
                 <Select value={selectedFrom} name="from_homie" onChange={handleFromHomieChange}>
-                    <option disabled value="">Select Homie</option>
+                    <option value="">NOT SAYIN'</option>
                     {homieOptions}
                 </Select>
 
-                <label>To: </label>
-                <Select value={selectedTo} name="to_homie" onChange={handleToHomieChange}>
+                <label className="required">To: </label>
+                <Select value={selectedTo} name="to_homie" onChange={handleToHomieChange} required="required">
                     <option disabled value="">Select Homie</option>
                     {filteredHomieOptions}
                 </Select>
-- 
2.47.3