help button scaffolding

src/ui/components/ServerLaunchSection.css

@@ -92,7 +92,7 @@
 }
 
 #port {
-  width: 25%;
+  width: 100%;
 }
 
 @media (max-width: 1040px) {

src/ui/components/ServerLaunchSection.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import Checkbox from './common/Checkbox'
 import BigButton from './common/BigButton'
+import TextInput from './common/TextInput'
+import HelpButton from './common/HelpButton'
 import { getConfig, saveConfig, setConfigOption } from '../../utils/configuration'
 import { translate } from '../../utils/language'
 import { invoke } from '@tauri-apps/api/tauri'
 
 import Server from '../../resources/icons/server.svg'
 import './ServerLaunchSection.css'
-import TextInput from './common/TextInput'
 
 interface IProps {
   [key: string]: any
@@ -146,7 +147,10 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
 
         <div className="ServerConfig">
           <TextInput id="ip" key="ip" placeholder={this.state.ipPlaceholder} onChange={this.setIp} />
-          <TextInput id="port" key="port" placeholder={this.state.portPlaceholder} onChange={this.setPort}/> 
+          <TextInput style={{
+            width: '10%',
+          }} id="port" key="port" placeholder={this.state.portPlaceholder} onChange={this.setPort}/>
+          <HelpButton />
         </div>
 
         <div className="ServerLaunchButtons">

src/ui/components/common/HelpButton.css

@@ -0,0 +1,15 @@
+.HelpSection {
+  display: inline-block;
+  margin-left: 20px;
+  vertical-align: middle;
+}
+
+.HelpButton {
+  height: 20px;
+  filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 20%));
+}
+
+.HelpButton img {
+  height: 100%;
+  filter: invert(100%) sepia(2%) saturate(201%) hue-rotate(47deg) brightness(117%) contrast(100%);
+}

src/ui/components/common/HelpButton.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import './HelpButton.css'
+import Help from '../../../resources/icons/help.svg'
+
+interface IProps {
+  id?: string
+}
+
+interface IState {
+  opened: boolean
+}
+
+export default class HelpButton extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <div className="HelpSection">
+        <div className="HelpButton">
+          <img src={Help} />
+        </div>
+      </div>
+    )
+  }
+}

src/ui/components/common/TextInput.tsx

@@ -10,6 +10,9 @@ interface IProps {
   readOnly?: boolean;
   id?: string;
   clearable?: boolean;
+  style?: {
+    [key: string]: any;
+  }
 }
 
 interface IState {
@@ -37,7 +40,7 @@ export default class TextInput extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="TextInputWrapper">
+      <div className="TextInputWrapper" style={this.props.style || {}}>
         <input id={this.props?.id} readOnly={this.props.readOnly || false} placeholder={this.props.placeholder || ''} className="TextInput" value={this.state.value} onChange={(e) => {
           this.setState({ value: e.target.value })
           if (this.props.onChange) this.props.onChange(e.target.value)