From c7d5d6800bb2663cfeb933daea21f9f9ff888653 Mon Sep 17 00:00:00 2001
From: Charlie Humphreys <ahumphreys3@gmail.com>
Date: Fri, 24 Jun 2022 23:48:32 -0500
Subject: [PATCH] add close button for string array edit input, update styles

---
 .../editor/metadataEditor/metadataEditor.less   | 13 ++++++++++++-
 .../stringArrayEditor/stringArrayEditor.jsx     | 17 +++++++++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index d4fe62397..fd2c33ac8 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -121,7 +121,6 @@
 		#groupedIcon {
 			#backgroundColors;
 			display: inline-block;
-			border-radius: 0 0.5em 0.5em 0;
 			height: ~"calc(100% + 0.6em)";
 			position: relative;
 			top: -0.3em;
@@ -136,6 +135,14 @@
 				top: 50%;
 				transform: translateY(-50%);
 			}
+
+			&:not(:last-child) {
+				border-right: 1px solid black;
+			}
+
+			&:last-child {
+				border-radius: 0 0.5em 0.5em 0;
+			}
 		}
 
 		.badge {
@@ -177,6 +184,10 @@
 				font-size: .8em;
 				right: 1px;
 				top: -.54em;
+
+				i {
+					font-size: 1.125em;
+				}
 			}
 		}
 	}
diff --git a/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx b/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx
index 9c29f2e4e..1fd870e1e 100644
--- a/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx
+++ b/client/homebrew/editor/stringArrayEditor/stringArrayEditor.jsx
@@ -92,12 +92,16 @@ const StringArrayEditor = createClass({
 				}
 			}
 		} else if(event.key === 'Escape') {
-			const valueContext = this.state.valueContext;
-			valueContext[index].editing = false;
-			this.setState({ valueContext, updateValue: '' });
+			this.closeEditInput(index);
 		}
 	},
 
+	closeEditInput : function(index) {
+		const valueContext = this.state.valueContext;
+		valueContext[index].editing = false;
+		this.setState({ valueContext, updateValue: '' });
+	},
+
 	render : function() {
 		const valueElements = Object.values(this.state.valueContext).map((context, i)=>context.editing
 			? <React.Fragment key={i}>
@@ -106,11 +110,12 @@ const StringArrayEditor = createClass({
 						value={this.state.updateValue}
 						onKeyDown={(e)=>this.handleValueInputKeyDown(e, i)}
 						onChange={(e)=>this.setState({ updateValue: e.target.value })}/>
-					{this.valueIsValid(this.state.updateValue) ? <div className='icon steel'><i className='fa fa-check fa-fw' onClick={(e)=>{ e.stopPropagation(); this.updateValue(this.state.updateValue, i); }}/></div> : null}
+					{<div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.closeEditInput(i); }}><i className='fa fa-times fa-fw'/></div>}
+					{this.valueIsValid(this.state.updateValue) ? <div className='icon steel'  onClick={(e)=>{ e.stopPropagation(); this.updateValue(this.state.updateValue, i); }}><i className='fa fa-check fa-fw'/></div> : null}
 				</div>
 			</React.Fragment>
 			: <div className='badge' key={i} onClick={()=>this.editValue(i)}>{context.value}
-				{!!this.props.cannotEdit && this.props.cannotEdit.includes(context.value) ? null : <div className='icon steel'><i className='fa fa-times fa-fw' onClick={(e)=>{ e.stopPropagation(); this.removeValue(i); }}/></div>}
+				{!!this.props.cannotEdit && this.props.cannotEdit.includes(context.value) ? null : <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.removeValue(i); }}><i className='fa fa-times fa-fw'/></div>}
 			</div>
 		);
 
@@ -123,7 +128,7 @@ const StringArrayEditor = createClass({
 						value={this.state.temporaryValue}
 						onKeyDown={(e)=>this.handleValueInputKeyDown(e)}
 						onChange={(e)=>this.setState({ temporaryValue: e.target.value })}/>
-					{this.valueIsValid(this.state.temporaryValue) ? <div className='icon steel'><i className='fa fa-check fa-fw' onClick={(e)=>{ e.stopPropagation(); this.addValue(this.state.temporaryValue); }}/></div> : null}
+					{this.valueIsValid(this.state.temporaryValue) ? <div className='icon steel' onClick={(e)=>{ e.stopPropagation(); this.addValue(this.state.temporaryValue); }}><i className='fa fa-check fa-fw'/></div> : null}
 				</div>
 			</div>
 		</div>;