diff --git a/src-tauri/lang/en.json b/src-tauri/lang/en.json index f8fd599..5625501 100644 --- a/src-tauri/lang/en.json +++ b/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", diff --git a/src/ui/components/MiniDialog.css b/src/ui/components/MiniDialog.css index 8099bd1..1a7e0ed 100644 --- a/src/ui/components/MiniDialog.css +++ b/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 { diff --git a/src/ui/components/common/HelpButton.tsx b/src/ui/components/common/HelpButton.tsx index f357be0..3baf1bb 100644 --- a/src/ui/components/common/HelpButton.tsx +++ b/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 { display: this.state.opened ? 'block' : 'none' }}> - {this.props.contents} + {this.props.contents || this.props.children} diff --git a/src/ui/components/menu/Game.css b/src/ui/components/menu/Game.css index 12ef254..6308735 100644 --- a/src/ui/components/menu/Game.css +++ b/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%; } \ No newline at end of file diff --git a/src/ui/components/menu/Game.tsx b/src/ui/components/menu/Game.tsx index 2eb7c46..721077c 100644 --- a/src/ui/components/menu/Game.tsx +++ b/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 {
Download Game + + +
diff --git a/src/ui/components/menu/Menu.css b/src/ui/components/menu/Menu.css index b6be98a..f615c18 100644 --- a/src/ui/components/menu/Menu.css +++ b/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 {