Styling adjustments

normal-user-2 · Sep 12, 2021 · 47e5911 · 47e5911
1 parent e161d36
commit 47e5911
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ npm start
 ### To-Do
 - [x] Finish parsing data into Preview Modal
 
-- [ ] Currency Picker/Exchange Rates
+- [x] Currency Picker/Exchange Rates
 
 - [ ] Calculate Tax based on currency
 

diff --git a/src/components/EditableField.js b/src/components/EditableField.js
@@ -6,15 +6,18 @@ import InputGroup from 'react-bootstrap/InputGroup';
 class EditableField extends React.Component {
   render() {
     return (
-      <InputGroup className="my-1">
+      <InputGroup className="my-1 flex-nowrap">
         {this.props.cellData.leading != null &&
           <InputGroup.Text
-            className="bg-light fw-bold border-0 text-secondary ps-3 pe-0"
+            className="bg-light fw-bold border-0 text-secondary px-2"
             id="basic-addon1">
-            {this.props.cellData.leading}
+            <span className="border border-2 border-secondary rounded-circle d-flex align-items-center justify-content-center small" style={{width: '20px', height: '20px'}}>
+              {this.props.cellData.leading}
+            </span>
           </InputGroup.Text>
         }
-        <Form.Control className={this.props.cellData.textAlign}
+        <Form.Control
+          className={this.props.cellData.textAlign}
           type={this.props.cellData.type}
           placeholder={this.props.cellData.placeholder}
           min={this.props.cellData.min}

diff --git a/src/components/InvoiceForm.js b/src/components/InvoiceForm.js
@@ -136,16 +136,16 @@ class InvoiceForm extends React.Component {
                 <Col lg={6} >
                   <div className="d-flex flex-row align-items-start justify-content-between">
                     <span className="fw-bold">Subtotal: </span>
-                    <span>{this.state.currency}0.00</span>
+                    <span>{this.state.currency} 0.00</span>
                   </div>
                   <div className="d-flex flex-row align-items-start justify-content-between mt-2">
                     <span className="fw-bold">Discount: </span>
-                    <span>{this.state.currency}0.00</span>
+                    <span>{this.state.currency} 0.00</span>
                   </div>
                   <hr/>
                   <div className="d-flex flex-row align-items-start justify-content-between" style={{fontSize: '1.125rem'}}>
                     <span className="fw-bold">Total: </span>
-                    <span className="fw-bold">{this.state.currency}0.00</span>
+                    <span className="fw-bold">{this.state.currency} 0.00</span>
                   </div>
                 </Col>
               </Row>
@@ -163,9 +163,9 @@ class InvoiceForm extends React.Component {
                   <option value="$">USD (United States Dollar)</option>
                   <option value="£">GBP (British Pound Sterling)</option>
                   <option value="¥">JPY (Japanese Yen)</option>
-                  <option value="CAD$">CAD (Canadian Dollar)</option>
-                  <option value="AUD$">AUD (Australian Dollar)</option>
-                  <option value="SGD$">SGD (Signapore Dollar)</option>
+                  <option value="$">CAD (Canadian Dollar)</option>
+                  <option value="$">AUD (Australian Dollar)</option>
+                  <option value="$">SGD (Signapore Dollar)</option>
                   <option value="¥">CNY (Chinese Renminbi)</option>
                   <option value="₿">BTC (Bitcoin)</option>
                 </Form.Select>

diff --git a/src/components/InvoiceItem.js b/src/components/InvoiceItem.js
@@ -21,7 +21,7 @@ class ItemizedTable extends React.Component {
             <tr>
               <th>ITEM</th>
               <th>QTY</th>
-              <th>PRICE</th>
+              <th>PRICE/RATE</th>
               <th className="text-center">ACTION</th>
             </tr>
           </thead>

diff --git a/src/components/InvoiceModal.js b/src/components/InvoiceModal.js
@@ -52,7 +52,7 @@ class InvoiceModal extends React.Component {
               </div>
               <div className="text-end ms-4">
                 <h6 className="fw-bold mt-1 mb-2">Amount&nbsp;Due:</h6>
-                <h5 className="fw-bold text-secondary"> {this.props.currency}{this.props.info.total||'0.00'}</h5>
+                <h5 className="fw-bold text-secondary"> {this.props.currency} {this.props.info.total||'0.00'}</h5>
               </div>
             </div>
             <div className="p-4">
@@ -89,8 +89,8 @@ class InvoiceModal extends React.Component {
                         <td>
                           {item.name} - {item.description}
                         </td>
-                        <td style={{width: '100px'}}>{this.props.currency}{item.price}</td>
-                        <td style={{width: '100px'}}>{this.props.currency}{item.price * item.quantity}</td>
+                        <td style={{width: '100px'}}>{this.props.currency} {item.price}</td>
+                        <td style={{width: '100px'}}>{this.props.currency} {item.price * item.quantity}</td>
                       </tr>
                     );
                   })}
@@ -106,12 +106,12 @@ class InvoiceModal extends React.Component {
                   <tr className="text-right">
                     <td></td>
                     <td className="fw-bold" style={{width: '100px'}}>TAX</td>
-                    <td className="text-right" style={{width: '100px'}}>{this.props.currency}0.00</td>
+                    <td className="text-right" style={{width: '100px'}}>{this.props.currency} 0.00</td>
                   </tr>
                     <tr>
                       <td></td>
                       <td className="fw-bold" style={{width: '100px'}}>TOTAL</td>
-                      <td align="right" style={{width: '100px'}}>{this.props.currency}0.00</td>
+                      <td align="right" style={{width: '100px'}}>{this.props.currency} 0.00</td>
                     </tr>
                 </tbody>
               </Table>