From 73edbec1abb51afd2311e6a33d0af47e55876273 Mon Sep 17 00:00:00 2001
From: hevp <hevp101@outlook.com>
Date: Thu, 30 Apr 2020 17:46:42 +0200
Subject: [PATCH] Update schema field unit layout

---
 webui/app/css/app.css               | 12 ++++++++++++
 webui/src/components/editrecord.jsx |  6 +++---
 webui/src/components/schema.jsx     |  7 ++++---
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/webui/app/css/app.css b/webui/app/css/app.css
index 8cc7b8ab3c..e52be1c1c0 100644
--- a/webui/app/css/app.css
+++ b/webui/app/css/app.css
@@ -807,10 +807,22 @@ a.navbar-brand {
   color: #333;
 }
 
+.schema-field {
+  font-weight: bold;
+}
+
+.schema-field span:nth-child(2) {
+  color: grey;
+}
+
 .required.property {
   color: #F45D00;
 }
 
+.required.property span:nth-child(2) {
+  color: #FF9D63;
+}
+
 /*****************************************************************************/
 /* help and about pages */
 
diff --git a/webui/src/components/editrecord.jsx b/webui/src/components/editrecord.jsx
index c9ffcfb556..f6f6de4136 100644
--- a/webui/src/components/editrecord.jsx
+++ b/webui/src/components/editrecord.jsx
@@ -386,13 +386,13 @@ const EditRecord = React.createClass({
                         <label htmlFor={id} className="col-sm-3 control-label" style={{fontWeight:'bold'}}>
                             <span style={{float:'right'}}>
                                 <span style={{color:isError?'red':'black'}}>
-                                    {title}&nbsp;
+                                    {title}
                                 </span>
                                 <span>
-                                    {schema.get('unit') ? <span style={{color: 'grey'}}> {'(' + schema.get('unit') + ')'} </span> : false }
+                                    {schema.get('unit') ? <span style={{color: 'grey'}}>&nbsp;{'(' + schema.get('unit') + ')'}</span> : false }
                                 </span>
                                 <span>
-                                    {schema.get('isRequired') ? "*" : ""}&nbsp;
+                                    &nbsp;{schema.get('isRequired') ? "*" : ""}
                                 </span>
                             </span>
                         </label> }
diff --git a/webui/src/components/schema.jsx b/webui/src/components/schema.jsx
index 62267c4425..4dc86d3254 100644
--- a/webui/src/components/schema.jsx
+++ b/webui/src/components/schema.jsx
@@ -37,7 +37,7 @@ export const Schema = React.createClass({
     mixins: [React.addons.PureRenderMixin],
 
     renderSchema([id, schema]) {
-        const requiredClass = schema.get('isRequired') ? "required property":"";
+        const requiredClass = schema.get('isRequired') ? "required property" : "";
 
         const type = schema.get('type');
         const title = schema.get('title');
@@ -70,8 +70,9 @@ export const Schema = React.createClass({
         return (
             <li key={id} className="row field-general">
                 <div className="col-sm-6">
-                    <p className={requiredClass}>
-                        <span className="bold">{title} {schema.get('unit') ? ' [' + schema.get('unit') + ']' : false }</span>
+                    <p className={"schema-field " + requiredClass}>
+                        <span>{title}</span>
+                        <span>{schema.get('unit') ? ' (' + schema.get('unit') + ')' : false }</span>
                         <span className="mono-style">
                             {title ? " :: " : ""}
                             {id}