From 0ec9ef92ee0a58ff9bbb309aa94a8cc63565f60a Mon Sep 17 00:00:00 2001
From: SpikeHD <spikegdofficial@gmail.com>
Date: Sun, 3 Jul 2022 15:10:49 -0700
Subject: [PATCH] cleanup

---
 src/ui/App.tsx                               |  4 +-
 src/ui/components/MiniDialog.tsx             |  8 +--
 src/ui/components/RightBar.tsx               |  8 +--
 src/ui/components/ServerLaunchSection.tsx    |  6 +--
 src/ui/components/TopBar.tsx                 |  4 +-
 src/ui/components/common/BigButton.tsx       |  2 +-
 src/ui/components/common/Checkbox.tsx        |  6 +--
 src/ui/components/common/DirInput.tsx        |  4 +-
 src/ui/components/common/DownloadSection.tsx | 10 ++--
 src/ui/components/common/HelpButton.tsx      |  8 +--
 src/ui/components/common/MainProgressBar.tsx |  8 +--
 src/ui/components/common/ProgressBar.tsx     | 14 +++---
 src/ui/components/common/TextInput.tsx       |  6 +--
 src/ui/components/menu/Divider.tsx           |  4 +-
 src/ui/components/menu/Downloads.tsx         | 30 +++++------
 src/ui/components/menu/Menu.tsx              | 12 ++---
 src/ui/components/menu/Options.tsx           | 52 ++++++++++----------
 src/ui/components/news/NewsSection.tsx       | 12 ++---
 18 files changed, 99 insertions(+), 99 deletions(-)

diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index f83d912..92277a4 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -166,7 +166,7 @@ class App extends React.Component<IProps, IState> {
         {
           // Mini downloads section
           this.state.miniDownloadsOpen ? (
-            <div className="MiniDownloads" id={'miniDownloadContainer'}>
+            <div className="MiniDownloads" id="miniDownloadContainer">
               <MiniDialog
                 title="Downloads"
                 closeFn={() => {
@@ -209,7 +209,7 @@ class App extends React.Component<IProps, IState> {
           ) : null
         }
 
-        <div className="BottomSection" id={'bottomSectionContainer'}>
+        <div className="BottomSection" id="bottomSectionContainer">
           <ServerLaunchSection />
 
           <div id="DownloadProgress"
diff --git a/src/ui/components/MiniDialog.tsx b/src/ui/components/MiniDialog.tsx
index fd1d416..e7c3bfc 100644
--- a/src/ui/components/MiniDialog.tsx
+++ b/src/ui/components/MiniDialog.tsx
@@ -32,16 +32,16 @@ export default class MiniDialog extends React.Component<IProps, never> {
 
   render() {
     return (
-      <div className="MiniDialog" id={'miniDialogContainer'}>
+      <div className="MiniDialog" id="miniDialogContainer">
         {
           this.props.closeable !== undefined && this.props.closeable ?
-            <div className="MiniDialogTop" id={'miniDialogContainerTop'} onClick={this.props.closeFn}>
+            <div className="MiniDialogTop" id="miniDialogContainerTop" onClick={this.props.closeFn}>
               <span>{this.props?.title}</span>
-              <img src={Close} className="MiniDialogClose" id={'miniDialogButtonClose'} />
+              <img src={Close} className="MiniDialogClose" id="miniDialogButtonClose" />
             </div> : null
         }
 
-        <div className="MiniDialogInner" id={'miniDialogContent'}>
+        <div className="MiniDialogInner" id="miniDialogContent">
           {this.props.children}
         </div>
       </div>
diff --git a/src/ui/components/RightBar.tsx b/src/ui/components/RightBar.tsx
index 7966e17..f3f1ff7 100644
--- a/src/ui/components/RightBar.tsx
+++ b/src/ui/components/RightBar.tsx
@@ -16,12 +16,12 @@ export default class RightBar extends React.Component {
 
   render() {
     return (
-      <div className="RightBar" id={'rightBarContainer'}>
-        <div className="RightBarInner" id={'rightBarContent'}>
-          <div className="BarDiscord BarImg" id={'rightBarButtonDiscord'} onClick={() => this.openInBrowser(DISCORD)}>
+      <div className="RightBar" id="rightBarContainer">
+        <div className="RightBarInner" id="rightBarContent">
+          <div className="BarDiscord BarImg" id="rightBarButtonDiscord" onClick={() => this.openInBrowser(DISCORD)}>
             <img src={Discord} />
           </div>
-          <div className="BarGithub BarImg" id={'rightBarButtonGithub'} onClick={() => this.openInBrowser(GITHUB)}>
+          <div className="BarGithub BarImg" id="rightBarButtonGithub" onClick={() => this.openInBrowser(GITHUB)}>
             <img src={Github} />
           </div>
         </div>
diff --git a/src/ui/components/ServerLaunchSection.tsx b/src/ui/components/ServerLaunchSection.tsx
index 92af46f..3644310 100644
--- a/src/ui/components/ServerLaunchSection.tsx
+++ b/src/ui/components/ServerLaunchSection.tsx
@@ -196,7 +196,7 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
         {
           this.state.grasscutterEnabled && (
             <div>
-              <div className="ServerConfig" id={'serverConfigContainer'}>
+              <div className="ServerConfig" id="serverConfigContainer">
                 <TextInput id="ip" key="ip" placeholder={this.state.ipPlaceholder} onChange={this.setIp} initalValue={this.state.ip} />
                 <TextInput style={{
                   width: '10%',
@@ -210,10 +210,10 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
         }
 
 
-        <div className="ServerLaunchButtons" id={'serverLaunchContainer'}>
+        <div className="ServerLaunchButtons" id="serverLaunchContainer">
           <BigButton onClick={this.playGame} id="officialPlay">{this.state.buttonLabel}</BigButton>
           <BigButton onClick={this.launchServer} id="serverLaunch">
-            <img className="ServerIcon" id={'serverLaunchIcon'} src={Server} />
+            <img className="ServerIcon" id="serverLaunchIcon" src={Server} />
           </BigButton>
         </div>
       </div>
diff --git a/src/ui/components/TopBar.tsx b/src/ui/components/TopBar.tsx
index cbeec49..f1fac63 100644
--- a/src/ui/components/TopBar.tsx
+++ b/src/ui/components/TopBar.tsx
@@ -43,14 +43,14 @@ export default class TopBar extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="TopBar" id={'topBarContainer'} data-tauri-drag-region>
+      <div className="TopBar" id="topBarContainer" data-tauri-drag-region>
         <div id="title">
           <span data-tauri-drag-region>
             <Tr text="main.title" />
           </span>
           <span data-tauri-drag-region id="version">{this.state?.version}</span>
         </div>
-        <div className="TopBtns" id={'topBarButtonContainer'}>
+        <div className="TopBtns" id="topBarButtonContainer">
           <div id="closeBtn" onClick={this.handleClose} className='TopButton'>
             <img src={closeIcon} alt="close" />
           </div>
diff --git a/src/ui/components/common/BigButton.tsx b/src/ui/components/common/BigButton.tsx
index aa84145..fdc5690 100644
--- a/src/ui/components/common/BigButton.tsx
+++ b/src/ui/components/common/BigButton.tsx
@@ -38,7 +38,7 @@ export default class BigButton extends React.Component<IProps, IState> {
   render() {
     return (
       <div className={'BigButton ' + (this.state.disabled ? 'disabled' : '')} onClick={this.handleClick} id={this.props.id}>
-        <div className="BigButtonText" id={'commonBigButtonContent'}>{this.props.children}</div>
+        <div className="BigButtonText" id="commonBigButtonContent">{this.props.children}</div>
       </div>
     )
   }
diff --git a/src/ui/components/common/Checkbox.tsx b/src/ui/components/common/Checkbox.tsx
index 42b7487..517f269 100644
--- a/src/ui/components/common/Checkbox.tsx
+++ b/src/ui/components/common/Checkbox.tsx
@@ -40,10 +40,10 @@ export default class Checkbox extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="Checkbox" id={'commonCheckboxContainer'}>
+      <div className="Checkbox" id="commonCheckboxContainer">
         <input type='checkbox' id={this.props.id} checked={this.state.checked} onChange={this.handleChange} />
-        <label id={'commonCheckboxLabel'} htmlFor={this.props.id}>
-          <div className="CheckboxDisplay" id={'commonCheckboxDisplay'}>
+        <label id="commonCheckboxLabel" htmlFor={this.props.id}>
+          <div className="CheckboxDisplay" id="commonCheckboxDisplay">
             {this.state.checked ? <img src={checkmark} alt='Checkmark' /> : null}
           </div>
           <span>{this.props.label || ''}</span>
diff --git a/src/ui/components/common/DirInput.tsx b/src/ui/components/common/DirInput.tsx
index 77e4cb0..2af9663 100644
--- a/src/ui/components/common/DirInput.tsx
+++ b/src/ui/components/common/DirInput.tsx
@@ -100,8 +100,8 @@ export default class DirInput extends React.Component<IProps, IState> {
           }}
           customClearBehaviour={this.props.customClearBehaviour}
         />
-        <div className="FileSelectIcon" id={'commonDirInputFileSelContainer'} onClick={this.handleIconClick}>
-          <img id={'commonDirInputFileSelIcon'} src={File} />
+        <div className="FileSelectIcon" id="commonDirInputFileSelContainer" onClick={this.handleIconClick}>
+          <img id="commonDirInputFileSelIcon" src={File} />
         </div>
       </div>
     )
diff --git a/src/ui/components/common/DownloadSection.tsx b/src/ui/components/common/DownloadSection.tsx
index 2725e73..0ffac26 100644
--- a/src/ui/components/common/DownloadSection.tsx
+++ b/src/ui/components/common/DownloadSection.tsx
@@ -21,12 +21,12 @@ export default class DownloadSection extends React.Component<IProps, never> {
 
   render() {
     return (
-      <div className="DownloadSection" id={'commonDownloadSectionContainer'}>
-        <div className="DownloadTitle" id={'commonDownloadSectionTitle'}>
-          <div className="DownloadPath" id={'commonDownloadSectionPath'}>{this.getFilenameFromPath()}</div>
-          <div className="DownloadStatus" id={'commonDownloadSectionSize'}> - {this.props.downloadManager.getDownloadSize(this.props.downloadName)}</div>
+      <div className="DownloadSection" id="commonDownloadSectionContainer">
+        <div className="DownloadTitle" id="commonDownloadSectionTitle">
+          <div className="DownloadPath" id="commonDownloadSectionPath">{this.getFilenameFromPath()}</div>
+          <div className="DownloadStatus" id="commonDownloadSectionSize"> - {this.props.downloadManager.getDownloadSize(this.props.downloadName)}</div>
         </div>
-        <div className="DownloadSectionInner" id={'commonDownloadSectionProgress'}>
+        <div className="DownloadSectionInner" id="commonDownloadSectionProgress">
           <ProgressBar path={this.props.downloadName} downloadManager={this.props.downloadManager} />
         </div>
       </div>
diff --git a/src/ui/components/common/HelpButton.tsx b/src/ui/components/common/HelpButton.tsx
index c37ae00..8379453 100644
--- a/src/ui/components/common/HelpButton.tsx
+++ b/src/ui/components/common/HelpButton.tsx
@@ -36,12 +36,12 @@ export default class HelpButton extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="HelpSection" id={'commonHelpButtonContainer'}>
-        <div className="HelpButton" id={'commonHelpButtonClosed'} onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}>
-          <img id={'commonHelpButtonIcon'} src={Help} />
+      <div className="HelpSection" id="commonHelpButtonContainer">
+        <div className="HelpButton" id="commonHelpButtonClosed" onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}>
+          <img id="commonHelpButtonIcon" src={Help} />
         </div>
 
-        <div className="HelpContents" id={'commonHelpButtonContainerOpen'} style={{
+        <div className="HelpContents" id="commonHelpButtonContainerOpen" style={{
           display: this.state.opened ? 'block' : 'none'
         }}>
           <MiniDialog closeFn={this.setClosed}>
diff --git a/src/ui/components/common/MainProgressBar.tsx b/src/ui/components/common/MainProgressBar.tsx
index 060c122..9ca525b 100644
--- a/src/ui/components/common/MainProgressBar.tsx
+++ b/src/ui/components/common/MainProgressBar.tsx
@@ -49,9 +49,9 @@ export default class ProgressBar extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="MainProgressBarWrapper" id={'commonMainProgressContainer'}>
-        <div className="ProgressBar" id={'commonMainProgress'}>
-          <div className="InnerProgress" id={'commonMainProgressInner'} style={{
+      <div className="MainProgressBarWrapper" id="commonMainProgressContainer">
+        <div className="ProgressBar" id="commonMainProgress">
+          <div className="InnerProgress" id="commonMainProgressInner" style={{
             width: `${(() => {
               // Handles no files downloading
               if (this.state.files === 0) {
@@ -67,7 +67,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
           }}></div>
         </div>
 
-        <div className="MainProgressText" id={'commonMainProgressText'}>
+        <div className="MainProgressText" id="commonMainProgressText">
           <Tr text="main.files_downloading" /> {this.state.files} ({this.state.speed})
           <br />
           <Tr text="main.files_extracting" /> {this.state.extracting}
diff --git a/src/ui/components/common/ProgressBar.tsx b/src/ui/components/common/ProgressBar.tsx
index d0413ad..6a2d079 100644
--- a/src/ui/components/common/ProgressBar.tsx
+++ b/src/ui/components/common/ProgressBar.tsx
@@ -53,12 +53,12 @@ export default class ProgressBar extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="ProgressBarWrapper" id={'commonProgressBarContainer'}>
+      <div className="ProgressBarWrapper" id="commonProgressBarContainer">
         <div style={{
           width: '80%'
         }}>
-          <div className="ProgressBar" id={'commonProgressBar'}>
-            <div className="InnerProgress" id={'commonProgressBarContent'} style={{
+          <div className="ProgressBar" id="commonProgressBar">
+            <div className="InnerProgress" id="commonProgressBarContent" style={{
               width: `${(() => {
                 // Handles files with content-lengths of 0
                 if (this.state.status === 'finished') {
@@ -73,14 +73,14 @@ export default class ProgressBar extends React.Component<IProps, IState> {
               })()}%`,
             }}></div>
           </div>
-          <div className="DownloadControls" id={'commonProgressbarDownContrContainer'}>
-            <div onClick={this.stopDownload} id={'commonProgressBarDownStopContainer'} className="downloadStop">
-              <img id={'commonProgressBarDownStopIcon'} src={Stop}></img>
+          <div className="DownloadControls" id="commonProgressbarDownContrContainer">
+            <div onClick={this.stopDownload} id="commonProgressBarDownStopContainer" className="downloadStop">
+              <img id="commonProgressBarDownStopIcon" src={Stop}></img>
             </div>
           </div>
         </div>
 
-        <div className="ProgressText" id={'commonProgressBarText'}>
+        <div className="ProgressText" id="commonProgressBarText">
           {capitalize(this.state.status) || 'Waiting'}
         </div>
       </div>
diff --git a/src/ui/components/common/TextInput.tsx b/src/ui/components/common/TextInput.tsx
index d2df1ca..be79f76 100644
--- a/src/ui/components/common/TextInput.tsx
+++ b/src/ui/components/common/TextInput.tsx
@@ -44,14 +44,14 @@ export default class TextInput extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="TextInputWrapper" id={'commonTextInputContainer'} style={this.props.style || {}}>
+      <div className="TextInputWrapper" id="commonTextInputContainer" style={this.props.style || {}}>
         <input id={this.props?.id} 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)
         }} />
         {
           this.props.clearable ?
-            <div className="TextClear" id={'commonTextInputClearableContainer'} onClick={() => {
+            <div className="TextClear" id="commonTextInputClearableContainer" onClick={() => {
               // Run custom behaviour first
               if (this.props.customClearBehaviour) return this.props.customClearBehaviour()
 
@@ -61,7 +61,7 @@ export default class TextInput extends React.Component<IProps, IState> {
 
               this.forceUpdate()
             }}>
-              <img src={Close} className="TextInputClear" id={'commonTextInputClearableIcon'} />
+              <img src={Close} className="TextInputClear" id="commonTextInputClearableIcon" />
             </div> : null
         }
       </div>
diff --git a/src/ui/components/menu/Divider.tsx b/src/ui/components/menu/Divider.tsx
index 90cf57e..f1fed82 100644
--- a/src/ui/components/menu/Divider.tsx
+++ b/src/ui/components/menu/Divider.tsx
@@ -5,8 +5,8 @@ import './Divider.css'
 export default class Divider extends React.Component {
   render() {
     return (
-      <div className="Divider" id={'dividerContainer'}>
-        <div className="DividerLine" id={'dividerLine'}></div>
+      <div className="Divider" id="dividerContainer">
+        <div className="DividerLine" id="dividerLine"></div>
       </div>
     )
   }
diff --git a/src/ui/components/menu/Downloads.tsx b/src/ui/components/menu/Downloads.tsx
index c53515b..0368a46 100644
--- a/src/ui/components/menu/Downloads.tsx
+++ b/src/ui/components/menu/Downloads.tsx
@@ -190,8 +190,8 @@ export default class Downloads extends React.Component<IProps, IState> {
   render() {
     return (
       <Menu closeFn={this.props.closeFn} className="Downloads" heading="Downloads">
-        <div className='DownloadMenuSection' id={'downloadMenuContainerGCStable'}>
-          <div className='DownloadLabel' id={'downloadMenuLabelGCStable'}>
+        <div className='DownloadMenuSection' id="downloadMenuContainerGCStable">
+          <div className='DownloadLabel' id="downloadMenuLabelGCStable">
             <Tr text={
               this.state.grasscutter_set ? 'downloads.grasscutter_stable' : 'downloads.grasscutter_stable_update'
             } />
@@ -199,14 +199,14 @@ export default class Downloads extends React.Component<IProps, IState> {
               <Tr text="help.gc_stable_jar" />
             </HelpButton>
           </div>
-          <div className='DownloadValue' id={'downloadMenuButtonGCStable'}>
+          <div className='DownloadValue' id="downloadMenuButtonGCStable">
             <BigButton disabled={this.state.grasscutter_downloading} onClick={this.downloadGrasscutterStable} id="grasscutterStableBtn" >
               <Tr text="components.download" />
             </BigButton>
           </div>
         </div>
-        <div className='DownloadMenuSection' id={'downloadMenuContainerGCDev'}>
-          <div className='DownloadLabel' id={'downloadMenuLabelGCDev'}>
+        <div className='DownloadMenuSection' id="downloadMenuContainerGCDev">
+          <div className='DownloadLabel' id="downloadMenuLabelGCDev">
             <Tr text={
               this.state.grasscutter_set ? 'downloads.grasscutter_latest' : 'downloads.grasscutter_latest_update'
             } />
@@ -214,7 +214,7 @@ export default class Downloads extends React.Component<IProps, IState> {
               <Tr text="help.gc_dev_jar" />
             </HelpButton>
           </div>
-          <div className='DownloadValue' id={'downloadMenuButtonGCDev'}>
+          <div className='DownloadValue' id="downloadMenuButtonGCDev">
             <BigButton disabled={this.state.grasscutter_downloading} onClick={this.downloadGrasscutterLatest} id="grasscutterLatestBtn" >
               <Tr text="components.download" />
             </BigButton>
@@ -223,8 +223,8 @@ export default class Downloads extends React.Component<IProps, IState> {
 
         <Divider />
 
-        <div className='DownloadMenuSection' id={'downloadMenuContainerGCStableData'}>
-          <div className='DownloadLabel' id={'downloadMenuLabelGCStableData'}>
+        <div className='DownloadMenuSection' id="downloadMenuContainerGCStableData">
+          <div className='DownloadLabel' id="downloadMenuLabelGCStableData">
             <Tr text={
               this.state.grasscutter_set ? 'downloads.grasscutter_stable_data' : 'downloads.grasscutter_stable_data_update'
             } />
@@ -232,14 +232,14 @@ export default class Downloads extends React.Component<IProps, IState> {
               <Tr text="help.gc_stable_data" />
             </HelpButton>
           </div>
-          <div className='DownloadValue' id={'downloadMenuButtonGCStableData'}>
+          <div className='DownloadValue' id="downloadMenuButtonGCStableData">
             <BigButton disabled={this.state.repo_downloading} onClick={this.downloadGrasscutterStableRepo} id="grasscutterStableRepo" >
               <Tr text="components.download" />
             </BigButton>
           </div>
         </div>
-        <div className='DownloadMenuSection' id={'downloadMenuContainerGCDevData'}>
-          <div className='DownloadLabel' id={'downloadMenuLabelGCDevData'}>
+        <div className='DownloadMenuSection' id="downloadMenuContainerGCDevData">
+          <div className='DownloadLabel' id="downloadMenuLabelGCDevData">
             <Tr text={
               this.state.grasscutter_set ? 'downloads.grasscutter_latest_data' : 'downloads.grasscutter_latest_data_update'
             } />
@@ -247,7 +247,7 @@ export default class Downloads extends React.Component<IProps, IState> {
               <Tr text="help.gc_dev_data" />
             </HelpButton>
           </div>
-          <div className='DownloadValue' id={'downloadMenuButtonGCDevData'}>
+          <div className='DownloadValue' id="downloadMenuButtonGCDevData">
             <BigButton disabled={this.state.repo_downloading} onClick={this.downloadGrasscutterStableRepo} id="grasscutterDevRepo" >
               <Tr text="components.download" />
             </BigButton>
@@ -256,14 +256,14 @@ export default class Downloads extends React.Component<IProps, IState> {
 
         <Divider />
 
-        <div className='DownloadMenuSection' id={'downloadMenuContainerResources'}>
-          <div className='DownloadLabel' id={'downloadMenuLabelResources'}>
+        <div className='DownloadMenuSection' id="downloadMenuContainerResources">
+          <div className='DownloadLabel' id="downloadMenuLabelResources">
             <Tr text="downloads.resources" />
             <HelpButton>
               <Tr text="help.resources" />
             </HelpButton>
           </div>
-          <div className='DownloadValue' id={'downloadMenuButtonResources'}>
+          <div className='DownloadValue' id="downloadMenuButtonResources">
             <BigButton disabled={this.state.resources_downloading || !this.state.grasscutter_set || this.state.resources_exist} onClick={this.downloadResources} id="resourcesBtn" >
               <Tr text="components.download" />
             </BigButton>
diff --git a/src/ui/components/menu/Menu.tsx b/src/ui/components/menu/Menu.tsx
index d005c3c..eb723ab 100644
--- a/src/ui/components/menu/Menu.tsx
+++ b/src/ui/components/menu/Menu.tsx
@@ -17,14 +17,14 @@ export default class Menu extends React.Component<IProps, never> {
 
   render() {
     return (
-      <div className={'Menu ' + this.props.className} id={'menuContainer'}>
-        <div className='MenuTop' id={'menuContainerTop'}>
-          <div className="MenuHeading" id={'menuHeading'}>{this.props.heading}</div>
-          <div className="MenuExit" id={'menuButtonCloseContainer'} onClick={this.props.closeFn}>
-            <img src={Close} className="MenuClose" id={'menuButtonCloseIcon'} />
+      <div className={'Menu ' + this.props.className} id="menuContainer">
+        <div className='MenuTop' id="menuContainerTop">
+          <div className="MenuHeading" id="menuHeading">{this.props.heading}</div>
+          <div className="MenuExit" id="menuButtonCloseContainer" onClick={this.props.closeFn}>
+            <img src={Close} className="MenuClose" id="menuButtonCloseIcon" />
           </div>
         </div>
-        <div className='MenuInner' id={'menuContent'}>
+        <div className='MenuInner' id="menuContent">
           {this.props.children}
         </div>
       </div>
diff --git a/src/ui/components/menu/Options.tsx b/src/ui/components/menu/Options.tsx
index 86ab644..4341fc5 100644
--- a/src/ui/components/menu/Options.tsx
+++ b/src/ui/components/menu/Options.tsx
@@ -170,27 +170,27 @@ export default class Options extends React.Component<IProps, IState> {
   render() {
     return (
       <Menu closeFn={this.props.closeFn} className="Options" heading="Options">
-        <div className='OptionSection' id={'menuOptionsContainerGameExec'}>
-          <div className='OptionLabel' id={'menuOptionsLabelGameExec'}>
+        <div className='OptionSection' id="menuOptionsContainerGameExec">
+          <div className='OptionLabel' id="menuOptionsLabelGameExec">
             <Tr text="options.game_exec" />
           </div>
-          <div className='OptionValue' id={'menuOptionsDirGameExec'}>
+          <div className='OptionValue' id="menuOptionsDirGameExec">
             <DirInput onChange={this.setGameExec} value={this.state?.game_install_path} extensions={['exe']} />
           </div>
         </div>
-        <div className='OptionSection' id={'menuOptionsContainerGCJar'}>
-          <div className='OptionLabel' id={'menuOptionsLabelGCJar'}>
+        <div className='OptionSection' id="menuOptionsContainerGCJar">
+          <div className='OptionLabel' id="menuOptionsLabelGCJar">
             <Tr text="options.grasscutter_jar" />
           </div>
-          <div className='OptionValue' id={'menuOptionsDirGCJar'}>
+          <div className='OptionValue' id="menuOptionsDirGCJar">
             <DirInput onChange={this.setGrasscutterJar} value={this.state?.grasscutter_path} extensions={['jar']} />
           </div>
         </div>
-        <div className='OptionSection' id={'menuOptionsContainerToggleEnc'}>
-          <div className='OptionLabel' id={'menuOptionsLabelToggleEnc'}>
+        <div className='OptionSection' id="menuOptionsContainerToggleEnc">
+          <div className='OptionLabel' id="menuOptionsLabelToggleEnc">
             <Tr text="options.toggle_encryption" />
           </div>
-          <div className='OptionValue' id={'menuOptionsButtonToggleEnc'}>
+          <div className='OptionValue' id="menuOptionsButtonToggleEnc">
             <BigButton onClick={this.toggleEncryption} id="toggleEnc">
               {
                 this.state.encryption
@@ -201,23 +201,23 @@ export default class Options extends React.Component<IProps, IState> {
 
         <Divider />
         
-        <div className='OptionSection' id={'menuOptionsContainerGCWGame'}>
-          <div className='OptionLabel' id={'menuOptionsLabelGCWDame'}>
+        <div className='OptionSection' id="menuOptionsContainerGCWGame">
+          <div className='OptionLabel' id="menuOptionsLabelGCWDame">
             <Tr text="options.grasscutter_with_game" />
           </div>
-          <div className='OptionValue' id={'menuOptionsCheckboxGCWGame'}>
+          <div className='OptionValue' id="menuOptionsCheckboxGCWGame">
             <Checkbox onChange={this.toggleGrasscutterWithGame} checked={this.state?.grasscutter_with_game} id="gcWithGame" />
           </div>
         </div>
 
         <Divider />
 
-        <div className='OptionSection' id={'menuOptionsContainerThemes'}>
-          <div className='OptionLabel' id={'menuOptionsLabelThemes'}>
+        <div className='OptionSection' id="menuOptionsContainerThemes">
+          <div className='OptionLabel' id="menuOptionsLabelThemes">
             <Tr text="options.theme" />
           </div>
-          <div className='OptionValue' id={'menuOptionsSelectThemes'}>
-            <select value={this.state.theme} id={'menuOptionsSelectMenuThemes'} onChange={(event) => {
+          <div className='OptionValue' id="menuOptionsSelectThemes">
+            <select value={this.state.theme} id="menuOptionsSelectMenuThemes" onChange={(event) => {
               this.setTheme(event.target.value)
             }}>
               {this.state.themes.map(t => (
@@ -234,20 +234,20 @@ export default class Options extends React.Component<IProps, IState> {
 
         <Divider />
 
-        <div className='OptionSection' id={'menuOptionsContainerJavaPath'}>
-          <div className='OptionLabel' id={'menuOptionsLabelJavaPath'}>
+        <div className='OptionSection' id="menuOptionsContainerJavaPath">
+          <div className='OptionLabel' id="menuOptionsLabelJavaPath">
             <Tr text="options.java_path" />
           </div>
-          <div className='OptionValue' id={'menuOptionsDirJavaPath'}>
+          <div className='OptionValue' id="menuOptionsDirJavaPath">
             <DirInput onChange={this.setJavaPath} value={this.state?.java_path} extensions={['exe']} />
           </div>
         </div>
 
-        <div className='OptionSection' id={'menuOptionsContainerBG'}>
-          <div className='OptionLabel' id={'menuOptionsLabelBG'}>
+        <div className='OptionSection' id="menuOptionsContainerBG">
+          <div className='OptionLabel' id="menuOptionsLabelBG">
             <Tr text="options.background" />
           </div>
-          <div className='OptionValue' id={'menuOptionsDirBG'}>
+          <div className='OptionValue' id="menuOptionsDirBG">
             <DirInput
               onChange={this.setCustomBackground}
               value={this.state?.bg_url_or_path}
@@ -262,12 +262,12 @@ export default class Options extends React.Component<IProps, IState> {
           </div>
         </div>
 
-        <div className='OptionSection' id={'menuOptionsContainerLang'}>
-          <div className='OptionLabel' id={'menuOptionsLabelLang'}>
+        <div className='OptionSection' id="menuOptionsContainerLang">
+          <div className='OptionLabel' id="menuOptionsLabelLang">
             <Tr text="options.language" />
           </div>
-          <div className='OptionValue' id={'menuOptionsSelectLang'}>
-            <select value={this.state.current_language} id={'menuOptionsSelectMenuLang'} onChange={(event) => {
+          <div className='OptionValue' id="menuOptionsSelectLang">
+            <select value={this.state.current_language} id="menuOptionsSelectMenuLang" onChange={(event) => {
               this.setLanguage(event.target.value)
             }}>
               {this.state.language_options.map(lang => (
diff --git a/src/ui/components/news/NewsSection.tsx b/src/ui/components/news/NewsSection.tsx
index 9b6eafe..863bded 100644
--- a/src/ui/components/news/NewsSection.tsx
+++ b/src/ui/components/news/NewsSection.tsx
@@ -68,9 +68,9 @@ export default class NewsSection extends React.Component<IProps, IState> {
       const commitsList = obj.slice(0, 10)
       const commitsListHtml = commitsList.map((commit: any) => {
         return (
-          <tr className="Commit" id={'newsCommitsTable'} key={commit.sha}>
-            <td className="CommitAuthor" id={'newsCommitsAuthor'}><span>{commit.commit.author.name}</span></td>
-            <td className="CommitMessage" id={'newsCommitsCommitMessage'}><span>{commit.commit.message}</span></td>
+          <tr className="Commit" id="newsCommitsTable" key={commit.sha}>
+            <td className="CommitAuthor" id="newsCommitsAuthor"><span>{commit.commit.author.name}</span></td>
+            <td className="CommitMessage" id="newsCommitsCommitMessage"><span>{commit.commit.message}</span></td>
           </tr>
         )
       })
@@ -108,8 +108,8 @@ export default class NewsSection extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="NewsSection" id={'newsContainer'}>
-        <div className="NewsTabs" id={'newsTabsContainer'}>
+      <div className="NewsSection" id="newsContainer">
+        <div className="NewsTabs" id="newsTabsContainer">
           <div className={'NewsTab ' + (this.state.selected === 'commits' ? 'selected' : '')} id="commits" onClick={() => this.setSelected('commits')}>
             <Tr text="news.latest_commits" />
           </div>
@@ -117,7 +117,7 @@ export default class NewsSection extends React.Component<IProps, IState> {
             <Tr text="news.latest_version" />
           </div>
         </div>
-        <table className="NewsContent" id={'newsContent'}>
+        <table className="NewsContent" id="newsContent">
             <tbody>
                 {this.state.news}
             </tbody>