feat: styling

simonknittel · Dec 23, 2024 · 0f2d95b · 0f2d95b
1 parent d18a776
commit 0f2d95b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 40 deletions.
diff --git a/app/src/app/app/spynet/citizen/_components/Tile.tsx b/app/src/app/app/spynet/citizen/_components/Tile.tsx
@@ -109,20 +109,15 @@ export const Tile = async ({ searchParams }: Props) => {
         );
     }
   });
-
   const limitedRows = limitRows(sortedRows, currentPage);
-
   const assignableRoles = await getAssignableRoles();
 
   const showLastSeenAtColumn = authentication.authorize("lastSeen", "read");
-
   const showTeamspeakIdAtColumn = authentication.authorize(
     "teamspeak-id",
     "read",
   );
-
   const showDiscordIdAtColumn = authentication.authorize("discord-id", "read");
-
   const showDeleteEntityButton = authentication.authorize("citizen", "delete");
 
   return (

diff --git a/app/src/app/app/spynet/notes/_components/Table.tsx b/app/src/app/app/spynet/notes/_components/Table.tsx
@@ -8,7 +8,7 @@ import {
   type User,
 } from "@prisma/client";
 import Link from "next/link";
-import { FaExternalLinkAlt, FaSortDown, FaSortUp } from "react-icons/fa";
+import { FaSortDown, FaSortUp } from "react-icons/fa";
 import { type EntityLogConfirmationState } from "../../../../../types";
 import ConfirmationState from "./ConfirmationState";
 import DeleteLog from "./DeleteLog";
@@ -53,8 +53,8 @@ const Table = ({ rows, searchParams }: Readonly<Props>) => {
   return (
     <table className="w-full min-w-[2000px]">
       <thead>
-        <tr className="grid items-center gap-4 text-left text-neutral-500 grid-cols-[1fr_3fr_1fr_1fr_1fr_1fr_1fr_1fr_1fr_44px]">
-          <th>Citizen</th>
+        <tr className="grid items-center gap-4 text-left text-neutral-500 grid-cols-[1fr_3fr_1fr_1fr_1fr_1fr_1fr_1fr_1fr_44px] -mx-2">
+          <th className="px-2">Citizen</th>
 
           <th>Inhalt</th>
 
@@ -103,26 +103,26 @@ const Table = ({ rows, searchParams }: Readonly<Props>) => {
           return (
             <tr
               key={row.entityLog.id}
-              className="grid items-center gap-4 px-2 h-14 rounded -mx-2 first:mt-2 grid-cols-[1fr_3fr_1fr_1fr_1fr_1fr_1fr_1fr_1fr_44px]"
+              className="grid items-center gap-4 h-14 rounded -mx-2 first:mt-2 grid-cols-[1fr_3fr_1fr_1fr_1fr_1fr_1fr_1fr_1fr_44px]"
             >
               <td>
                 <Link
                   href={`/app/spynet/entity/${row.entity.id}`}
-                  className="text-sinister-red-500 hover:text-sinister-red-300 flex gap-2 items-center justify-between overflow-hidden"
+                  className="text-sinister-red-500 hover:bg-neutral-800 block rounded px-2 h-full"
                 >
-                  <span className="overflow-hidden text-ellipsis">
-                    {row.entity.handle ? (
-                      <span title={row.entity.handle}>{row.entity.handle}</span>
-                    ) : (
-                      <span
-                        title="Unbekannt"
-                        className="text-neutral-500 italic"
-                      >
-                        Unbekannt
-                      </span>
-                    )}
+                  <span className="flex items-center h-14">
+                    <span className="overflow-hidden text-ellipsis">
+                      {row.entity.handle ? (
+                        <span title={row.entity.handle}>
+                          {row.entity.handle}
+                        </span>
+                      ) : (
+                        <span className="text-neutral-500 italic">
+                          Unbekannt
+                        </span>
+                      )}
+                    </span>
                   </span>
-                  <FaExternalLinkAlt />
                 </Link>
               </td>
 

diff --git a/app/src/app/app/spynet/other/_components/Table.tsx b/app/src/app/app/spynet/other/_components/Table.tsx
@@ -8,7 +8,7 @@ import {
   type User,
 } from "@prisma/client";
 import Link from "next/link";
-import { FaExternalLinkAlt, FaSortDown, FaSortUp } from "react-icons/fa";
+import { FaSortDown, FaSortUp } from "react-icons/fa";
 import ConfirmationState from "./ConfirmationState";
 import DeleteLog from "./DeleteLog";
 
@@ -49,8 +49,8 @@ const Table = ({ rows, searchParams }: Readonly<Props>) => {
   return (
     <table className="w-full min-w-[1600px]">
       <thead>
-        <tr className="grid items-center gap-4 text-left text-neutral-500 grid-cols-[1fr_1fr_2fr_1fr_1fr_1fr_1fr_1fr_44px]">
-          <th>Citizen</th>
+        <tr className="grid items-center gap-4 text-left text-neutral-500 grid-cols-[1fr_1fr_2fr_1fr_1fr_1fr_1fr_1fr_44px] -mx-2">
+          <th className="px-2">Citizen</th>
 
           <th>Merkmal</th>
 
@@ -97,26 +97,26 @@ const Table = ({ rows, searchParams }: Readonly<Props>) => {
           return (
             <tr
               key={row.entityLog.id}
-              className="grid items-center gap-4 px-2 h-14 rounded -mx-2 first:mt-2 grid-cols-[1fr_1fr_2fr_1fr_1fr_1fr_1fr_1fr_44px]"
+              className="grid items-center gap-4 h-14 rounded -mx-2 first:mt-2 grid-cols-[1fr_1fr_2fr_1fr_1fr_1fr_1fr_1fr_44px]"
             >
-              <td className="overflow-hidden">
+              <td>
                 <Link
                   href={`/app/spynet/entity/${row.entity.id}`}
-                  className="text-sinister-red-500 hover:text-sinister-red-300 flex gap-2 items-center justify-between"
+                  className="text-sinister-red-500 hover:bg-neutral-800 block rounded px-2 h-full"
                 >
-                  <span className="overflow-hidden text-ellipsis">
-                    {row.entity.handle ? (
-                      <span title={row.entity.handle}>{row.entity.handle}</span>
-                    ) : (
-                      <span
-                        title="Unbekannt"
-                        className="text-neutral-500 italic"
-                      >
-                        Unbekannt
-                      </span>
-                    )}
+                  <span className="flex items-center h-14">
+                    <span className="overflow-hidden text-ellipsis">
+                      {row.entity.handle ? (
+                        <span title={row.entity.handle}>
+                          {row.entity.handle}
+                        </span>
+                      ) : (
+                        <span className="text-neutral-500 italic">
+                          Unbekannt
+                        </span>
+                      )}
+                    </span>
                   </span>
-                  <FaExternalLinkAlt />
                 </Link>
               </td>