feat: new resources management ux

frontend/src/Components/ResourcesCategoryCard.tsx

@@ -6,8 +6,10 @@ export default function ResourcesCategoryCard({
 }: {
     category: ResourceCategory;
 }) {
+    const cardClasses = `card card-compact overflow-hidden`;
+
     return (
-        <div className="card card-compact bg-base-teal overflow-hidden">
+        <div className={cardClasses}>
             <div className="card-body gap-2">
                 <h3 className="card-title text-sm">{category.name}</h3>
                 {category.links.map((link: ResourceLink) => {

frontend/src/Components/forms/AddResourceCollectionForm.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { TextInput, CloseX, SubmitButton } from '../inputs';
+
+type Inputs = {
+    collectionName: string;
+    linkName: string;
+    linkUrl: string;
+};
+
+interface AddResourceCollectionFormProps {
+    onSuccess: (
+        collectionName: string,
+        linkName: string,
+        linkUrl: string
+    ) => void;
+}
+
+export default function AddResourceCollectionForm({
+    onSuccess
+}: AddResourceCollectionFormProps) {
+    const [errorMessage, _] = useState('');
+    const {
+        register,
+        handleSubmit,
+        reset,
+        formState: { errors }
+    } = useForm<Inputs>();
+
+    const onSubmit: SubmitHandler<Inputs> = async (data) => {
+        onSuccess(data.collectionName, data.linkName, data.linkUrl);
+        reset();
+    };
+
+    return (
+        <div>
+            <CloseX close={() => reset()} />
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <TextInput
+                    label="Collection Name"
+                    interfaceRef="collectionName"
+                    required={true}
+                    length={25}
+                    errors={errors}
+                    register={register}
+                />
+                <p className="text-sm text-red-500 mt-2">
+                    To add a collection, you must also add an accompanying link.
+                </p>
+                <TextInput
+                    label="Link Name"
+                    interfaceRef="linkName"
+                    required={true}
+                    length={25}
+                    errors={errors}
+                    register={register}
+                />
+                <TextInput
+                    label="Link URL"
+                    interfaceRef="linkUrl"
+                    required={true}
+                    length={null}
+                    errors={errors}
+                    register={register}
+                />
+                <SubmitButton errorMessage={errorMessage} />
+            </form>
+        </div>
+    );
+}

frontend/src/Components/forms/AddCategoryForm.tsx → frontend/src/Components/forms/EditResourceCollectionForm.tsx

@@ -1,27 +1,34 @@
+// Component form that takes in a category and gives the user the ability to rename it. Calls back onSuccess when the category is renamed.
+
 import { useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { TextInput, CloseX, SubmitButton } from '../inputs';
 
 type Inputs = {
-    title: string;
+    collectionName: string;
 };
 
-export default function AddCategoryForm({
+export default function EditResourceCollectionForm({
+    collectionName,
     onSuccess
 }: {
-    onSuccess: (title: string) => void;
+    collectionName: string;
+    onSuccess: (newCollectionName: string) => void;
 }) {
-    const [errorMessage, _] = useState('');
-
+    const [errorMessage, _] = useState();
     const {
         register,
         handleSubmit,
         reset,
         formState: { errors }
-    } = useForm<Inputs>();
+    } = useForm<Inputs>({
+        values: {
+            collectionName: collectionName
+        }
+    });
 
     const onSubmit: SubmitHandler<Inputs> = async (data) => {
-        onSuccess(data.title);
+        onSuccess(data.collectionName);
         reset();
     };
 
@@ -30,8 +37,8 @@ export default function AddCategoryForm({
             <CloseX close={() => reset()} />
             <form onSubmit={handleSubmit(onSubmit)}>
                 <TextInput
-                    label="Title"
-                    interfaceRef="title"
+                    label="Collection Name"
+                    interfaceRef="collectionName"
                     required={true}
                     length={25}
                     errors={errors}

frontend/src/Layouts/AuthenticatedLayout.tsx

@@ -39,13 +39,13 @@ export default function AuthenticatedLayout({
                 className={`drawer drawer-mobile  ${isNavPinned ? 'lg:drawer-open' : ''} `}
             >
                 <div className="drawer-content flex flex-col border-l border-grey-1">
-                    <main className="w-full min-h-screen bg-background">
+                    <main className="w-full min-h-screen bg-background flex flex-col">
                         <PageNav
                             path={path}
                             showOpenMenu={!isNavPinned}
                             onShowNav={showNav}
                         />
-                        {children}
+                        <div className="grow">{children}</div>
                     </main>
                 </div>
                 <input