options panel and custom checkbox

src/resources/icons/check.svg

@@ -0,0 +1,10 @@
+<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 32.283 80.25 c -0.013 0 -0.026 0 -0.039 0 c -1.733 -0.012 -3.376 -0.771 -4.507 -2.085 L 1.454 47.644 c -2.163 -2.511 -1.88 -6.3 0.631 -8.462 c 2.511 -2.164 6.299 -1.88 8.461 0.631 l 21.796 25.311 l 47.163 -53.348 c 2.194 -2.484 5.988 -2.716 8.469 -0.521 c 2.483 2.195 2.717 5.986 0.521 8.469 l -51.717 58.5 C 35.639 79.513 34.001 80.25 32.283 80.25 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/App.tsx

@@ -6,17 +6,19 @@ import './custom.css'
 import DownloadHandler from '../utils/download'
 
 // Major Components
-import Topbar from './components/TopBar'
+import TopBar from './components/TopBar'
 import ServerLaunchSection from './components/ServerLaunchSection'
 import ProgressBar from './components/common/ProgressBar'
 import MainProgressBar from './components/common/MainProgressBar'
+import Options from './components/menu/Options'
 
 interface IProps {
-  [key: string]: never
+  [key: string]: never;
 }
 
 interface IState {
-  isDownloading: boolean
+  isDownloading: boolean;
+  optionsOpen: boolean;
 }
 
 const downloadHandler = new DownloadHandler()
@@ -39,13 +41,23 @@ class App extends React.Component<IProps, IState> {
     super(props)
     this.state = {
       isDownloading: false,
+      optionsOpen: false
     }
   }
 
   render() {
     return (
       <div className="App">
-        <Topbar />
+        <TopBar
+          optFunc={() => {
+            this.setState({ optionsOpen: !this.state.optionsOpen })
+          }}
+          downFunc={() => null}
+        />
+
+        {
+          this.state.optionsOpen ? <Options /> : null
+        }
 
         <button onClick={TESTDOWNLOAD}>download file test</button>
 

src/ui/components/ServerLaunchSection.tsx

@@ -54,7 +54,7 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
     return (
       <div id="playButton">
         <div id="serverControls">
-          <Checkbox label="Connect via Grasscutter" onChange={this.toggleGrasscutter} checked={this.state.grasscutterEnabled}/>
+          <Checkbox id="enableGC" label="Connect via Grasscutter" onChange={this.toggleGrasscutter} checked={this.state.grasscutterEnabled}/>
         </div>
         <BigButton text="PLAY DA GAME :D" onClick={this.playGame} id="officialPlay" />
       </div>

src/ui/components/TopBar.tsx

@@ -8,14 +8,15 @@ import downBtn from '../../resources/icons/download.svg'
 import { app } from '@tauri-apps/api'
 
 interface IProps {
-  [key: string]: never
+  optFunc: () => void;
+  downFunc: () => void;
 }
 
 interface IState {
   version: string
 }
 export default class TopBar extends React.Component<IProps, IState> {
-  constructor(props: Record<string, never>) {
+  constructor(props: IProps) {
     super(props)
 
     app.getVersion().then(version => {
@@ -45,7 +46,7 @@ export default class TopBar extends React.Component<IProps, IState> {
           <div id="minBtn" onClick={this.handleMinimize} className='TopButton'>
             <img src={minIcon} alt="minimize" />
           </div>
-          <div id="settingsBtn" className='TopButton'>
+          <div id="settingsBtn" onClick={this.props.optFunc} className='TopButton'>
             <img src={cogBtn} alt="settings" />
           </div>
           <div id="downloadsBtn" className='TopButton'>

src/ui/components/common/Checkbox.css

@@ -0,0 +1,21 @@
+.Checkbox input[type="checkbox"] {
+  display: none;
+}
+
+.CheckboxDisplay {
+  height: 20px;
+  width: 20px;
+
+  border: 2px solid #ebebec;
+  border-radius: 2px;
+}
+
+.CheckboxDisplay:hover {
+  cursor: pointer;
+  border-color: #cecece;
+}
+
+.CheckboxDisplay img {
+  height: 100%;
+  /* filter: invert(78%) sepia(91%) saturate(923%) hue-rotate(334deg) brightness(106%) contrast(102%); */
+}

src/ui/components/common/Checkbox.tsx

@@ -1,9 +1,13 @@
 import React from 'react'
+import checkmark from '../../../resources/icons/check.svg'
+
+import './Checkbox.css'
 
 interface IProps {
   label: string,
   checked: boolean,
   onChange: () => void,
+  id: string
 }
 
 interface IState {
@@ -27,8 +31,12 @@ export default class Checkbox extends React.Component<IProps, IState> {
   render() {
     return (
       <div className="Checkbox">
-        <input type="checkbox" onChange={this.handleChange} />
+        <input type='checkbox' id={this.props.id} checked={this.state.checked} onChange={this.handleChange} />
-        <label>{this.props.label}</label>
+        <label htmlFor={this.props.id}>
+          <div className="CheckboxDisplay">
+            {this.state.checked ? <img src={checkmark} alt='Checkmark' /> : null}
+          </div>
+        </label>
       </div>
     )
   }

src/ui/components/menu/Menu.css

@@ -0,0 +1,25 @@
+.Menu {
+  position: fixed;
+  z-index: 99;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  height: 70%;
+  width: 60%;
+
+  background-color: #fff;
+}
+
+.MenuInner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.MenuHeading {
+  font-size: 2rem;
+  margin: 20px;
+}

src/ui/components/menu/Menu.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import './Menu.css'
 
 interface IProps {
   children: React.ReactNode[] | React.ReactNode;
@@ -15,8 +16,10 @@ export default class Menu extends React.Component<IProps, never> {
     return (
       <div className={'Menu ' + this.props.className}>
         <div className="MenuHeading">{this.props.heading}</div>
+        <div className='MenuInner'>
           {this.props.children}
         </div>
+      </div>
     )
   }
 }

src/ui/components/menu/Options.css

@@ -0,0 +1,5 @@
+.OptionSection {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}

src/ui/components/menu/Options.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
+import Checkbox from '../common/Checkbox'
 import Menu from './Menu'
 import './Options.css'
 
-export default class Options extends React.Component<{}, never> {
+export default class Options extends React.Component<Record<string, never>, never> {
   constructor(props: Record<string, never>) {
     super(props)
   }
@@ -13,7 +14,7 @@ export default class Options extends React.Component<{}, never> {
         <div className='OptionSection'>
           <div className='OptionLabel'>Test Option</div>
           <div className='OptionValue'>
-            <input type="checkbox" />
+            <Checkbox id="testOption" label="" checked={true} onChange={() => console.log('Test Option Changed')} />
           </div>
         </div>
       </Menu>