help button scaffolding

src-tauri/Cargo.lock

@@ -3643,9 +3643,9 @@ dependencies = [
 
 [[package]]
 name = "sysinfo"
-version = "0.23.12"
+version = "0.23.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "56b1e20ee77901236c389ff74618a899ff5fd34719a7ff0fd1d64f0acca5179a"
+checksum = "3977ec2e0520829be45c8a2df70db2bf364714d8a748316a10c3c35d4d2b01c9"
 dependencies = [
  "cfg-if 1.0.0",
  "core-foundation-sys",

src/resources/icons/help.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+<desc>Created with Fabric.js 1.7.22</desc>
+<defs>
+</defs>
+<g transform="translate(128 128) scale(0.72 0.72)" style="">
+	<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
+	<path d="M 45 58.88 c -2.209 0 -4 -1.791 -4 -4 v -4.543 c 0 -1.101 0.454 -2.153 1.254 -2.908 l 8.083 -7.631 c 1.313 -1.377 2.035 -3.181 2.035 -5.087 v -0.302 c 0 -2.005 -0.791 -3.881 -2.228 -5.281 c -1.436 -1.399 -3.321 -2.14 -5.342 -2.089 c -3.957 0.102 -7.175 3.523 -7.175 7.626 c 0 2.209 -1.791 4 -4 4 s -4 -1.791 -4 -4 c 0 -8.402 6.715 -15.411 14.969 -15.623 c 4.183 -0.109 8.138 1.439 11.131 4.357 c 2.995 2.918 4.645 6.829 4.645 11.01 v 0.302 c 0 4.027 -1.546 7.834 -4.354 10.72 c -0.04 0.041 -0.08 0.081 -0.121 0.12 L 49 52.062 v 2.818 C 49 57.089 47.209 58.88 45 58.88 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 45 71.96 c -1.32 0 -2.61 -0.53 -3.54 -1.46 c -0.23 -0.23 -0.43 -0.49 -0.62 -0.76 c -0.18 -0.271 -0.33 -0.561 -0.46 -0.86 c -0.12 -0.311 -0.22 -0.62 -0.28 -0.94 c -0.07 -0.32 -0.1 -0.65 -0.1 -0.98 c 0 -0.32 0.03 -0.65 0.1 -0.97 c 0.06 -0.32 0.16 -0.641 0.28 -0.94 c 0.13 -0.3 0.28 -0.59 0.46 -0.86 c 0.19 -0.279 0.39 -0.529 0.62 -0.76 c 1.16 -1.16 2.89 -1.7 4.52 -1.37 c 0.32 0.07 0.629 0.16 0.93 0.29 c 0.3 0.12 0.59 0.28 0.859 0.46 c 0.28 0.181 0.53 0.391 0.761 0.62 c 0.239 0.23 0.439 0.48 0.63 0.76 c 0.18 0.271 0.33 0.561 0.46 0.86 c 0.12 0.3 0.22 0.62 0.279 0.94 C 49.97 66.31 50 66.64 50 66.96 c 0 0.33 -0.03 0.66 -0.101 0.979 c -0.06 0.32 -0.159 0.63 -0.279 0.94 c -0.13 0.3 -0.28 0.59 -0.46 0.86 c -0.19 0.27 -0.391 0.529 -0.63 0.76 c -0.23 0.229 -0.48 0.439 -0.761 0.62 c -0.27 0.18 -0.56 0.34 -0.859 0.46 c -0.301 0.13 -0.61 0.22 -0.93 0.279 C 45.65 71.93 45.33 71.96 45 71.96 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 45 90 C 20.187 90 0 69.813 0 45 S 20.187 0 45 0 s 45 20.187 45 45 S 69.813 90 45 90 z M 45 8 C 24.598 8 8 24.598 8 45 s 16.598 37 37 37 s 37 -16.598 37 -37 S 65.402 8 45 8 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</g>
+</svg>

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)