Improve data netry list UI for new entry

app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx

@@ -5,6 +5,7 @@ import './multi-data-entry.css';
 import { BaseDataEntryProps } from '../data-entry';
 import { DataEntryInput, TextDataEntryInputProps } from '../data-entry-input';
 import { DataTitleCopyable } from '../data-title';
+import { CloseIcon, SaveIcon } from '../../../components/icons';
 
 interface MultiDataEntryProps extends BaseDataEntryProps, TextDataEntryInputProps {
     value: string[];
@@ -42,6 +43,9 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
         props.onChange(props.slug, editedValues);
     }, [newValue, values, props.onChange, props.slug]);
 
+    const clearNew = useCallback(() => {
+        setNewValue(null);
+    }, []);
 
     const remove = useCallback((index: number) => {
         const editedValues = values.slice();
@@ -65,13 +69,13 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
             copy={copyable ? props.copy : undefined}
         />
         <div id={`${props.slug}-wrapper`}>
-            <ul className="data-link-list">
             {
                 values.length === 0 && !isEditing &&
                 <div className="input-group">
                     <input className="form-control no-entries" type="text" value="No entries" disabled={true} />
                 </div>
             }
+            <ul className="data-entry-list">
                 {
                     values.map((val, i) => (
                         <li className="input-group" key={i /* i as key prevents input component recreation on edit */}>
@@ -95,16 +99,15 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
                                 <div className="input-group-append">
                                     <button type="button" onClick={() => remove(i)}
                                         title="Remove"
-                                        data-index={i} className="btn btn-outline-dark">✕</button>
+                                        data-index={i} className="btn btn-outline-dark data-entry-list-button"><CloseIcon /></button>
                                 </div>
                             }
                         </li>
                     ))
                 }
-            </ul>
                 {
                     !isDisabled &&
-                    <div className="input-group">
+                        <li className="input-group">
                             <DataEntryInput
                                 slug={props.slug}
                                 name={slugWithModifier}
@@ -125,16 +128,26 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
                                 showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
                                 confirmOnAutofillSelect={true}
                             />
+                            {
+                                newValue != undefined &&
+                                    <>
                                         <div className="input-group-append">
                                             <button type="button"
-                                className="btn btn-outline-dark"
+                                                className="btn btn-primary data-entry-list-button"
-                                title="Add to list"
+                                                title="Confirm new value"
                                                 onClick={() => addNew()}
-                                disabled={newValue == undefined}
+                                            ><SaveIcon /></button>
-                            >+</button>
                                         </div>
+                                        <div className="input-group-append">
+                                            <button type="button" onClick={() => clearNew()}
+                                                title="Clear new value"
+                                                className="btn btn-warning data-entry-list-button"><CloseIcon /></button>
                                         </div>
+                                    </>
                             }
+                        </li>
+                }
+            </ul>
         </div>
     </>)
 };

app/src/frontend/building/data-containers/dynamics/dynamics-data-entry.tsx

@@ -10,6 +10,7 @@ import { MultiDataEntry } from '../../data-components/multi-data-entry/multi-dat
 import { NumberRangeDataEntry } from './number-range-data-entry';
 
 import './dynamics-data-entry.css';
+import { CloseIcon } from '../../../components/icons';
 
 type DemolishedBuilding = (BuildingAttributes['demolished_buildings'][number]);
 
@@ -211,7 +212,7 @@ export const DynamicsDataEntry: React.FC<DynamicsDataEntryProps> = (props) => {
                             <label>Please supply sources for any edits of existing records</label>
                         </>
                 }
-                <ul className="data-link-list">
+                <ul className="data-entry-list">
                     {
                         values.length === 0 &&
                         <div className="input-group">
@@ -229,7 +230,7 @@ export const DynamicsDataEntry: React.FC<DynamicsDataEntryProps> = (props) => {
                                                 title="Delete Record"
                                                 onClick={() => remove(id)}
                                                 data-index={id}
-                                            >x</button>
+                                            ><CloseIcon /></button>
                                     }
                                     <DynamicsDataRow
                                         value={pastBuilding}

app/src/frontend/building/sidebar.css

@@ -162,13 +162,17 @@
     list-style: none;
     padding-left: 0;
 }
-.data-section .data-link-list {
+.data-section .data-entry-list {
     padding: 0;
     list-style: none;
     margin-bottom: 0;
     margin-top: 0.5rem;
 }
-.data-link-list li {
+.data-entry-list li {
     border-color: #6c757d;
     border-radius: 0;
 }
+
+.data-entry-list-button {
+    width: 2.5em;
+}

app/src/frontend/styles/forms.css

@@ -43,9 +43,7 @@ label {
     margin-bottom: 0.25rem;
     margin-right: 0.25rem;
 }
-form .btn {
+
-    margin-bottom: 0.25rem;
-}
 .buttons-container.btn-center {
     margin-right: 0;
     text-align: center;