help text for some options

src-tauri/lang/en.json

@@ -63,7 +63,11 @@
     "gc_dev_jar": "Download the latest development Grasscutter build, which includes jar file and data files.",
     "gc_stable_data": "Download the current stable Grasscutter data files, which does not come with a jar file. This is useful for updating.",
     "gc_dev_data": "Download the latest development Grasscutter data files, which does not come with a jar file. This is useful for updating.",
-    "resources": "These are also required to run a Grasscutter server. This button will be grey if you have an existing resources folder with contents inside"
+    "encryption": "This should usually be disabled.",
+    "resources": "These are also required to run a Grasscutter server. This button will be grey if you have an existing resources folder with contents inside",
+    "emergency_metadata": "In case something went wrong, restore your metadata to the latest official versions metadata.",
+    "use_proxy": "Use the Cultivation internal proxy. You should have this enabled unless you use something like Fiddler",
+    "patch_metadata": "Patch and unpatch your game metadata automatically. Unless playing with old/non-official versions, or you have manually patched your metadata, this should be enabled."
   },
   "swag": {
     "akebi": "Set Akebi Executable",

src/ui/components/menu/Options.css

@@ -16,3 +16,7 @@
 .OptionSection .BigButtonText {
   font-size: 12px;
 }
+
+.OptionSection .HelpButton img {
+  filter: invert(0%) sepia(91%) saturate(7464%) hue-rotate(101deg) brightness(0%) contrast(107%);
+}

src/ui/components/menu/Options.tsx

@@ -14,6 +14,7 @@ import './Options.css'
 import BigButton from '../common/BigButton'
 import DownloadHandler from '../../../utils/download'
 import * as meta from '../../../utils/metadata'
+import HelpButton from '../common/HelpButton'
 
 interface IProps {
   closeFn: () => void
@@ -247,6 +248,7 @@ export default class Options extends React.Component<IProps, IState> {
         <div className="OptionSection" id="menuOptionsContainermetaDownload">
           <div className="OptionLabel" id="menuOptionsLabelmetaDownload">
             <Tr text="options.recover_metadata" />
+            <HelpButton contents="help.emergency_metadata" />
           </div>
           <div className="OptionValue" id="menuOptionsButtonmetaDownload">
             <BigButton onClick={this.restoreMetadata} id="metaDownload">
@@ -257,6 +259,7 @@ export default class Options extends React.Component<IProps, IState> {
         <div className="OptionSection" id="menuOptionsContainerPatchMeta">
           <div className="OptionLabel" id="menuOptionsLabelPatchMeta">
             <Tr text="options.patch_metadata" />
+            <HelpButton contents="help.patch_metadata" />
           </div>
           <div className="OptionValue" id="menuOptionsCheckboxPatchMeta">
             <Checkbox onChange={this.toggleMetadata} checked={this.state?.patch_metadata} id="patchMeta" />
@@ -265,6 +268,7 @@ export default class Options extends React.Component<IProps, IState> {
         <div className="OptionSection" id="menuOptionsContainerUseProxy">
           <div className="OptionLabel" id="menuOptionsLabelUseProxy">
             <Tr text="options.use_proxy" />
+            <HelpButton contents="help.use_proxy" />
           </div>
           <div className="OptionValue" id="menuOptionsCheckboxUseProxy">
             <Checkbox onChange={this.toggleProxy} checked={this.state?.use_internal_proxy} id="useProxy" />
@@ -284,6 +288,7 @@ export default class Options extends React.Component<IProps, IState> {
         <div className="OptionSection" id="menuOptionsContainerToggleEnc">
           <div className="OptionLabel" id="menuOptionsLabelToggleEnc">
             <Tr text="options.toggle_encryption" />
+            <HelpButton contents="help.encryption" />
           </div>
           <div className="OptionValue" id="menuOptionsButtonToggleEnc">
             <BigButton onClick={this.toggleEncryption} id="toggleEnc">