options panel and custom checkbox

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} />
-        <label>{this.props.label}</label>
+        <input type='checkbox' id={this.props.id} checked={this.state.checked} onChange={this.handleChange} />
+        <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,7 +16,9 @@ export default class Menu extends React.Component<IProps, never> {
     return (
       <div className={'Menu ' + this.props.className}>
         <div className="MenuHeading">{this.props.heading}</div>
-        {this.props.children}
+        <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>