fix: fix some ui problems (#14)

* fix: fix undefined values in overview page

* fix: change editing icon

* fix: fix font weight

Author: ravachol-yang

src/app/(main)/(dashboard)/(overview)/page.tsx

@@ -25,12 +25,12 @@ export default async function OverviewPage() {
         <div className="lg:flex h-full gap-6">
           <div className="md:w-1/2">
             <Greeting user={user} siteName={SITE_NAME} />
-            <AccountConfig verified={user!.verified} />
+            <AccountConfig verified={user?.verified} />
             <h3 className="text-lg">我的资源</h3>
             <Resources
-              profiles={user!.profiles}
-              closet={user!.closet}
-              isAdmin={user!.role === "ADMIN"}
+              profiles={user?.profiles}
+              closet={user?.closet}
+              isAdmin={user?.role === "ADMIN"}
             />
           </div>
           <div className="flex flex-col md:w-1/2 h-full">

src/components/account-info.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { FormEvent, useState } from "react";
-import { ChevronLeft, LoaderCircle, Pencil } from "lucide-react";
+import { useState } from "react";
+import { ChevronLeft, LoaderCircle, SquarePen } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { updatePasswordParams, updateUserInfoParams } from "@/lib/schema";
@@ -22,7 +22,7 @@ export default function AccountInfo({ user }) {
 
   const router = useRouter();
 
-  async function handleUpdateUserInfo(e: FormEvent) {
+  async function handleUpdateUserInfo(e) {
     setInfoPending(true);
     e.preventDefault();
 
@@ -57,7 +57,7 @@ export default function AccountInfo({ user }) {
   const [passwordMessage, setPasswordMessage] = useState<string>("");
   const [passwordPending, setPasswordPending] = useState<boolean>(false);
 
-  async function handleUpdatePassword(e: FormEvent) {
+  async function handleUpdatePassword(e) {
     setPasswordPending(true);
     e.preventDefault();
     const validated = updatePasswordParams.safeParse({
@@ -91,10 +91,10 @@ export default function AccountInfo({ user }) {
           ) : (
             <span className="mx-2">{user.name}</span>
           )}
-          <Pencil
+          <SquarePen
             onClick={() => setEditingName(!editingName)}
-            size={15}
-            className="hover:scale-110"
+            size={20}
+            className={clsx("hover:scale-110", !editingName && "text-muted-foreground")}
           />
         </p>
         <p className="my-3 flex">
@@ -113,10 +113,10 @@ export default function AccountInfo({ user }) {
               <code className="bg-accent p-1 rounded-sm text-muted-foreground">{user.email}</code>
             </span>
           )}
-          <Pencil
+          <SquarePen
             onClick={() => setEditingEmail(!editingEmail)}
-            size={15}
-            className="hover:scale-110"
+            size={20}
+            className={clsx("hover:scale-110", !editingEmail && "text-muted-foreground")}
           />
         </p>
         {(editingName || editingEmail) && (

src/components/profile-list.tsx

@@ -40,9 +40,7 @@ export default async function ProfileList({ userId, isAdmin, verified, detail })
             <TableBody>
               {profiles.map((profile) => (
                 <TableRow key={profile.id} className={clsx(detail === profile.id && "bg-muted")}>
-                  <TableCell>
-                    <strong>{profile.name}</strong>
-                  </TableCell>
+                  <TableCell className="font-medium">{profile.name}</TableCell>
                   <TableCell>
                     <code>{profile.uuid}</code>
                   </TableCell>

src/components/profile-tab.tsx

@@ -50,9 +50,7 @@ export default async function ProfileTab({ where }) {
       <TableBody>
         {profiles.map((profile) => (
           <TableRow key={profile.id}>
-            <TableCell>
-              <strong>{profile.id}</strong>
-            </TableCell>
+            <TableCell className="font-medium">{profile.id}</TableCell>
             <TableCell>{profile.name}</TableCell>
             <TableCell>{profile.uuid}</TableCell>
             <TableCell>

src/components/texture-tab.tsx

@@ -46,9 +46,7 @@ export default async function TextureTab({ where }) {
       <TableBody>
         {textures.map((texture) => (
           <TableRow key={texture.id}>
-            <TableCell>
-              <strong>{texture.id}</strong>
-            </TableCell>
+            <TableCell className="font-medium">{texture.id}</TableCell>
             <TableCell className="max-w-30">
               <p className="truncate" title={texture.name}>
                 {texture.name}