Replaced the old fields with the new ones

7 files changed, 43 insertions, 17 deletions

diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js
index b32aee8..f2f02fd 100644
--- a/frontend/src/components/fields/ButtonField.js
+++ b/frontend/src/components/fields/ButtonField.js
@@ -31,6 +31,15 @@ class ButtonField extends Component {
         if (this.props.border) {
             buttonStyle["borderColor"] = this.props.border;
         }
+        if (this.props.fullSpan) {
+            buttonStyle["width"] = "100%";
+        }
+        if (this.props.rounded) {
+            buttonStyle["borderRadius"] = "3px";
+        }
+        if (this.props.inline) {
+            buttonStyle["marginTop"] = "8px";
+        }
 
         return (
             <div className={classNames( "field", "button-field", {"field-small": this.props.small})}>
diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss
index 933279e..aabe80f 100644
--- a/frontend/src/components/fields/ButtonField.scss
+++ b/frontend/src/components/fields/ButtonField.scss
@@ -9,6 +9,10 @@
 
   &.field-small {
     font-size: 0.8em;
+
+    button {
+      padding: 4px 12px;
+    }
   }
 
   .button-variant-red {
diff --git a/frontend/src/components/fields/CheckField.scss b/frontend/src/components/fields/CheckField.scss
index 7b0ac5f..ab932b4 100644
--- a/frontend/src/components/fields/CheckField.scss
+++ b/frontend/src/components/fields/CheckField.scss
@@ -31,5 +31,9 @@
 
   &.field-small {
     font-size: 0.8em;
+
+    .field-input label {
+      padding: 7px 15px;
+    }
   }
 }
diff --git a/frontend/src/components/fields/ChoiceField.js b/frontend/src/components/fields/ChoiceField.js
index d409b21..73e950d 100644
--- a/frontend/src/components/fields/ChoiceField.js
+++ b/frontend/src/components/fields/ChoiceField.js
@@ -38,15 +38,24 @@ class ChoiceField extends Component {
             <span className="field-option" key={key} onClick={() => handler(key)}>{values[i]}</span>
         );
 
+        let fieldValue = "";
+        if (inline && name) {
+            fieldValue = name;
+        }
+        if (!this.props.onlyName && inline && name) {
+            fieldValue += ": ";
+        }
+        if (!this.props.onlyName) {
+            fieldValue += this.props.value || "select a value";
+        }
+
         return (
             <div className={classNames( "field", "choice-field", {"field-inline" : inline},
                 {"field-small": this.props.small})}>
                 {!inline && name && <label className="field-name">{name}:</label>}
                 <div className={classNames("field-select", {"select-expanded": this.state.expanded})}
                      tabIndex={0} onBlur={collapse} onClick={() => this.state.expanded ? collapse() : expand()}>
-                    <div className="field-value">
-                        {((inline && name) ? (name + ": ") : "") + (this.props.value || "select a value")}
-                    </div>
+                    <div className="field-value">{fieldValue}</div>
                     <div className="field-options">
                         {options}
                     </div>
diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss
index 7f32b0e..e7683b7 100644
--- a/frontend/src/components/fields/ChoiceField.scss
+++ b/frontend/src/components/fields/ChoiceField.scss
@@ -16,7 +16,7 @@
       border: none;
       color: $color-primary-4;
       border-radius: 5px;
-      padding: 7px 10px;
+      padding: 7px 25px 7px 10px;
       cursor: pointer;
 
       &:after {
diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js
index edcb720..c1c210f 100644
--- a/frontend/src/components/fields/extensions/ColorField.js
+++ b/frontend/src/components/fields/extensions/ColorField.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Button, ButtonGroup, Form, OverlayTrigger, Popover} from "react-bootstrap";
+import {OverlayTrigger, Popover} from "react-bootstrap";
 import './ColorField.scss';
 import InputField from "../InputField";
 
@@ -9,7 +9,6 @@ class ColorField extends Component {
         super(props);
 
         this.state = {
-            invalid: false
         };
 
         this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1",
@@ -18,8 +17,7 @@ class ColorField extends Component {
 
     render() {
         const colorButtons = this.colors.map((color) =>
-            <span key={"button" + color} className="color-input"
-                  style={{"backgroundColor": color, "borderColor": this.state.color === color ? "#fff" : color}}
+            <span key={"button" + color} className="color-input" style={{"backgroundColor": color}}
                   onClick={() => {
                       this.setState({color: color});
                       if (typeof this.props.onChange === "function") {
@@ -44,16 +42,19 @@ class ColorField extends Component {
             </Popover>
         );
 
+        let buttonStyles = {};
+        if (this.state.color) {
+            buttonStyles["backgroundColor"] = this.state.color;
+        }
+
         return (
-            <div className="color-field">
+            <div className="field color-field">
                 <InputField {...this.props} name="color" />
-
                 <div className="color-picker">
                     <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose>
-                        <Button variant="picker" size="sm">pick</Button>
+                        <button type="button" className="picker-button" style={buttonStyles}>pick</button>
                     </OverlayTrigger>
                 </div>
-
             </div>
         );
     }
diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss
index c8f617c..1c3931f 100644
--- a/frontend/src/components/fields/extensions/ColorField.scss
+++ b/frontend/src/components/fields/extensions/ColorField.scss
@@ -16,15 +16,14 @@
   .color-picker {
     margin-bottom: 5.5px;
 
-    .btn-picker {
-      padding: 8.5px 15px;
+    .picker-button {
+      font-size: 0.8em;
+      padding: 8px 15px;
       border-bottom-right-radius: 5px;
       border-top-right-radius: 5px;
-      background-color: $color-indigo;
+      background-color: $color-primary-1;
     }
   }
-
-
 }
 
 .colors-container {