UX improvements

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",

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",
 };

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,15 +35,15 @@ const PropInfo = (props: {
         title={props.iconTitle}
         image={props.icon}
         size={props.iconSize}
-        // color={theme.textSecondary}
+        color={props.iconColor || theme.textSecondary}
       />
     </div>
   ) : (
     <Icon
       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" }}
         >
           <PropInfo
-            iconTitle={server.usingOmp ? t("openmp_server") : ""}
-            icon={server.usingOmp ? images.icons.omp : images.icons.internet}
+            iconTitle={
+              server.usingOmp ? t("openmp_server") : "Server not using openmp"
+            }
+            icon={
+              server.usingOmp ? images.icons.badgeCheck : images.icons.internet
+            }
             iconSize={server.usingOmp ? sc(20) : sc(16)}
+            iconColor={server.usingOmp ? theme.primary : theme.textPlaceholder}
             text={server.hostname}
             glow={server.usingOmp}
           />
           <View style={{ flexDirection: "row", flex: 1, alignItems: "center" }}>
             <PropInfo
-              iconTitle={""}
+              iconTitle={"Server IP"}
               icon={images.icons.ip}
+              iconColor={theme.textPlaceholder}
               iconSize={sc(14)}
               text={`${server.ip}:${server.port}`}
               buttonText={t("copy")}
@@ -204,7 +211,7 @@ const BottomBar = () => {
             </TouchableOpacity>
           ) : (
             <PropInfo
-              iconTitle={""}
+              iconTitle={"Game Mode"}
               icon={images.icons.mode}
               iconSize={sc(17)}
               text={`${server.gameMode}`}

src/containers/MainBody/ServerList/Item.tsx

@@ -1,8 +1,8 @@
+import Icon from "../../../components/Icon";
+import Text from "../../../components/Text";
 import { t } from "i18next";
 import { memo, useRef } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
-import Icon from "../../../components/Icon";
-import Text from "../../../components/Text";
 import { images } from "../../../constants/images";
 import { useContextMenu } from "../../../states/contextMenu";
 import { useJoinServerPrompt } from "../../../states/joinServerPrompt";
@@ -33,17 +33,27 @@ const ServerItem = memo((props: IProps) => {
     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;
     }
   };
 
   const getServerStatusIconViewBackgroundColor = () => {
     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) => {
           <Icon
             svg
             title={getServerStatusIconTitle()}
-            image={
-              server.hasPassword ? images.icons.locked : images.icons.unlocked
-            }
+            image={getServerStatusIcon()}
             size={sc(20)}
             color={getServerStatusIconColor()}
           />
@@ -137,8 +145,9 @@ const ServerItem = memo((props: IProps) => {
               <View style={[styles.iconContainer, { marginHorizontal: sc(3) }]}>
                 <Icon
                   title={t("openmp_server")}
-                  image={images.icons.omp}
+                  image={images.icons.badgeCheck}
                   size={sc(23)}
+                  color={theme.primary}
                 />
               </View>
             </div>

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,
         }}
       >
         <Pressable
@@ -37,13 +39,33 @@ const Advanced = () => {
             toggleDiscordStatus(!shouldUpdateDiscordStatus);
           }}
         >
-          <CheckBox value={shouldUpdateDiscordStatus} style={{ marginRight: sc(7) }} />
+          <CheckBox
+            value={shouldUpdateDiscordStatus}
+            style={{ marginRight: sc(7) }}
+          />
           <Text semibold color={theme.textPrimary} size={2}>
             {`${t("settings_advanced_discord_status")} ${t(
               "settings_advanced_discord_status_requires_restart"
             )}`}
           </Text>
         </Pressable>
+        <TouchableOpacity
+          style={[
+            styles.resetButton,
+            {
+              backgroundColor: "red",
+            },
+          ]}
+          onPress={() => {
+            stateStorage.clear();
+            localStorage.clear();
+            window.location.reload();
+          }}
+        >
+          <Text semibold color={"#FFFFFF"} size={2}>
+            {t("settings_reset_application_data")}
+          </Text>
+        </TouchableOpacity>
       </View>
       <View style={styles.pathInputContainer}></View>
     </View>

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,30 +150,30 @@ const General = () => {
         style={[
           styles.importButton,
           {
-            backgroundColor: `${theme.primary}BB`,
+            backgroundColor: `${theme.itemBackgroundColor}`,
             borderColor: theme.textSecondary,
           },
         ]}
         onPress={() => importDataFromSAMP()}
       >
-        <Text semibold color={"#FFFFFF"} size={2}>
+        <Text semibold color={theme.textPrimary} size={2}>
           {t("settings_import_nickname_gta_path_from_samp")}
         </Text>
       </TouchableOpacity>
       <TouchableOpacity
         style={[
           styles.importButton,
           {
-            backgroundColor: `${theme.primary}BB`,
+            backgroundColor: `${theme.itemBackgroundColor}`,
           },
         ]}
         onPress={() => importFavListFromSAMP()}
       >
-        <Text semibold color={"#FFFFFF"} size={2}>
+        <Text semibold color={theme.textPrimary} size={2}>
           {t("settings_import_samp_favorite_list")}
         </Text>
       </TouchableOpacity>
-      <TouchableOpacity
+      {/* <TouchableOpacity
         style={[
           styles.resetButton,
           {
@@ -190,7 +189,7 @@ const General = () => {
         <Text semibold color={"#FFFFFF"} size={2}>
           {t("settings_reset_application_data")}
         </Text>
-      </TouchableOpacity>
+      </TouchableOpacity> */}
       <View style={styles.appInfoContainer}>
         {updateInfo && updateInfo.version != version && (
           <Text