fix: Minor bug fixes and cleanup

Author: tjtanjin

public/locales/en/components/userprofile.json

@@ -17,10 +17,11 @@
 		"header": "Plugins",
     "favorite": "Favorite",
     "personal": "Personal",
-		"empty_themes": "You have not created any plugins!",
+		"empty_personal_plugins": "You have not created any plugins!",
+    "empty_favorited_plugins": "You have not favorited any plugins!",
     "prompt_action": "Browse plugins or create your own",
-		"browse_themes": "Browse Plugins",
-		"build_theme": "Build A Plugin"
+		"browse_plugins": "Browse Plugins",
+		"build_plugin": "Build A Plugin"
 	},
   "user_favorite_theme_card": {
     "view_theme": "View Theme",
@@ -34,7 +35,8 @@
 		"header": "Themes",
     "favorite": "Favorite",
     "personal": "Personal",
-		"empty_themes": "You have not created any themes!",
+		"empty_personal_themes": "You have not created any themes!",
+    "empty_favorited_themes": "You have not favorited any themes!",
     "prompt_action": "Browse theme selections or create your own",
 		"browse_themes": "Browse Themes",
 		"build_theme": "Build A Theme"

src/components/NavigationBar/NavigationBar.tsx

@@ -21,6 +21,7 @@ import { useTranslation } from "react-i18next";
 import logo from "@/assets/images/logo.png";
 import { Endpoints } from "@/constants/Endpoints";
 import { useAuth } from "@/context/AuthContext";
+import useIsDesktop from "@/hooks/useIsDesktop";
 import { useNotify } from "@/hooks/useNotify";
 import { handleLogin } from "@/services/authService";
 import { resetPluginsCache } from "@/services/plugins/cacheService";
@@ -42,6 +43,8 @@ const NavigationBar: React.FC<{
 }) => {
   // lazy loads translations
   const { t, i18n } = useTranslation("components/navigationbar");
+
+  const isDesktop = useIsDesktop();
   const { isLoggedIn, setIsLoggedIn, setUserData } = useAuth();
   const location = useLocation();
   const navigate = useNavigate();
@@ -73,7 +76,7 @@ const NavigationBar: React.FC<{
     <Box
       component="nav"
       sx={{
-        position: "sticky",
+        position: isDesktop ? "sticky" : "fixed",
         top: 0,
         left: 0,
         width: "100%",

src/components/Plugins/PluginCard.tsx

@@ -1,3 +1,4 @@
+import useIsDesktop from "@/hooks/useIsDesktop";
 import {
   Box,
   Card,
@@ -30,6 +31,8 @@ const PluginCard: React.FC<{
   // lazy loads translations
   const { t } = useTranslation("components/plugins");
 
+  const isDesktop = useIsDesktop();
+
   const handleFavoriteClick = async () => {
     if (plugin.isFavorite) {
       updateFavorites(plugin, false);
@@ -41,7 +44,8 @@ const PluginCard: React.FC<{
   return (
     <Card
       sx={{
-        height: 500,
+        height: isDesktop ? 500 : 460,
+        width: isDesktop ? "100%" : "85vw",
         display: "flex",
         flexDirection: "column",
         justifyContent: "space-between",
@@ -56,7 +60,7 @@ const PluginCard: React.FC<{
         image={plugin.imageUrl}
         alt={plugin.name}
         sx={{
-          height: 280,
+          height: isDesktop ? 280 : 240,
           width: "100%",
           objectFit: "cover",
           borderRadius: 5,

src/components/Plugins/PluginModal.tsx

@@ -78,7 +78,7 @@ const PluginModal: React.FC<{
               variant="h5"
               sx={{
                 fontWeight: "bold",
-                color: "white",
+                color: "text.primary",
                 mb: 1,
               }}
             >

src/components/SearchBar/SortButton.tsx

@@ -72,6 +72,7 @@ const SortButton: React.FC<{
             '&:hover': {
               borderBottom: "1px dashed",
             },
+            fontSize: 14,
           }}
         >
           {t(`sortbutton.${sortMap[sortBy as keyof typeof sortMap]}`)}
@@ -93,6 +94,9 @@ const SortButton: React.FC<{
             key={field}
             selected={field === sortBy}
             onClick={() => handleMenuClose(field)}
+            sx={{
+              fontSize: 14,
+            }}
           >
             {label}
           </MenuItem>

src/components/Themes/ThemeModal.tsx

@@ -87,7 +87,7 @@ const ThemeModal: React.FC<{
               variant="h5"
               sx={{
                 fontWeight: "bold",
-                color: "white",
+                color: "text.primary",
                 mb: 1,
               }}
             >

src/components/Themes/ThemePreview.tsx

@@ -194,7 +194,7 @@ const ThemePreview: React.FC<{
         {previewIds.length === 0 ? (
           <Typography
             sx={{
-              color: '#f9fafb',
+              color: 'text.primary',
               fontWeight: 600,
               fontSize: '1.125rem',
               textAlign: 'center',
@@ -219,7 +219,7 @@ const ThemePreview: React.FC<{
               >
                 <Typography
                   sx={{
-                    color: '#f9fafb',
+                    color: 'text.primary',
                     fontWeight: 600,
                     fontSize: '1.125rem'
                   }}

src/components/UserProfile/UserProfilePluginSection.tsx

@@ -126,7 +126,10 @@ const UserProfilePluginSection: React.FC<{
           <img src={EmptySVG} alt="Empty" />
           <Box>
             <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-              {t('user_profile_plugin_section.empty_plugins')}
+              {selectedPluginType === "personal" ?
+                <>{t('user_profile_plugin_section.empty_personal_plugins')}</> :
+                <>{t('user_profile_plugin_section.empty_favorited_plugins')}</>
+              }
             </Typography>
             <Typography sx={{ color: 'text.secondary' }}>
               {t('user_profile_plugin_section.prompt_action')}

src/components/UserProfile/UserProfileThemeSection.tsx

@@ -126,7 +126,10 @@ const UserProfileThemeSection: React.FC<{
           <img src={EmptySVG} alt="Empty" />
           <Box>
             <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-              {t('user_profile_theme_section.empty_themes')}
+              {selectedThemeType === "personal" ?
+                <>{t('user_profile_theme_section.empty_personal_themes')}</> :
+                <>{t('user_profile_theme_section.empty_favorited_themes')}</>
+              }
             </Typography>
             <Typography sx={{ color: 'text.secondary' }}>
               {t('user_profile_theme_section.prompt_action')}

src/pages/ThemeBuilder.tsx

@@ -39,7 +39,7 @@ const ThemeBuilder: React.FC = () => {
             color: 'text.primary',
           }}
         >
-          {t("theme_builder.coming_soon")}
+          {t("theme_builder.title")}
         </Typography>
         <Typography
           variant="body1"

src/services/plugins/apiService.ts

@@ -1,8 +1,8 @@
 import { Endpoints } from "@/constants/Endpoints";
 import { Placeholders } from "@/constants/Placeholders";
+import { ApiPlugin } from "@/interfaces/ApiPlugin";
 import { Plugin } from "@/interfaces/Plugin";
 import { resetPluginsCache } from "../plugins/cacheService";
-import { ApiPlugin } from "@/interfaces/ApiPlugin";
 import { getNpmPluginData } from "./npmService";
 
 /**
@@ -110,8 +110,5 @@ const removePluginFromFavorites = async (plugin: Plugin) => {
 };
 
 export {
-	galleryApiFetch,
-  fetchPluginsFromApi,
-  addPluginToFavorites,
-  removePluginFromFavorites
-}
+  addPluginToFavorites, fetchPluginsFromApi, galleryApiFetch, removePluginFromFavorites
+};

src/services/plugins/npmService.ts

@@ -1,5 +1,5 @@
-import { Endpoints } from "../../constants/Endpoints";
 import { ApiPlugin } from "@/interfaces/ApiPlugin";
+import { Endpoints } from "../../constants/Endpoints";
 
 /**
  * Fetches theme data stored on github via jsdelivr cache.
@@ -35,4 +35,5 @@ const getNpmPluginData = async (plugin: ApiPlugin) => {
 	}
 }
 
-export { getNpmPluginData }
+export { getNpmPluginData };
+