Styles for documents form

Author: alexbaumgertner

src/app/admin/documents/page.module.css

@@ -0,0 +1,39 @@
+.container {
+  padding: 1rem;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+}
+
+.item {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.link {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 500px;
+  font-size: 1.2rem;
+}
+
+.newDocument {
+  display: block;
+  margin-bottom: 3rem;
+  padding: 0.5rem 1rem;
+  background-color: #007bff;
+  color: white;
+  font-size: 1.6rem;
+}
+
+.delete {
+  margin-left: auto;
+}

src/app/admin/documents/page.tsx

@@ -2,21 +2,30 @@ import Link from 'next/link'
 
 import { readDocuments } from '@/db/api/documents'
 import { DocumentDelete } from '@/components'
+import classes from './page.module.css'
 
 async function DocumentsPage() {
   const documents = await readDocuments()
 
   return (
-    <article>
+    <article className={classes.container}>
       <h1>Documents</h1>
-      <Link href="/admin/documents/new">New document</Link>
-      <ul>
+      <Link className={classes.newDocument} href="/admin/documents/new">
+        New document
+      </Link>
+      <ul className={classes.list}>
         {documents.map((document) => (
-          <li key={document.id}>
-            <Link href={`/admin/documents/${document.id}`}>
+          <li key={document.id} className={classes.item}>
+            <Link
+              href={`/admin/documents/${document.id}`}
+              className={classes.link}
+            >
               {document.title}
             </Link>
-            <DocumentDelete documentId={document.id} />
+            <DocumentDelete
+              documentId={document.id}
+              className={classes.delete}
+            />
           </li>
         ))}
       </ul>

src/components/Document/DocumentDelete.tsx

@@ -5,7 +5,13 @@ import { DELETE_DOCUMENT_BY_ID } from '@/db/queries-qraphql'
 
 import classes from './document.module.css'
 
-const DocumentDelete = ({ documentId }: { documentId: string }) => {
+const DocumentDelete = ({
+  documentId,
+  className,
+}: {
+  documentId: string
+  className?: string
+}) => {
   const [deleteDocument] = useMutation(DELETE_DOCUMENT_BY_ID)
 
   const handleDelete = async () => {
@@ -23,7 +29,10 @@ const DocumentDelete = ({ documentId }: { documentId: string }) => {
   }
 
   return (
-    <button onClick={handleDelete} className={classes.deleteButton}>
+    <button
+      onClick={handleDelete}
+      className={`${classes.deleteButton} ${className}`}
+    >
       Delete
     </button>
   )

src/components/Input/Input.module.css

@@ -27,7 +27,7 @@
   font-size: 16px;
   font-family: sans-serif;
   color: #333;
-  background-color: #f5f5f5;
+  background-color: #fefefe;
   outline: none;
   transition:
     border-color 0.2s ease,

src/components/TextArea/TextArea.module.css

@@ -27,7 +27,7 @@
   font-size: 16px;
   font-family: sans-serif;
   color: #333;
-  background-color: #f5f5f5;
+  background-color: #fefefe;
   outline: none;
   transition:
     border-color 0.2s ease,