downloads section and dividers

src/ui/components/menu/Downloads.css

@@ -0,0 +1,27 @@
+.Downloads {
+  width: 30%;
+}
+
+.DownloadSection {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  margin-bottom: 12px;
+  width: 90%;
+  min-height: 30px;
+}
+
+.DownloadValue {
+  height: 100%;
+}
+
+.DownloadValue .BigButton {
+  height: 100%;
+  min-height: 30px;
+}
+
+.DownloadValue .BigButtonText {
+  font-size: 12px;
+}

src/ui/components/menu/Downloads.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import Menu from './Menu'
+import Tr from '../../../utils/language'
+import DownloadHandler from '../../../utils/download'
+import BigButton from '../common/BigButton'
+
+import './Downloads.css'
+import Divider from './Divider'
+
+interface IProps {
+  closeFn: () => void;
+  downloadManager: DownloadHandler;
+}
+
+interface IState {
+  grasscutter_downloading: boolean
+  resources_downloading: boolean
+}
+
+export default class Downloads extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props)
+
+    this.state = {
+      grasscutter_downloading: false,
+      resources_downloading: false
+    }
+  }
+
+  render() {
+    return (
+      <Menu closeFn={this.props.closeFn} className="Downloads" heading="Downloads">
+        <div className='DownloadSection'>
+          <div className='DownloadLabel'>
+            <Tr text="downloads.grasscutter_stable" />
+          </div>
+          <div className='DownloadValue'>
+            <BigButton onClick={() => console.log('download')} id="grasscutterStableBtn" >
+              <Tr text="components.download" />
+            </BigButton>
+          </div>
+        </div>
+        <div className='DownloadSection'>
+          <div className='DownloadLabel'>
+            <Tr text="downloads.grasscutter_latest" />
+          </div>
+          <div className='DownloadValue'>
+            <BigButton onClick={() => console.log('download')} id="grasscutterLatestBtn" >
+              <Tr text="components.download" />
+            </BigButton>
+          </div>
+        </div>
+
+        <Divider />
+
+        <div className='DownloadSection'>
+          <div className='DownloadLabel'>
+            <Tr text="downloads.resources" />
+          </div>
+          <div className='DownloadValue'>
+            <BigButton onClick={() => console.log('download')} id="resourcesBtn" >
+              <Tr text="components.download" />
+            </BigButton>
+          </div>
+        </div>
+      </Menu>
+    )
+  }
+}

src/ui/components/menu/Options.tsx

@@ -5,6 +5,7 @@ import Tr from '../../../utils/language'
 import './Options.css'
 import { setConfigOption, getConfig, getConfigOption } from '../../../utils/configuration'
 import Checkbox from '../common/Checkbox'
+import Divider from './Divider'
 
 interface IProps {
   closeFn: () => void;
@@ -70,6 +71,9 @@ export default class Options extends React.Component<IProps, IState> {
             <DirInput onChange={this.setGrasscutterJar} value={this.state?.grasscutter_path} extensions={['jar']} />
           </div>
         </div>
+
+        <Divider />
+        
         <div className='OptionSection'>
           <div className='OptionLabel'>
             <Tr text="options.grasscutter_with_game" />