From 5c0a46b2d2f1b1b9b84fd68b4755a0cc701ad499 Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Mon, 16 May 2022 17:23:13 -0700
Subject: [PATCH] server input tweaks

---
 src/ui/components/ServerLaunchSection.css |  6 +++++-
 src/ui/components/common/DirInput.tsx     | 13 +++++++++----
 src/ui/components/common/TextInput.tsx    | 17 ++++++++++-------
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/ui/components/ServerLaunchSection.css b/src/ui/components/ServerLaunchSection.css
index 0fcbe57..9f4a63b 100644
--- a/src/ui/components/ServerLaunchSection.css
+++ b/src/ui/components/ServerLaunchSection.css
@@ -83,12 +83,16 @@
   box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
 }
 
+.ServerConfig .TextInputWrapper {
+  display: inline-block;
+}
+
 #ip {
   margin-right: 6px;
 }
 
 #port {
-  width: 15%;
+  width: 25%;
 }
 
 @media (max-width: 1040px) {
diff --git a/src/ui/components/common/DirInput.tsx b/src/ui/components/common/DirInput.tsx
index 569c69c..61b8476 100644
--- a/src/ui/components/common/DirInput.tsx
+++ b/src/ui/components/common/DirInput.tsx
@@ -62,11 +62,16 @@ export default class DirInput extends React.Component<IProps, IState> {
   render() {
     return (
       <div className='DirInput'>
-        <TextInput value={this.state.value} placeholder={this.state.placeholder} readOnly={true} onChange={(text: string) => {
-          this.setState({ value: text })
+        <TextInput
+          value={this.state.value}
+          placeholder={this.state.placeholder}
+          clearable={true}
+          readOnly={true} onChange={(text: string) => {
+            this.setState({ value: text })
 
-          if (this.props.onChange) this.props.onChange(text)
-        }}/>
+            if (this.props.onChange) this.props.onChange(text)
+          }}
+        />
         <div className="FileSelectIcon" onClick={this.handleIconClick}>
           <img src={File} />
         </div>
diff --git a/src/ui/components/common/TextInput.tsx b/src/ui/components/common/TextInput.tsx
index cb2195e..fae5119 100644
--- a/src/ui/components/common/TextInput.tsx
+++ b/src/ui/components/common/TextInput.tsx
@@ -42,13 +42,16 @@ export default class TextInput extends React.Component<IProps, IState> {
           this.setState({ value: e.target.value })
           if (this.props.onChange) this.props.onChange(e.target.value)
         }} />
-        <div className="TextClear" onClick={() => {
-          this.setState({ value: '' })
-
-          if (this.props.onChange) this.props.onChange('')
-        }}>
-          <img src={Close} className="TextInputClear" />
-        </div>
+        {
+          this.props.clearable ?
+            <div className="TextClear" onClick={() => {
+              this.setState({ value: '' })
+    
+              if (this.props.onChange) this.props.onChange('')
+            }}>
+              <img src={Close} className="TextInputClear" />
+            </div> : null
+        }
       </div>
     )
   }