more custom elements

src/ui/components/common/Checkbox.css

@@ -6,13 +6,13 @@
   height: 20px;
   width: 20px;
 
-  border: 2px solid #ebebec;
+  border: 2px solid #cecece;
   border-radius: 2px;
 }
 
 .CheckboxDisplay:hover {
   cursor: pointer;
-  border-color: #cecece;
+  border-color: #aaaaaa;
 }
 
 .CheckboxDisplay img {

src/ui/components/common/DirInput.css

@@ -0,0 +1,23 @@
+.DirInput {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.FileSelectIcon {
+  height: 20px;
+  margin: 10px;
+  filter: invert(99%) sepia(0%) saturate(1188%) hue-rotate(186deg) brightness(97%) contrast(67%);
+
+  transition: filter 0.1s ease-in-out;
+}
+
+.FileSelectIcon:hover {
+  cursor: pointer;
+  filter: invert(73%) sepia(0%) saturate(380%) hue-rotate(224deg) brightness(94%) contrast(90%);
+}
+
+.FileSelectIcon img {
+  height: 100%;
+}

src/ui/components/common/DirInput.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import TextInput from './TextInput'
+import File from '../../../resources/icons/folder.svg'
+
+import './DirInput.css'
+
+interface IProps {
+  value?: string;
+}
+
+interface IState {
+  value: string
+}
+
+export default class DirInput extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+
+    this.state = {
+      value: props.value || ''
+    }
+  }
+
+  handleFileSelect() {
+    console.log('piss')
+  }
+
+  render() {
+    return (
+      <div className='DirInput'>
+        <TextInput value={this.state.value} placeholder='Set Game Location...' readOnly={true} />
+        <div className="FileSelectIcon">
+          <img src={File} />
+        </div>
+      </div>
+    )
+  }
+}

src/ui/components/common/TextInput.css

@@ -0,0 +1,11 @@
+.TextInput {
+  border: none;
+  border-bottom: 2px solid #cecece;
+
+  transition: border-bottom-color 0.1s ease-in-out;
+}
+
+.TextInput:focus {
+  outline: none;
+  border-bottom-color: #ffd326;
+}

src/ui/components/common/TextInput.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import './TextInput.css'
+
+interface IProps {
+  value?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  readOnly?: boolean;
+}
+
+interface IState {
+  value: string
+}
+
+export default class TextInput extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+
+    this.state = {
+      value: props.value || ''
+    }
+  }
+
+  render() {
+    return (
+      <input 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)
+      }} />
+    )
+  }
+}

src/ui/components/menu/Options.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 import Checkbox from '../common/Checkbox'
+import TextInput from '../common/TextInput'
+import DirInput from '../common/DirInput'
 import Menu from './Menu'
 import './Options.css'
 
@@ -17,6 +19,18 @@ export default class Options extends React.Component<Record<string, never>, neve
             <Checkbox id="testOption" label="" checked={true} onChange={() => console.log('Test Option Changed')} />
           </div>
         </div>
+        <div className='OptionSection'>
+          <div className='OptionLabel'>Test Input</div>
+          <div className='OptionValue'>
+            <TextInput placeholder='Test Value...' />
+          </div>
+        </div>
+        <div className='OptionSection'>
+          <div className='OptionLabel'>Test File Input</div>
+          <div className='OptionValue'>
+            <DirInput />
+          </div>
+        </div>
       </Menu>
     )
   }