diff --git a/public/icons/badge_check.svg b/public/icons/badge_check.svg new file mode 100644 index 00000000..508da675 --- /dev/null +++ b/public/icons/badge_check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/ip.svg b/public/icons/ip.svg index 951af775..2d8b5687 100644 --- a/public/icons/ip.svg +++ b/public/icons/ip.svg @@ -1,4 +1 @@ - - - - \ No newline at end of file + \ No newline at end of file diff --git a/public/icons/shield_question.svg b/public/icons/shield_question.svg new file mode 100644 index 00000000..1512d9e5 --- /dev/null +++ b/public/icons/shield_question.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/constants/images.ts b/src/constants/images.ts index 9b1c55e4..a184b69a 100644 --- a/src/constants/images.ts +++ b/src/constants/images.ts @@ -1,6 +1,8 @@ export const images = { logoDark: "logo-dark-trans.svg", icons: { + badgeCheck: "icons/badge_check.svg", + shieldQuestion: "icons/shield_question.svg", settings: "icons/settings.svg", info: "icons/info.png", nickname: "icons/nickname.svg", diff --git a/src/constants/theme.ts b/src/constants/theme.ts index ce99969f..5607b26d 100644 --- a/src/constants/theme.ts +++ b/src/constants/theme.ts @@ -16,17 +16,17 @@ export const darkThemeColors: ThemeColors = { textSecondary: "#FFFFFF40", textPlaceholder: "#909090", itemBackgroundColor: "#222227", - textInputBackgroundColor: "#16161A", + textInputBackgroundColor: "#222227", serverListItemBackgroundColor: "#303038", }; export const lightThemeColors: ThemeColors = { primary: "#897AF1", - secondary: "#FFFFFF", + secondary: "#E8EBEE", textPrimary: "#1A1A1E", textSecondary: "#1A1A1E80", textPlaceholder: "#6D7071", - itemBackgroundColor: "#F3F6FC", - textInputBackgroundColor: "#F3F6FC", + itemBackgroundColor: "#DCE0E5", + textInputBackgroundColor: "#DCE0E5", serverListItemBackgroundColor: "#E9ECF2", }; diff --git a/src/containers/MainBody/BottomBar.tsx b/src/containers/MainBody/BottomBar.tsx index 979d89bf..3b7e6214 100644 --- a/src/containers/MainBody/BottomBar.tsx +++ b/src/containers/MainBody/BottomBar.tsx @@ -1,22 +1,23 @@ +import Chart from "../PingChart"; +import Icon from "../../components/Icon"; +import Text from "../../components/Text"; import { Clipboard } from "@react-native-clipboard/clipboard/dist/Clipboard.web"; import { shell } from "@tauri-apps/api"; import { t } from "i18next"; import { useMemo } from "react"; import { StyleSheet, TouchableOpacity, View } from "react-native"; -import Icon from "../../components/Icon"; -import Text from "../../components/Text"; import { images } from "../../constants/images"; import { usePersistentServers, useServers } from "../../states/servers"; import { useTheme } from "../../states/theme"; import { validateWebUrl } from "../../utils/helpers"; import { sc } from "../../utils/sizeScaler"; -import Chart from "../PingChart"; const PropInfo = (props: { glow?: boolean; text: string; icon: string; iconSize: number; + iconColor?: string; iconTitle: string; buttonText?: string; buttonOnPress?: () => void; @@ -34,7 +35,7 @@ const PropInfo = (props: { title={props.iconTitle} image={props.icon} size={props.iconSize} - // color={theme.textSecondary} + color={props.iconColor || theme.textSecondary} /> ) : ( @@ -42,7 +43,7 @@ const PropInfo = (props: { title={props.iconTitle} image={props.icon} size={props.iconSize} - color={theme.textSecondary} + color={props.iconColor || theme.textSecondary} /> ); @@ -133,16 +134,22 @@ const BottomBar = () => { style={{ flex: 0.6, top: sc(5), justifyContent: "space-between" }} > { ) : ( { if (server.hasPassword) { return "#eb4034"; } else if (server.ping < 9999) { - return "#7AF1AA"; + return themeType == "dark" ? "#7AF1AA" : "#13B955"; + } else { + return themeType == "dark" ? "#6D7071" : "#6D7071"; + } + }; + + const getServerStatusIcon = () => { + if (server.hasPassword) { + return images.icons.locked; + } else if (server.ping < 9999) { + return images.icons.unlocked; } else { - return "#36363F"; + return images.icons.shieldQuestion; } }; @@ -43,7 +53,7 @@ const ServerItem = memo((props: IProps) => { if (server.hasPassword) { return "#eb40343A"; } else if (server.ping < 9999) { - return "#7AF1AA1A"; + return themeType == "dark" ? "#7AF1AA1A" : "#13B9551C"; } else { return theme.itemBackgroundColor; } @@ -97,9 +107,7 @@ const ServerItem = memo((props: IProps) => { @@ -137,8 +145,9 @@ const ServerItem = memo((props: IProps) => { diff --git a/src/containers/Settings/Tab/Advanced.tsx b/src/containers/Settings/Tab/Advanced.tsx index d7b32dc2..7764ce42 100644 --- a/src/containers/Settings/Tab/Advanced.tsx +++ b/src/containers/Settings/Tab/Advanced.tsx @@ -1,10 +1,11 @@ -import { t } from "i18next"; -import { Pressable, StyleSheet, View } from "react-native"; import CheckBox from "../../../components/CheckBox"; import Text from "../../../components/Text"; +import { t } from "i18next"; +import { Pressable, StyleSheet, TouchableOpacity, View } from "react-native"; import { useGenericPersistentState } from "../../../states/genericStates"; import { useTheme } from "../../../states/theme"; import { sc } from "../../../utils/sizeScaler"; +import { stateStorage } from "../../../utils/stateStorage"; const Advanced = () => { const { theme } = useTheme(); @@ -26,6 +27,7 @@ const Advanced = () => { height: "100%", width: "100%", marginTop: sc(10), + gap: 8, }} > { toggleDiscordStatus(!shouldUpdateDiscordStatus); }} > - + {`${t("settings_advanced_discord_status")} ${t( "settings_advanced_discord_status_requires_restart" )}`} + { + stateStorage.clear(); + localStorage.clear(); + window.location.reload(); + }} + > + + {t("settings_reset_application_data")} + + diff --git a/src/containers/Settings/Tab/General.tsx b/src/containers/Settings/Tab/General.tsx index 7f4402f0..9704ef8d 100644 --- a/src/containers/Settings/Tab/General.tsx +++ b/src/containers/Settings/Tab/General.tsx @@ -1,15 +1,14 @@ +import Text from "../../../components/Text"; import { invoke, shell } from "@tauri-apps/api"; import { open } from "@tauri-apps/api/dialog"; import { t } from "i18next"; import { StyleSheet, TextInput, TouchableOpacity, View } from "react-native"; -import Text from "../../../components/Text"; import { useAppState } from "../../../states/app"; import { usePersistentServers } from "../../../states/servers"; import { useSettings } from "../../../states/settings"; import { useTheme } from "../../../states/theme"; import { checkDirectoryValidity } from "../../../utils/game"; import { Log } from "../../../utils/logger"; -import { stateStorage } from "../../../utils/stateStorage"; import { sc } from "../../../utils/sizeScaler"; import { Server } from "../../../utils/types"; @@ -136,7 +135,7 @@ const General = () => { style={[ styles.browseButton, { - backgroundColor: `${theme.primary}BB`, + backgroundColor: `${theme.primary}`, borderColor: theme.textSecondary, }, ]} @@ -151,13 +150,13 @@ const General = () => { style={[ styles.importButton, { - backgroundColor: `${theme.primary}BB`, + backgroundColor: `${theme.itemBackgroundColor}`, borderColor: theme.textSecondary, }, ]} onPress={() => importDataFromSAMP()} > - + {t("settings_import_nickname_gta_path_from_samp")} @@ -165,16 +164,16 @@ const General = () => { style={[ styles.importButton, { - backgroundColor: `${theme.primary}BB`, + backgroundColor: `${theme.itemBackgroundColor}`, }, ]} onPress={() => importFavListFromSAMP()} > - + {t("settings_import_samp_favorite_list")} - { {t("settings_reset_application_data")} - + */} {updateInfo && updateInfo.version != version && ( { /> {renderTab()} - - {t("settings_credits_made_by")}{" "} - shell.open("https://open.mp/")} - color={theme.primary} - > - open.mp - {" "} - |{" "} + + + {t("settings_credits_made_by")} + shell.open("https://open.mp/")} + color={theme.primary} + > + {" open.mp"} + + @@ -93,8 +99,8 @@ const SettingsModal = () => { color={theme.primary} > {t("settings_credits_view_source_on_github")} - {" "} - | v{nativeAppVersion} Build {version} + + v{nativeAppVersion} Build {version}