From 7a56cadfb53ef21c873e3ca9c192b758eb7f4318 Mon Sep 17 00:00:00 2001
From: vladfreeze <vladfreeze@gmail.com>
Date: Thu, 2 Dec 2021 11:29:22 +0100
Subject: [PATCH] Improved design of input fields to match template

---
 .../components/DynamicTable/DynamicTable.jsx  |  8 +++---
 jsx/src/components/GroupEdit/GroupEdit.jsx    | 25 +++++++++++--------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/jsx/src/components/DynamicTable/DynamicTable.jsx b/jsx/src/components/DynamicTable/DynamicTable.jsx
index 6e0c0cd2..35508e2e 100644
--- a/jsx/src/components/DynamicTable/DynamicTable.jsx
+++ b/jsx/src/components/DynamicTable/DynamicTable.jsx
@@ -155,7 +155,7 @@ export default class DynamicTable extends React.Component {
         <tr key={"item-" + i}>
           <td>
             <input
-              className="properties-table-keyvalues"
+              className="form-control"
               type="text"
               value={o}
               id={o + i}
@@ -174,7 +174,7 @@ export default class DynamicTable extends React.Component {
         <tr key={"item-" + i}>
           <td>
             <input
-              className="properties-table-keyvalues"
+              className="form-control"
               type="text"
               value={o}
               onChange={context.handleValueChanged.bind(context, i)}
@@ -225,7 +225,7 @@ export default class DynamicTable extends React.Component {
           <tr>
             <td>
               <input
-                className="properties-table"
+                className="form-control"
                 type="text"
                 value={this.state.message}
                 onChange={this.updateMessageKey.bind(this)}
@@ -233,7 +233,7 @@ export default class DynamicTable extends React.Component {
             </td>
             <td>
               <input
-                className="properties-table"
+                className="form-control"
                 type="text"
                 value={this.state.message2}
                 onChange={this.updateMessageValue.bind(this)}
diff --git a/jsx/src/components/GroupEdit/GroupEdit.jsx b/jsx/src/components/GroupEdit/GroupEdit.jsx
index f0b450ee..16ebcaec 100644
--- a/jsx/src/components/GroupEdit/GroupEdit.jsx
+++ b/jsx/src/components/GroupEdit/GroupEdit.jsx
@@ -74,19 +74,24 @@ const GroupEdit = (props) => {
           setChanged(true);
         }}
       />
-      <div className="container">
-        <div className="row">
+      <div className="row">
+        <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
           <div className="alert alert-info">Manage group properties</div>
         </div>
       </div>
-      <DynamicTable
-        current_propobject={group_data.properties}
-        setProp={setProp}
-        setPropKeys={setPropKeys}
-        setPropValues={setPropValues}
-        setChanged={setChanged}
-        //Add keys
-      />
+      <div className="row">
+        <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+          <DynamicTable
+            current_propobject={group_data.properties}
+            setProp={setProp}
+            setPropKeys={setPropKeys}
+            setPropValues={setPropValues}
+            setChanged={setChanged}
+            //Add keys
+          />
+        </div>
+      </div>
+
       <div className="row">
         <div className="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
           <button id="return" className="btn btn-light">