help button scaffolding

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)