fix app icons and home page styling

progress nextui v2 migration
select-studios · Mar 20, 2024 · 8e7a531 · 8e7a531
1 parent df12958
commit 8e7a531
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 37 deletions.
diff --git a/client/electron/main/index.ts b/client/electron/main/index.ts
@@ -2,7 +2,7 @@ process.env.DIST_ELECTRON = join(__dirname, "../..");
 process.env.DIST = join(process.env.DIST_ELECTRON, "../dist");
 process.env.PUBLIC = app.isPackaged
   ? process.env.DIST
-  : join(process.env.DIST_ELECTRON, "./public");
+  : join(process.env.DIST_ELECTRON, "../public");
 
 import { app, BrowserWindow, shell, ipcMain, dialog } from "electron";
 import settings from "electron-settings";

diff --git a/client/index.html b/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/public/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/public/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       http-equiv="Content-Security-Policy"

diff --git a/client/src/components/dropdowns/user/userdropdown.component.tsx b/client/src/components/dropdowns/user/userdropdown.component.tsx
@@ -19,6 +19,7 @@ import {
 import { HiBellAlert, HiUserPlus } from "react-icons/hi2";
 import { useNavigate } from "react-router";
 import userImg from "../../../assets/images/ICON_User.png";
+import { Key } from "react";
 
 interface UserDropdownProps {
   user: {
@@ -34,29 +35,29 @@ const UserDropdown: React.FC<UserDropdownProps> = ({ user }) => {
 
   return (
     <div>
-      <Dropdown>
+      <Dropdown size="lg">
         <DropdownTrigger>
           <Avatar src={userImg} size="lg" className="mr-2 cursor-pointer" />
         </DropdownTrigger>
         <DropdownMenu
           className="bg-secondaryBG"
           disabledKeys={["badges"]}
-          onAction={(key: string) => {
+          onAction={(key: Key) => {
             if (key == "logout") {
               const storedRfToken = localStorage.getItem("refreshToken");
               if (storedRfToken && storedRfToken.length) {
                 const refreshToken = JSON.parse(storedRfToken).refreshToken;
                 logout(refreshToken, navigate);
               }
-            } else if (key == "verified" && !user?.verified) {
+            } else if (key.toString() == "verified" && !user?.verified) {
               sendVerificationLink(user.accessToken);
-            } else if (key == "profile") {
+            } else if (key.toString() == "profile") {
               navigate("/settings/profile");
-            } else if (key == "home") {
+            } else if (key.toString() == "home") {
               navigate("/");
-            } else if (key == "settings") {
+            } else if (key.toString() == "settings") {
               navigate("/settings");
-            } else if (key == "admindashboard") {
+            } else if (key.toString() == "admindashboard") {
               navigate("/admin/dashboard");
             }
           }}
@@ -77,31 +78,33 @@ const UserDropdown: React.FC<UserDropdownProps> = ({ user }) => {
             </DropdownItem>
           )}
 
-          <DropdownItem icon={<HiHome size="20" />} key="home">
-            Home
-          </DropdownItem>
-          <DropdownItem icon={<HiUser size="20" />} key="profile">
-            Profile
-          </DropdownItem>
-          <DropdownItem key="settings" icon={<HiCog size="20" />}>
-            Settings
-          </DropdownItem>
-          {(!user?.verified as Boolean) && (
-            <DropdownItem
-              icon={<HiBellAlert size="20" />}
-              key="verified"
-              color="warning"
-              description="Resend verification link."
-            >
-              Not verified
+          <DropdownSection showDivider>
+            <DropdownItem startContent={<HiHome size="20" />} key="home">
+              Home
             </DropdownItem>
-          )}
+            <DropdownItem startContent={<HiUser size="20" />} key="profile">
+              Profile
+            </DropdownItem>
+            <DropdownItem key="settings" startContent={<HiCog size="20" />}>
+              Settings
+            </DropdownItem>
+            {(!user?.verified as Boolean) && (
+              <DropdownItem
+                startContent={<HiBellAlert size="20" />}
+                key="verified"
+                color="warning"
+                description="Resend verification link."
+              >
+                Not verified
+              </DropdownItem>
+            )}
+          </DropdownSection>
 
           {(user?.moderator as Boolean) && (
             <DropdownSection title="Admin Zone">
               <DropdownItem
                 key="admindashboard"
-                icon={<HiDatabase size="20" />}
+                startContent={<HiDatabase size="20" />}
               >
                 Dashboard
               </DropdownItem>
@@ -111,7 +114,7 @@ const UserDropdown: React.FC<UserDropdownProps> = ({ user }) => {
             <DropdownItem
               key="logout"
               color="danger"
-              icon={<HiLogout size="20" />}
+              startContent={<HiLogout size="20" />}
             >
               Logout
             </DropdownItem>

diff --git a/client/src/components/game/card/gamecard.component.tsx b/client/src/components/game/card/gamecard.component.tsx
@@ -81,7 +81,7 @@ export const GameCard: React.FC<GameCardProps> = ({ game }) => {
           <Avatar src={gameIcon} alt={game.name + " Icon"} size="lg" />
           <div className="grid">
             <div>
-              <p className="text-2xl font-montserrat font-bold flex items-center leading-2">
+              <p className="text-2xl font-montserrat font-bold flex items-center leading-2 normal-case">
                 {game.name}
                 {game.verified && (
                   <Tooltip content="Verified" color="success">
@@ -98,7 +98,7 @@ export const GameCard: React.FC<GameCardProps> = ({ game }) => {
                 )}
               </p>
             </div>
-            <div className="flex-row mt-1">
+            <div className="flex-row mt-1 normal-case">
               {game.tags.map((tag, i) => (
                 <Badge
                   key={i}
@@ -114,13 +114,13 @@ export const GameCard: React.FC<GameCardProps> = ({ game }) => {
           </div>
         </CardHeader>
         <CardBody className="py-4">
-          <p className="font-medium font-inter max-h-20 overflow-ellipsis">
+          <p className="font-medium font-inter max-h-20 overflow-ellipsis normal-case">
             {game.description}
           </p>
         </CardBody>
 
         {downloadStatus.gameName === game.downloadName && (
-          <CardBody className="grid justify-left">
+          <CardBody className="grid justify-left normal-case">
             <p className="mb-2">{downloadStatus.msg}</p>
             {downloadStatus.percentage && downloadStatus.percentage > 0 && (
               <Progress
@@ -129,7 +129,7 @@ export const GameCard: React.FC<GameCardProps> = ({ game }) => {
                 value={Number(Number(downloadStatus.percentage).toFixed(0))}
               />
             )}
-            <p className="mt-2">
+            <p className="mt-2 ">
               {downloadStatus.percentage &&
                 downloadStatus.percentage > 0 &&
                 Number((downloadStatus.remainingSize || 0) / 1e6).toFixed(1) +
@@ -177,7 +177,7 @@ export const GameCard: React.FC<GameCardProps> = ({ game }) => {
               startContent={<HiDownload size="20" />}
               size="md"
               color="primary"
-              className="ml-2 shadow-md w-auto"
+              className="ml-2 shadow-md w-auto font-bold"
               onPressEnd={() => {
                 window.gamesAPI.downloadGame(game.downloadName);
                 ipcRenderer.once("finish-download", (event, message) => {

diff --git a/client/src/components/sidebar/sidebar.component.tsx b/client/src/components/sidebar/sidebar.component.tsx
@@ -86,8 +86,8 @@ const SidebarComp: React.FC<SidebarProps> = ({ active, settings }) => {
           <div>
             <Button
               size="lg"
-              color="primary"
-              className={"w-auto" + !SidebarStore.isOpen ? "bg-tertiaryBG" : ""}
+              color={SidebarStore.isOpen ? "primary" : "default"}
+              className="w-auto"
               onClick={() => (SidebarStore.isOpen = !SidebarStore.isOpen)}
             >
               <HiMenuAlt1 size="25" className="font-bold" />