Refactor input styling

package.json

@@ -7,7 +7,8 @@
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "check": "astro check"
   },
   "dependencies": {
     "@astrojs/check": "^0.5.3",

src/components/Button.tsx

@@ -0,0 +1,15 @@
+import React, { type ReactNode } from "react"
+
+interface ButtonProps
+  extends React.PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement>> {
+  icon?: ReactNode
+}
+
+export default function Button({ icon, children, ...delegated }: ButtonProps) {
+  return (
+    <button className="bg-primary-500" {...delegated}>
+      {icon}
+      <span>{children}</span>
+    </button>
+  )
+}

src/components/Card.tsx

@@ -13,15 +13,11 @@ const Card: React.FC<CardProps> = ({ position, image, title, name, institution }
   const link = image?.replace("/public", "")
   return (
     <div
-      className={`flex flex-row gap-8 ${position % 2 ? "md:flex-row-reverse md:text-right" : ""}`}
+      className={`flex flex-wrap gap-x-8 ${position % 2 ? "md:flex-row-reverse md:text-right" : ""}`}
     >
       {image && (
         <div>
-          <img
-            className="object-cover rounded-full w-64 h-64 min-w-64 min-h-64 hidden md:block"
-            src={link}
-            alt={name}
-          />
+          <img className="object-cover rounded-full w-64 h-64" src={link} alt={name} />
         </div>
       )}
       <div>

src/components/CardContainer.astro

@@ -12,9 +12,9 @@ interface PersonProps {
 }
 ---
 
-<div class="flex flex-row items-start space-x-12">
+<div class="flex items-start gap-12">
   <h2 class={`${color} [writing-mode:vertical-lr] rotate-180`}>{title}</h2>
-  <div class="flex flex-col space-y-20 flex-1">
+  <div class="flex flex-col gap-20 flex-1">
     {
       people.map((person: PersonProps, i: number) => {
         return (

src/components/CustomInput.tsx

@@ -22,20 +22,19 @@ export const CustomInput = React.forwardRef<
       | "valid"
   } & ReturnType<UseFormRegister<Inputs>>
 >(({ onChange, onBlur, name, label, placeholder, match, errorMessage }, ref) => (
-  <Form.Field name={label} className="py-2 my-4 mx-2">
+  <Form.Field name={name} className="flex flex-col gap-2">
+    <Form.Label>{label}</Form.Label>
     <Form.Control asChild>
       <input
         name={name}
-        ref={ref}
         onChange={onChange}
         onBlur={onBlur}
-        id={label}
-        className="text-gray-400 text-sm font-medium outline-none border-b-2 w-full"
         placeholder={placeholder}
+        ref={ref}
         required
       />
     </Form.Control>
-    <Form.Message className="text-red-600 text-lg" match="valueMissing">
+    <Form.Message className="text-primary-300" match="valueMissing">
       Please enter your {label}
     </Form.Message>
     {match !== undefined && (

src/components/CustomTextarea.tsx

@@ -10,21 +10,21 @@ export const CustomTextarea = React.forwardRef<
     placeholder: string
   } & ReturnType<UseFormRegister<Inputs>>
 >(({ onChange, onBlur, name, label, placeholder }, ref) => (
-  <Form.Field name={label} className="py-2 my-4 mx-2">
+  <Form.Field name={name} className="flex flex-col gap-2">
+    <Form.Label>{label}</Form.Label>
     <Form.Control asChild>
       <textarea
         rows={4}
         name={name}
         ref={ref}
         onChange={onChange}
         onBlur={onBlur}
-        id={label}
         className="text-gray-400 text-sm font-medium outline-none border-b-2 w-full"
         placeholder={placeholder}
         required
       />
     </Form.Control>
-    <Form.Message className="text-red-600 text-lg" match="valueMissing">
+    <Form.Message className="text-primary-300" match="valueMissing">
       Please enter your {label}
     </Form.Message>
   </Form.Field>

src/components/DataForm.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react"
-import { set } from "react-hook-form"
 import DataTable from "../components/DataTable"
 import DownloadModal from "../components/DownloadModal"
 
@@ -23,27 +22,30 @@ interface DataFormProps {
 }
 
 const DataForm: React.FC<DataFormProps> = ({ allFiles }) => {
-  const initialFiles = allFiles.map((file) => {
-    const temp = file.data
-    return { ...temp, selected: false }
-  })
-  const [files, setFiles] = useState(initialFiles)
+  const [files, setFiles] = useState(
+    allFiles.map((file) => {
+      return { ...file.data, selected: false }
+    })
+  )
 
-  const updateFileList = (fileToUpdate: FileItem, selection: boolean) => {
-    const filesClone = [...files]
-    const updatedFiles = filesClone.map((file) => {
-      if (file.file === fileToUpdate.file) {
-        file.selected = selection
-      }
-      return file
+  /**
+   * Given a target file name and new `selected` field for that file, update the matching file object in{@link files}
+   * with the new value for `selected`.
+   */
+  const updateFileList = ({ file: targetFile }: FileItem, selection: boolean) => {
+    const updatedFiles = files.map(({ file, selected, ...rest }) => {
+      return file === targetFile
+        ? { file, selected: selection, ...rest }
+        : { file, selected, ...rest }
     })
+
     setFiles(updatedFiles)
   }
 
   return (
-    <div className="flex flex-col">
-      <DataTable allFiles={files} updateFileList={updateFileList} />
+    <div className="space-y-4">
       <DownloadModal filesToDownload={files.map((file) => file.file)} />
+      <DataTable allFiles={files} updateFileList={updateFileList} />
     </div>
   )
 }

src/components/DataTable.tsx

@@ -35,11 +35,11 @@ const DataTable: React.FC<DataTableProps> = ({ allFiles, updateFileList }) => {
     return (
       <tr key={i}>
         <td>
-          <div className="flex gap-4">
+          <div className="flex items-center gap-4">
             <Checkbox.Root
               name={file}
               id={file}
-              className="mx-1 w-6 h-6 border"
+              className="p-0 w-4 h-4 border"
               checked={selected}
               onClick={() => handleSelect(selected, i)}
             >
@@ -64,30 +64,32 @@ const DataTable: React.FC<DataTableProps> = ({ allFiles, updateFileList }) => {
   })
 
   return (
-    <table className="table-fixed border-spacing-2">
-      <thead>
-        <tr className="bg-neutral-100 text-left text-neutral-900">
-          <th className="flex w-[200px]">
-            <Checkbox.Root
-              name="selectAll"
-              id="selectAll"
-              className="mx-1 w-6 h-6 text-neutral-900"
-              onCheckedChange={handleSelectAll}
-            >
-              <Checkbox.Indicator>
-                <CheckIcon />
-              </Checkbox.Indicator>
-            </Checkbox.Root>
-            File Name
-          </th>
-          <th className="w-[200px]">Category</th>
-          <th>Description</th>
-          <th>File</th>
-        </tr>
-      </thead>
+    <div className="w-full overflow-x-scroll no-scrollbar">
+      <table className="table-fixed border-spacing-2">
+        <thead>
+          <tr className="bg-neutral-100 text-left text-neutral-900">
+            <th className="flex items-center w-[200px]">
+              <Checkbox.Root
+                name="selectAll"
+                id="selectAll"
+                className="p-0 w-4 h-4 text-neutral-900 border"
+                onCheckedChange={handleSelectAll}
+              >
+                <Checkbox.Indicator>
+                  <CheckIcon />
+                </Checkbox.Indicator>
+              </Checkbox.Root>
+              File Name
+            </th>
+            <th className="w-[200px]">Category</th>
+            <th>Description</th>
+            <th>File</th>
+          </tr>
+        </thead>
 
-      <tbody>{selectedFiles}</tbody>
-    </table>
+        <tbody>{selectedFiles}</tbody>
+      </table>
+    </div>
   )
 }
 export default DataTable