Adjust Appearance

frontend/src/app/[locale]/projects/ProjectsPage.tsx

@@ -81,38 +81,36 @@ export default function ProjectsPage({ messages, locale }: Props) {
   };
 
   return (
-    <div className="flex justify-center">
-      <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
-        <div className="w-full p-3 flex items-center justify-between">
-          <h3 className="font-bold">{messages.project}</h3>
-          <div>
-            <Button
-              startContent={<Plus size={16} />}
-              size="sm"
-              color="primary"
-              onClick={openDialogForCreate}
-            >
-              {messages.newProject}
-            </Button>
-          </div>
+    <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
+      <div className="w-full p-3 flex items-center justify-between">
+        <h3 className="font-bold">{messages.project}</h3>
+        <div>
+          <Button
+            startContent={<Plus size={16} />}
+            size="sm"
+            color="primary"
+            onClick={openDialogForCreate}
+          >
+            {messages.newProject}
+          </Button>
         </div>
-
-        <ProjectsTable
-          projects={projects}
-          onEditProject={onEditClick}
-          onDeleteProject={onDeleteClick}
-          messages={messages}
-          locale={locale}
-        />
-
-        <ProjectDialog
-          isOpen={isProjectDialogOpen}
-          editingProject={editingProject}
-          onCancel={closeDialog}
-          onSubmit={onSubmit}
-          messages={messages}
-        />
       </div>
+
+      <ProjectsTable
+        projects={projects}
+        onEditProject={onEditClick}
+        onDeleteProject={onDeleteClick}
+        messages={messages}
+        locale={locale}
+      />
+
+      <ProjectDialog
+        isOpen={isProjectDialogOpen}
+        editingProject={editingProject}
+        onCancel={closeDialog}
+        onSubmit={onSubmit}
+        messages={messages}
+      />
     </div>
   );
 }

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx

@@ -74,6 +74,7 @@ export default function TestCaseTable({
       return sortDescriptor.direction === "descending" ? -cmp : cmp;
     });
   }, [sortDescriptor, cases]);
+
   const renderCell = useCallback((testCase: Case, columnKey: Key) => {
     const cellValue = testCase[columnKey as keyof Case];
 
@@ -82,13 +83,19 @@ export default function TestCaseTable({
         return <span>{cellValue}</span>;
       case "title":
         return (
-          <Link
-            href={`/projects/${projectId}/folders/${testCase.folderId}/cases/${testCase.id}`}
-            locale={locale}
-            className={NextUiLinkClasses}
+          <Button
+            size="sm"
+            variant="light"
+            className="data-[hover=true]:bg-transparent"
           >
-            {cellValue}
-          </Link>
+            <Link
+              href={`/projects/${projectId}/folders/${testCase.folderId}/cases/${testCase.id}`}
+              locale={locale}
+              className={NextUiLinkClasses}
+            >
+              {cellValue}
+            </Link>
+          </Button>
         );
       case "priority":
         return (