From 6dcc91f2169c1f4327dd043e0e59e055bcfdbc83 Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Tue, 10 May 2022 00:35:50 -0700
Subject: [PATCH] more custom elements

---
 src/ui/components/common/Checkbox.css  |  4 +--
 src/ui/components/common/DirInput.css  | 23 ++++++++++++++++
 src/ui/components/common/DirInput.tsx  | 38 ++++++++++++++++++++++++++
 src/ui/components/common/TextInput.css | 11 ++++++++
 src/ui/components/common/TextInput.tsx | 32 ++++++++++++++++++++++
 src/ui/components/menu/Options.tsx     | 14 ++++++++++
 6 files changed, 120 insertions(+), 2 deletions(-)
 create mode 100644 src/ui/components/common/DirInput.css
 create mode 100644 src/ui/components/common/DirInput.tsx
 create mode 100644 src/ui/components/common/TextInput.css
 create mode 100644 src/ui/components/common/TextInput.tsx

diff --git a/src/ui/components/common/Checkbox.css b/src/ui/components/common/Checkbox.css
index 56dcd7d..94b17c8 100644
--- a/src/ui/components/common/Checkbox.css
+++ b/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 {
diff --git a/src/ui/components/common/DirInput.css b/src/ui/components/common/DirInput.css
new file mode 100644
index 0000000..e0a4310
--- /dev/null
+++ b/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%;
+}
\ No newline at end of file
diff --git a/src/ui/components/common/DirInput.tsx b/src/ui/components/common/DirInput.tsx
new file mode 100644
index 0000000..53c328c
--- /dev/null
+++ b/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>
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/ui/components/common/TextInput.css b/src/ui/components/common/TextInput.css
new file mode 100644
index 0000000..441ab3a
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/ui/components/common/TextInput.tsx b/src/ui/components/common/TextInput.tsx
new file mode 100644
index 0000000..b106192
--- /dev/null
+++ b/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)
+      }} />
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/ui/components/menu/Options.tsx b/src/ui/components/menu/Options.tsx
index 54064b3..a57f079 100644
--- a/src/ui/components/menu/Options.tsx
+++ b/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>
     )
   }