Changed the MoneyFormatInput to match the theme

bunqCommunity · Nov 20, 2017 · 225cab2 · 225cab2
1 parent 45dbddb
commit 225cab2
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 31 deletions.
diff --git a/src/react/Components/FormFields/MoneyFormatInput.jsx b/src/react/Components/FormFields/MoneyFormatInput.jsx
@@ -5,21 +5,28 @@ import {
     preferedDecimalSeparator
 } from "../../Helpers/Utils";
 
-const MoneyFormatInput = (props) => {
-    return (
-        <NumberFormat
-            required
-            margin="normal"
-            placeholder="€ 0.00"
-            className="money-input"
-            decimalScale={2}
-            fixedDecimalScale={true}
-            decimalSeparator={preferedDecimalSeparator}
-            thousandSeparator={preferedThousandSeparator}
-            prefix={"€ "}
-            {...props}
-        />
-    );
-};
+import { withTheme } from "material-ui/styles";
 
-export default MoneyFormatInput;
+class MoneyFormatInput extends React.Component {
+    render() {
+        return (
+            <NumberFormat
+                required
+                margin="normal"
+                placeholder="€ 0.00"
+                style={{
+                    fontSize: 30,
+                    ...this.props.theme.styles.moneyInput,
+                }}
+                className="money-input"
+                decimalScale={2}
+                fixedDecimalScale={true}
+                decimalSeparator={preferedDecimalSeparator}
+                thousandSeparator={preferedThousandSeparator}
+                prefix={"€ "}
+            />
+        );
+    }
+}
+
+export default withTheme()(MoneyFormatInput);
diff --git a/src/react/Pages/BunqMeTab/BunqMeTabForm.jsx b/src/react/Pages/BunqMeTab/BunqMeTabForm.jsx
@@ -23,9 +23,6 @@ const styles = {
     paper: {
         padding: 24,
         textAlign: "left"
-    },
-    formattedInput: {
-        fontSize: 30
     }
 };
 
@@ -206,7 +203,6 @@ class BunqMeTab extends React.Component {
                     <MoneyFormatInput
                         id="amount"
                         value={this.state.amount}
-                        style={styles.formattedInput}
                         onValueChange={this.handleChangeFormatted}
                         onKeyPress={ev => {
                             if (ev.key === "Enter" && this.state.validForm) {

diff --git a/src/react/Pages/Pay.jsx b/src/react/Pages/Pay.jsx
@@ -40,9 +40,6 @@ const styles = {
     paper: {
         padding: 24,
         textAlign: "left"
-    },
-    formattedInput: {
-        fontSize: 30
     }
 };
 
@@ -565,8 +562,6 @@ class Pay extends React.Component {
                             <MoneyFormatInput
                                 id="amount"
                                 value={this.state.amount}
-                                style={styles.formattedInput}
-
                                 onValueChange={this.handleChangeFormatted}
                                 onKeyPress={ev => {
                                     if (

diff --git a/src/react/Pages/RequestInquiry/RequestInquiry.jsx b/src/react/Pages/RequestInquiry/RequestInquiry.jsx
@@ -34,9 +34,6 @@ const styles = {
     paper: {
         padding: 24,
         textAlign: "left"
-    },
-    formattedInput: {
-        fontSize: 30
     }
 };
 
@@ -369,7 +366,6 @@ class RequestInquiry extends React.Component {
                             <MoneyFormatInput
                                 id="amount"
                                 value={this.state.amount}
-                                style={styles.formattedInput}
                                 onValueChange={this.handleChangeFormatted}
                                 onKeyPress={ev => {
                                     if (

diff --git a/src/react/Themes/DarkTheme.jsx b/src/react/Themes/DarkTheme.jsx
@@ -26,6 +26,9 @@ export default {
         type: "dark"
     },
     styles: {
+        moneyInput: {
+            color: '#fff'
+        },
         requestResponse: {
             pending: {},
             rejected: {

diff --git a/src/react/Themes/DefaultTheme.jsx b/src/react/Themes/DefaultTheme.jsx
@@ -130,6 +130,9 @@ export default {
         }
     },
     styles: {
+        moneyInput: {
+            color: '#000'
+        },
         requestResponse: {
             pending: {},
             rejected: {

diff --git a/src/scss/partials/base.scss b/src/scss/partials/base.scss
@@ -36,7 +36,6 @@ main {
 .money-input {
     width: 50%;
     background: none;
-    color: white;
     border: none;
     text-align: center;
     margin: 40px auto;