help and box shadows

src-tauri/lang/en.json

@@ -8,7 +8,8 @@
     "port_placeholder": "Port...",
     "files_downloading": "Files Downloading: ",
     "files_extracting": "Files Extracting: ",
-    "port_help_text": "Ensure this is the Dispatch server port, not the Game server port. This is almost always '443'."
+    "port_help_text": "Ensure this is the Dispatch server port, not the Game server port. This is almost always '443'.",
+    "game_help_text": "You do not need to use a seperate copy to play with Grasscutter. This is for either downgrading to 2.6 or if you do not have the game installed."
   },
   "options": {
     "game_exec": "Set Game Executable",

src/ui/components/MiniDialog.css

@@ -9,6 +9,8 @@
   background: #fff;
   padding: 20px;
   border-radius: 10px;
+
+  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
 }
 
 .MiniDialogTop {

src/ui/components/common/HelpButton.tsx

@@ -5,7 +5,8 @@ import Help from '../../../resources/icons/help.svg'
 import MiniDialog from '../MiniDialog'
 
 interface IProps {
-  contents: string
+  children?: React.ReactNode[] | React.ReactNode;
+  contents?: string
   id?: string
 }
 
@@ -44,7 +45,7 @@ export default class HelpButton extends React.Component<IProps, IState> {
           display: this.state.opened ? 'block' : 'none'
         }}>
           <MiniDialog closeFn={this.setClosed}>
-            {this.props.contents}
+            {this.props.contents || this.props.children}
           </MiniDialog>
         </div>
       </div>

src/ui/components/menu/Game.css

@@ -4,25 +4,34 @@
 }
 
 .GameDownload {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
   padding: 18px;
 }
 
+.GameDownload .MiniDialog {
+  height: 30%;
+}
+
 .GameDownload .BigButton {
   height: 50px;
 }
 
+.GameDownload .HelpButton img {
+  filter: invert(0%) sepia(91%) saturate(7464%) hue-rotate(101deg) brightness(0%) contrast(107%);
+}
+
 .GameDownloadDir {
   width: 70%;
 }
 
+.GameDownloadDir .DirInput .TextInputWrapper,
 .GameDownloadDir .DirInput {
   width: 100%;
 }
 
-.GameDownloadDir .DirInput .TextInputWrapper {
-  width: 100%;
-}
-
 .GameDownloadDir .DirInput .TextInputWrapper input {
   width: 80%;
 }

src/ui/components/menu/Game.tsx

@@ -6,6 +6,7 @@ import DownloadHandler from '../../../utils/download'
 import './Game.css'
 import DirInput from '../common/DirInput'
 import BigButton from '../common/BigButton'
+import HelpButton from '../common/HelpButton'
 
 interface IProps {
   closeFn: () => void;
@@ -44,6 +45,9 @@ export default class Downloads extends React.Component<IProps, IState> {
       <Menu heading='Download Game' closeFn={this.props.closeFn} className="GameDownloadMenu">
         <div className="GameDownload">
           <BigButton id="downloadGameBtn" onClick={this.downloadGame}>Download Game</BigButton>
+          <HelpButton>
+            <Tr text="main.game_help_text" />
+          </HelpButton>
         </div>
         
         <div className="GameDownloadDir">

src/ui/components/menu/Menu.css

@@ -12,6 +12,8 @@
   background: #fff;
   padding: 20px;
   border-radius: 10px;
+  
+  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
 }
 
 .MenuInner {