From 9e6bb53ba12978c03d1fb2a4585d7c0b680fc3eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Diamond?=
 <32074058+Andre-Diamond@users.noreply.github.com>
Date: Mon, 16 Sep 2024 10:45:40 +0200
Subject: [PATCH] refactor: Update styles for workingDocsTable and typea
 modules

---
 components/ActionItem.tsx          | 147 +++++++++++---------
 components/DecisionItem.tsx        | 171 ++++++++++++++----------
 components/Item.tsx                |  78 +++++++----
 components/SummaryAgendaItems.tsx  |   4 +-
 components/SummaryMeetingInfo.tsx  | 208 +++++++++++++++--------------
 components/SummaryTemplate.tsx     |  11 +-
 components/WorkingDocs.tsx         |   4 +-
 styles/agendaitems.module.css      |  79 +++++++++++
 styles/globals.css                 |  44 +++---
 styles/items.module.css            |  58 ++++++++
 styles/meetinginfo.module.css      |  73 ++++++++++
 styles/meetingsummary.module.css   |  43 +++---
 styles/summarytemplate.module.css  |  67 ++++++++++
 styles/typea.module.css            |  31 +++--
 styles/workingDocsTable.module.css |  40 +++---
 15 files changed, 730 insertions(+), 328 deletions(-)
 create mode 100644 styles/agendaitems.module.css
 create mode 100644 styles/items.module.css
 create mode 100644 styles/meetinginfo.module.css
 create mode 100644 styles/summarytemplate.module.css

diff --git a/components/ActionItem.tsx b/components/ActionItem.tsx
index c675bb7..a0c74b8 100644
--- a/components/ActionItem.tsx
+++ b/components/ActionItem.tsx
@@ -1,5 +1,6 @@
+import { useEffect, useRef } from 'react';
 import styles from '../styles/typea.module.css';
-import SelectNames from '../components/SelectNames'
+import SelectNames from '../components/SelectNames';
 
 const formatDate = (dateString: any) => {
   if (!dateString) return "";
@@ -18,67 +19,87 @@ const parseDate = (dateString: any) => {
   return `${year}-${month.toString().padStart(2, '0')}-${day.padStart(2, '0')}`;
 };
 
-const ActionItem = ({ item, itemIndex, handleUpdate, onRemove, agendaIndex, type }: any) => (
+const ActionItem = ({ item, itemIndex, handleUpdate, onRemove, agendaIndex, type }: any) => {
+  const actionRef = useRef<HTMLTextAreaElement>(null);
+
+  // Function to adjust height of the textarea
+  const adjustTextareaHeight = (textarea: HTMLTextAreaElement | null) => {
+    if (textarea) {
+      textarea.style.height = 'auto'; // Reset height
+      textarea.style.height = `${textarea.scrollHeight}px`; // Set to scrollHeight
+    }
+  };
+
+  // Auto-resize when content changes
+  useEffect(() => {
+    adjustTextareaHeight(actionRef.current);
+  }, [item.text]);
+
+  return (
     <div key={itemIndex} className={styles['action-item']}>
-              <div className={styles['agenda-title']}>
-                <label className={styles['form-label']}>
-                  Action item {itemIndex+1}
-                </label>
-                <input 
-                  className={styles['form-input']}
-                  type="text"
-                  placeholder="Action Item"
-                  value={item.text || ""} 
-                  onChange={(e) => handleUpdate('text', e.target.value)}
-                  autoComplete="off"
-                />
-              </div>
-              <div className={styles['row-flex-space-between']}>
-                  <div className={styles['row-flex-start']}>
-                    <div className={styles['action-assignee-column-flex']}>
-                      <label className={styles['form-label']}>
-                        Assignee
-                      </label>
-                      <SelectNames 
-                        onSelect={(selectedNames) => handleUpdate('assignee', selectedNames)}
-                        initialValue={item.assignee}
-                      />
-                    </div>
-                    <div className={styles['column-flex']}>
-                      <label className={styles['form-label']}>
-                        Due Date
-                      </label>
-                      <input 
-                        className={styles['form-input']}
-                        type="date"
-                        placeholder="Due Date"
-                        value={parseDate(item.dueDate || "")}  
-                        onChange={(e) => handleUpdate('dueDate', formatDate(e.target.value))}
-                      />
-                    </div>
-                    <div className={styles['column-flex']}>
-                      <label className={styles['form-label']}>
-                        Status
-                      </label>
-                      <select
-                        className={styles['form-select']}
-                        value={item.status} 
-                        onChange={(e) => handleUpdate('status', e.target.value)}
-                      >
-                        <option value="todo">To do</option>
-                        <option value="in progress">In Progress</option>
-                        <option value="done">Done</option>
-                        <option value="cancelled">Cancelled</option>
-                      </select>
-                    </div>  
-                  </div>
-                  <div>
-                    <button type="button" className={styles['remove-button']} onClick={() => onRemove(type, agendaIndex, itemIndex)}>
-                      Remove
-                    </button>
-                  </div>
-              </div>
-            </div>
-    );
+      <div className={styles['agenda-title']}>
+        <label className={styles['form-label']}>
+          Action item {itemIndex + 1}
+        </label>
+        <textarea
+          ref={actionRef}
+          className={styles['form-input']}
+          placeholder="Action Item"
+          value={item.text || ""}
+          onChange={(e) => {
+            handleUpdate('text', e.target.value);
+            adjustTextareaHeight(actionRef.current);
+          }}
+          autoComplete="off"
+        />
+      </div>
+      <div className={styles['row-flex-space-between']}>
+        <div className={styles['row-flex-start']}>
+          <div className={styles['action-assignee-column-flex']}>
+            <label className={styles['form-label']}>
+              Assignee
+            </label>
+            <SelectNames
+              onSelect={(selectedNames) => handleUpdate('assignee', selectedNames)}
+              initialValue={item.assignee}
+            />
+          </div>
+          <div className={styles['column-flex']}>
+            <label className={styles['form-label']}>
+              Due Date
+            </label>
+            <input
+              className={styles['form-select']}
+              type="date"
+              placeholder="Due Date"
+              value={parseDate(item.dueDate || "")}
+              onChange={(e) => handleUpdate('dueDate', formatDate(e.target.value))}
+            />
+          </div>
+          <div className={styles['column-flex']}>
+            <label className={styles['form-label']}>
+              Status
+            </label>
+            <select
+              className={styles['form-select']}
+              value={item.status}
+              onChange={(e) => handleUpdate('status', e.target.value)}
+            >
+              <option value="todo">To do</option>
+              <option value="in progress">In Progress</option>
+              <option value="done">Done</option>
+              <option value="cancelled">Cancelled</option>
+            </select>
+          </div>
+        </div>
+        <div>
+          <button type="button" className={styles['remove-button']} onClick={() => onRemove(type, agendaIndex, itemIndex)}>
+            Remove
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-export default ActionItem;
\ No newline at end of file
+export default ActionItem;
diff --git a/components/DecisionItem.tsx b/components/DecisionItem.tsx
index 25556a2..fdef26b 100644
--- a/components/DecisionItem.tsx
+++ b/components/DecisionItem.tsx
@@ -1,74 +1,105 @@
+import { useEffect, useRef } from 'react';
 import styles from '../styles/typea.module.css';
 
-const DecisionItem = ({ item, itemIndex, handleUpdate, onRemove, agendaIndex, type }: any) => (
+const DecisionItem = ({ item, itemIndex, handleUpdate, onRemove, agendaIndex, type }: any) => {
+  const decisionRef = useRef<HTMLTextAreaElement>(null);
+  const rationaleRef = useRef<HTMLTextAreaElement>(null);
+  const opposingRef = useRef<HTMLTextAreaElement>(null);
+
+  // Function to adjust height of the textarea
+  const adjustTextareaHeight = (textarea: HTMLTextAreaElement | null) => {
+    if (textarea) {
+      textarea.style.height = 'auto'; // Reset height
+      textarea.style.height = `${textarea.scrollHeight}px`; // Set to scrollHeight
+    }
+  };
+
+  // Auto-resize when content changes
+  useEffect(() => {
+    adjustTextareaHeight(decisionRef.current);
+    adjustTextareaHeight(rationaleRef.current);
+    adjustTextareaHeight(opposingRef.current);
+  }, [item.decision, item.rationale, item.opposing]);
+
+  return (
     <div className={styles['decision-item']} key={itemIndex}>
-              <div className={styles['row-flex-start']}>
-                <div className={styles['links-column-flex']}>
-                  <label className={styles['form-label']}>
-                    Decision Item {itemIndex + 1}
-                  </label>
-                  <input 
-                    className={styles['form-input']}
-                    type="text"
-                    placeholder="Decision Item"
-                    value={item.decision || ""} 
-                    onChange={(e) => handleUpdate('decision', e.target.value)}
-                    autoComplete="off"
-                    title="Please provide details on the decision that is being made"
-                  />
-                </div>
-                <div className={styles['column-flex']}>
-                  <label className={styles['form-label']}>
-                    Who does this decision affect?
-                  </label>
-                  <select
-                  className={styles['form-select']}
-                  value={item.effect} 
-                  onChange={(e) => handleUpdate('effect', e.target.value)}
-                  title="Please select who this decision will affect"
-                  >
-                    <option value="" disabled>Please select</option>
-                    <option value="affectsOnlyThisWorkgroup">Affects only this Workgroup</option>
-                    <option value="mayAffectOtherPeople">May affect other people</option>
-                  </select>
-                </div>
-                </div>
-                <div className={styles['column-flex']}>
-                  <label className={styles['form-label']}>
-                    Rationale (Optional)
-                  </label>
-                  <input 
-                    className={styles['form-input']}
-                    type="text"
-                    placeholder="Rationale"
-                    value={item.rationale || ""} 
-                    onChange={(e) => handleUpdate('rationale', e.target.value)}
-                    autoComplete="off"
-                    title="Please provide the rationale for making this decision"
-                  />
-                </div>
-                <div className={styles['row-flex-start']}>
-                  <div className={styles['links-column-flex']}>
-                    <label className={styles['form-label']}>
-                      Opposing arguments (Optional)
-                    </label>
-                    <input 
-                      className={styles['form-input']}
-                      type="text"
-                      placeholder="Opposing"
-                      value={item.opposing || ""} 
-                      onChange={(e) => handleUpdate('opposing', e.target.value)}
-                      autoComplete="off"
-                      title="Please provide any opposing arguments"
-                    />
-                  </div>
-                  <div className={styles['column-flex']}>
-                    <button type="button" className={styles['remove-button']} onClick={() => onRemove(type, agendaIndex, itemIndex)}>
-                      Remove
-                    </button>
-                  </div>
-                </div>
-            </div>
-    );
+      <div className={styles['row-flex-start']}>
+        <div className={styles['links-column-flex']}>
+          <label className={styles['form-label']}>
+            Decision Item {itemIndex + 1}
+          </label>
+          <textarea
+            ref={decisionRef}
+            className={styles['form-input']}
+            placeholder="Decision Item"
+            value={item.decision || ""}
+            onChange={(e) => {
+              handleUpdate('decision', e.target.value);
+              adjustTextareaHeight(decisionRef.current);
+            }}
+            autoComplete="off"
+            title="Please provide details on the decision that is being made"
+          />
+        </div>
+        <div className={styles['column-flex']}>
+          <label className={styles['form-label']}>
+            Who does this decision affect?
+          </label>
+          <select
+            className={styles['form-select']}
+            value={item.effect}
+            onChange={(e) => handleUpdate('effect', e.target.value)}
+            title="Please select who this decision will affect"
+          >
+            <option value="" disabled>Please select</option>
+            <option value="affectsOnlyThisWorkgroup">Affects only this Workgroup</option>
+            <option value="mayAffectOtherPeople">May affect other people</option>
+          </select>
+        </div>
+      </div>
+      <div className={styles['column-flex']}>
+        <label className={styles['form-label']}>
+          Rationale (Optional)
+        </label>
+        <textarea
+          ref={rationaleRef}
+          className={styles['form-input']}
+          placeholder="Rationale"
+          value={item.rationale || ""}
+          onChange={(e) => {
+            handleUpdate('rationale', e.target.value);
+            adjustTextareaHeight(rationaleRef.current);
+          }}
+          autoComplete="off"
+          title="Please provide the rationale for making this decision"
+        />
+      </div>
+      <div className={styles['row-flex-start']}>
+        <div className={styles['links-column-flex']}>
+          <label className={styles['form-label']}>
+            Opposing arguments (Optional)
+          </label>
+          <textarea
+            ref={opposingRef}
+            className={styles['form-input']}
+            placeholder="Opposing"
+            value={item.opposing || ""}
+            onChange={(e) => {
+              handleUpdate('opposing', e.target.value);
+              adjustTextareaHeight(opposingRef.current);
+            }}
+            autoComplete="off"
+            title="Please provide any opposing arguments"
+          />
+        </div>
+        <div className={styles['column-flex']}>
+          <button type="button" className={styles['remove-button']} onClick={() => onRemove(type, agendaIndex, itemIndex)}>
+            Remove
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-export default DecisionItem;
\ No newline at end of file
+export default DecisionItem;
diff --git a/components/Item.tsx b/components/Item.tsx
index af1fe43..6dc9f8c 100644
--- a/components/Item.tsx
+++ b/components/Item.tsx
@@ -1,8 +1,11 @@
-import styles from '../styles/typea.module.css';
+import { useRef, useEffect } from 'react';
+import styles from '../styles/items.module.css';
 import ActionItem from '../components/ActionItem';
 import DecisionItem from '../components/DecisionItem';
 
 const TextAreaInput = ({ value, onChange, placeholder, type }: any) => {
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
   // Define titles for different types
   const titles: any = {
     narrative: 'Meeting narrative: Try to make your narrative concise and information-dense, and avoid filler',
@@ -12,16 +15,30 @@ const TextAreaInput = ({ value, onChange, placeholder, type }: any) => {
     discussion: 'Discussion: Note the main points raised. Try to make your narrative concise and information-dense, and avoid filler',
   };
 
-  // Determine the title based on the type
   const title = titles[type] || 'Meeting narrative: Try to make your narrative concise and information-dense, and avoid filler';
 
+  const adjustTextareaHeight = (textarea: HTMLTextAreaElement | null) => {
+    if (textarea) {
+      textarea.style.height = 'auto'; // Reset height
+      textarea.style.height = `${textarea.scrollHeight}px`; // Set to scrollHeight
+    }
+  };
+
+  useEffect(() => {
+    adjustTextareaHeight(textAreaRef.current);
+  }, [value]);
+
   return (
     <div className={styles['column-flex']}>
         <textarea
+            ref={textAreaRef}
             className={styles['form-textarea']}
             placeholder={placeholder}
             value={value}
-            onChange={(e) => onChange(type, e.target.value)}
+            onChange={(e) => {
+              onChange(type, e.target.value);
+              adjustTextareaHeight(textAreaRef.current);
+            }}
             autoComplete="off"
             title={title}
         />
@@ -30,36 +47,55 @@ const TextAreaInput = ({ value, onChange, placeholder, type }: any) => {
 };
 
 // Generic input component for text fields
-const TextInput: any = ({ label, placeholder, value, onChange, type, itemIndex }: any) => (
-  <div className={styles['links-column-flex']}>
+const TextInput: any = ({ label, placeholder, value, onChange, type, itemIndex }: any) => {
+  const textInputRef = useRef<HTMLTextAreaElement>(null);
+
+  const adjustTextareaHeight = (textarea: HTMLTextAreaElement | null) => {
+    if (textarea) {
+      textarea.style.height = 'auto'; // Reset height
+      textarea.style.height = `${textarea.scrollHeight}px`; // Set to scrollHeight
+    }
+  };
+
+  useEffect(() => {
+    adjustTextareaHeight(textInputRef.current);
+  }, [value]);
+
+  return (
+    <div className={styles['links-column-flex']}>
       <label className={styles['form-label']}>
           {label}
       </label>
-      <input
+      <textarea
+          ref={textInputRef}
           className={styles['form-input']}
-          type="text"
           placeholder={placeholder}
           value={value}
-          onChange={onChange}
+          onChange={(e) => {
+            onChange(e);
+            adjustTextareaHeight(textInputRef.current);
+          }}
           autoComplete="off"
       />
-  </div>
-);
+    </div>
+  );
+};
 
 function getOrdinal(n: any) {
   const ordinals = ["th", "st", "nd", "rd"];
   const v = n % 100;
   return n + (ordinals[(v - 20) % 10] || ordinals[v] || ordinals[0]);
 }
-// Higher-order function to create common item structure
+
 const createItem = (type: any, agendaIndex: any, itemIndex: any, item: any, handleUpdate: any, onRemove: any) => {
-  let label = ''
-  if (type === 'leaderboard') { label = (getOrdinal(itemIndex + 1)) + ' place' }
-  else if (type === 'meetingTopics') { label = 'Item ' + (itemIndex + 1)}
-  else if (type === 'discussionPoints') { label = 'Discussion Point ' + (itemIndex + 1)}
-  else if (type === 'learningPoints') { label = 'Learning Point ' + (itemIndex + 1)}
-  else if (type === 'issues') { label = 'Issue ' + (itemIndex + 1)}
-  else { label = type + ' ' + (itemIndex + 1)}
+  let label = '';
+  if (type === 'leaderboard') { label = (getOrdinal(itemIndex + 1)) + ' place'; }
+  else if (type === 'meetingTopics') { label = 'Item ' + (itemIndex + 1); }
+  else if (type === 'discussionPoints') { label = 'Discussion Point ' + (itemIndex + 1); }
+  else if (type === 'learningPoints') { label = 'Learning Point ' + (itemIndex + 1); }
+  else if (type === 'issues') { label = 'Issue ' + (itemIndex + 1); }
+  else { label = type + ' ' + (itemIndex + 1); }
+
   const commonInput = (itemType: any, placeholder: any) => (
       <TextInput
           label={label}
@@ -76,7 +112,6 @@ const createItem = (type: any, agendaIndex: any, itemIndex: any, item: any, hand
       </button>
   );
 
-
   return (
       <div className={styles['row-flex-start']}>
           {commonInput(type, `${type.charAt(0).toUpperCase() + type.slice(1)}`)}
@@ -86,13 +121,10 @@ const createItem = (type: any, agendaIndex: any, itemIndex: any, item: any, hand
 };
 
 const Item = ({ type, item, agendaIndex, itemIndex, onUpdate, onRemove }: any) => {
-    // Determine what inputs to render based on item type
     const handleUpdate = (key: any, value: any) => {
         if (type === 'meetingTopics' || type === 'issues' || type === 'discussionPoints' || type === 'learningPoints' || type === 'leaderboard') {
-            // For 'issues', since it's an array of strings, update directly
             onUpdate(agendaIndex, itemIndex, value);
         } else {
-            // For other types, use the existing logic
             onUpdate(agendaIndex, itemIndex, { ...item, [key]: value });
         }
     };
@@ -146,4 +178,4 @@ const Item = ({ type, item, agendaIndex, itemIndex, onUpdate, onRemove }: any) =
     );
 };
   
-export default Item;
\ No newline at end of file
+export default Item;
diff --git a/components/SummaryAgendaItems.tsx b/components/SummaryAgendaItems.tsx
index 7e0962c..941184f 100644
--- a/components/SummaryAgendaItems.tsx
+++ b/components/SummaryAgendaItems.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useMyVariable } from '../context/MyVariableContext';
-import styles from '../styles/typea.module.css';
+import styles from '../styles/agendaitems.module.css';
 import Item from './Item';
 import { getDefaultAgendaItem } from '../utils/getDefaultAgendaItem';
 import { filterFormData } from '../utils/filterFormData';
@@ -410,7 +410,7 @@ const SummaryAgendaItems = ({ onUpdate }: any) => {
                     Agenda Title
                   </label>
                   <input
-                    className={styles['form-input']}
+                    className={styles['form-select']}
                     type="text"
                     placeholder="Agenda Item"
                     value={item.agenda}
diff --git a/components/SummaryMeetingInfo.tsx b/components/SummaryMeetingInfo.tsx
index d29a099..c706229 100644
--- a/components/SummaryMeetingInfo.tsx
+++ b/components/SummaryMeetingInfo.tsx
@@ -1,5 +1,6 @@
-import { useState, useEffect, useCallback } from 'react';
-import styles from '../styles/typea.module.css'; 
+// ../components/SummaryMeetingInfo.tsx
+import { useState, useEffect, useRef, useCallback } from 'react';
+import styles from '../styles/meetinginfo.module.css'; 
 import { useMyVariable } from '../context/MyVariableContext';
 import SelectNames from './SelectNames';
 import WorkingDocs from './WorkingDocs';
@@ -54,6 +55,19 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
   const [displayedWorkingDocs, setDisplayedWorkingDocs] = useState(workingDocs.length > 0 ? [] : [{ title: '', link: '' }]);
   const allWorkingDocs = [...workingDocs, ...displayedWorkingDocs];
 
+  const purposeRef = useRef<HTMLTextAreaElement>(null);
+
+  const adjustTextareaHeight = (textarea: HTMLTextAreaElement | null) => {
+    if (textarea) {
+      textarea.style.height = 'auto'; // Reset height
+      textarea.style.height = `${textarea.scrollHeight}px`; // Set to scrollHeight
+    }
+  };
+
+  useEffect(() => {
+    adjustTextareaHeight(purposeRef.current);
+  }, [meetingInfo.purpose]);
+
   const addNewDoc = () => {
     const newDoc = { title: '', link: '' };
     setDisplayedWorkingDocs([...displayedWorkingDocs, newDoc]);
@@ -78,7 +92,6 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
 
   const updateMyVariable = (e: any, index: number) => {
     const updatedMyVariable = { ...myVariable };
-    // Initialize workingDocs as an empty array if it's undefined
     if (!updatedMyVariable.summary.meetingInfo.workingDocs) {
       updatedMyVariable.summary.meetingInfo.workingDocs = [];
     }
@@ -87,7 +100,6 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
       const { name, value } = e.target;
       updatedMyVariable.summary.meetingInfo.workingDocs[index] = { ...updatedMyVariable.summary.meetingInfo.workingDocs[index], [name]: value };
     } else {
-      // Check if the array is not empty before calling splice
       if (updatedMyVariable.summary.meetingInfo.workingDocs.length > 0) {
         updatedMyVariable.summary.meetingInfo.workingDocs.splice(index, 1);
       }
@@ -110,10 +122,8 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
     const updatedInfo = { ...meetingInfo, [name]: selectedNames };
     setMeetingInfo(updatedInfo);
   };
-  
 
   useEffect(() => {
-    // Destructure the current meetingInfo from myVariable.summary.meetingInfo or provide defaults
     const {
       name = 'Weekly',
       date = '',
@@ -133,7 +143,6 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
       timestampedVideo = { url: '', intro: '', timestamps: '' }
     } = myVariable?.summary?.meetingInfo || {};
   
-    // Set the local meetingInfo state with the values from myVariable.summary.meetingInfo
     setMeetingInfo({
       name,
       date,
@@ -152,7 +161,7 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
       workingDocs,
       timestampedVideo
     });
-  }, [myVariable.summary?.meetingInfo]); // Add myVariable.summary.meetingInfo to the dependency array
+  }, [myVariable.summary?.meetingInfo]);
   
   const handleVideoDataUpdate = useCallback((newVideoData: any) => {
     setMeetingInfo(prevMeetingInfo => {
@@ -170,102 +179,105 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
     <>
     <div className={styles['form-column-flex']}>
     <div className={styles['row-flex-start']}>
-    <div className={styles['form-column-flex']}>
-      <div className={styles['row-flex-space-between']}>
-          <div className={styles['column-flex']}>
-            {myVariable.workgroup?.preferred_template?.meetingInfo?.name == 1 && (<>
-            <label className={styles['form-label']}>
-              Type of meeting:
-            </label>
-            <select
-                name="name"
-                value={meetingInfo.name || ""}
+      <div className={styles['form-column-flex']}>
+        <div className={styles['row-flex-space-between']}>
+            <div className={styles['column-flex']}>
+              {myVariable.workgroup?.preferred_template?.meetingInfo?.name == 1 && (<>
+              <label className={styles['form-label']}>
+                Type of meeting:
+              </label>
+              <select
+                  name="name"
+                  value={meetingInfo.name || ""}
+                  onChange={handleChange}
+                  className={styles['form-select']}
+                  title="Select the type of meeting. If it's a one-off event, please select 'One-off event'"
+              >
+                  <option value="Weekly">Weekly</option>
+                  <option value="Biweekly">Biweekly</option>
+                  <option value="Monthly">Monthly</option>
+                  <option value="One-off event">One-off event</option>
+              </select>
+              </>)}
+            </div>
+            <div className={styles['column-flex']}>
+              {myVariable.workgroup?.preferred_template?.meetingInfo?.date == 1 && (<>
+              {myVariable.summary?.meetingInfo?.date && (<label className={styles['form-label']}>Meeting Date: (Summary gets saved to this meeting date)</label>)}
+              {!myVariable.summary?.meetingInfo?.date && (<label className={styles['form-label']}>Meeting Date: </label>)}
+              <input
+                type="date"
+                name="date"
+                value={meetingInfo.date || ""}
                 onChange={handleChange}
-                className={styles['form-input']}
-                title="Select the type of meeting. If it's a one-off event, please select 'One-off event'"
-            >
-                <option value="Weekly">Weekly</option>
-                <option value="Biweekly">Biweekly</option>
-                <option value="Monthly">Monthly</option>
-                <option value="One-off event">One-off event</option>
-            </select>
-            </>)}
+                className={styles['form-select']}
+                title="Click the icon on the right to select a date"
+              />
+              </>)}
+            </div>
           </div>
-          <div className={styles['column-flex']}>
-            {myVariable.workgroup?.preferred_template?.meetingInfo?.date == 1 && (<>
-            {myVariable.summary?.meetingInfo?.date && (<label className={styles['form-label']}>Meeting Date: (Summary gets saved to this meeting date)</label>)}
-            {!myVariable.summary?.meetingInfo?.date && (<label className={styles['form-label']}>Meeting Date: </label>)}
-            <input
-              type="date"
-              name="date"
-              value={meetingInfo.date || ""}
-              onChange={handleChange}
-              className={styles['form-input']}
-              title="Click the icon on the right to select a date"
-            />
+          <div className={styles['row-flex-start']}>
+            {myVariable.workgroup?.preferred_template?.meetingInfo?.host == 1 && (
+            <div className={styles.people1}>
+              <label className={styles['form-label']}>
+                Facilitator:
+              </label>
+              <SelectNames 
+                key={meetingInfo.host}
+                onSelect={(selectedNames: any) => handleSelection('host', selectedNames)} 
+                initialValue={meetingInfo.host || ""} 
+              />
+            </div>)}
+            {myVariable.workgroup?.preferred_template?.meetingInfo?.documenter == 1 && (
+            <div className={styles.people2}>
+              <label className={styles['form-label']}>
+                Documenter:
+              </label>
+              <SelectNames 
+                key={meetingInfo.documenter}
+                onSelect={(selectedNames: any) => handleSelection('documenter', selectedNames)} 
+                initialValue={meetingInfo.documenter || ""} 
+              />
+            </div>)}
+            {myVariable.workgroup?.preferred_template?.meetingInfo?.translator == 1 && (
+            <div className={styles.people3}>
+              <label className={styles['form-label']}>
+                Translator:
+              </label>
+              <SelectNames 
+                key={meetingInfo.translator}
+                onSelect={(selectedNames: any) => handleSelection('translator', selectedNames)} 
+                initialValue={meetingInfo.translator || ""} 
+              />
+            </div>)}  
+          </div>
+          <div className={styles['row-flex-start']}>
+            <div className={styles.people2}>
+              {myVariable.workgroup?.preferred_template?.meetingInfo?.peoplePresent == 1 && (<>
+              <label className={styles['form-label']}>
+                Present:
+              </label>
+              <SelectNames 
+                key={meetingInfo.peoplePresent}
+                onSelect={(selectedNames: any) => handleSelection('peoplePresent', selectedNames)} 
+                initialValue={meetingInfo.peoplePresent || ""} 
+              />
             </>)}
           </div>
         </div>
-        <div className={styles['row-flex-start']}>
-          {myVariable.workgroup?.preferred_template?.meetingInfo?.host == 1 && (
-          <div className={styles.people1}>
-            <label className={styles['form-label']}>
-              Facilitator:
-            </label>
-            <SelectNames 
-              key={meetingInfo.host}
-              onSelect={(selectedNames: any) => handleSelection('host', selectedNames)} 
-              initialValue={meetingInfo.host || ""} 
-            />
-          </div>)}
-          {myVariable.workgroup?.preferred_template?.meetingInfo?.documenter == 1 && (
-          <div className={styles.people2}>
-            <label className={styles['form-label']}>
-              Documenter:
-            </label>
-            <SelectNames 
-              key={meetingInfo.documenter}
-              onSelect={(selectedNames: any) => handleSelection('documenter', selectedNames)} 
-              initialValue={meetingInfo.documenter || ""} 
-            />
-          </div>)}
-          {myVariable.workgroup?.preferred_template?.meetingInfo?.translator == 1 && (
-          <div className={styles.people3}>
-            <label className={styles['form-label']}>
-              Translator:
-            </label>
-            <SelectNames 
-              key={meetingInfo.translator}
-              onSelect={(selectedNames: any) => handleSelection('translator', selectedNames)} 
-              initialValue={meetingInfo.translator || ""} 
-            />
-          </div>)}  
-        </div>
-        <div className={styles['row-flex-start']}>
-          <div className={styles.people2}>
-            {myVariable.workgroup?.preferred_template?.meetingInfo?.peoplePresent == 1 && (<>
-            <label className={styles['form-label']}>
-              Present:
-            </label>
-            <SelectNames 
-              key={meetingInfo.peoplePresent}
-              onSelect={(selectedNames: any) => handleSelection('peoplePresent', selectedNames)} 
-              initialValue={meetingInfo.peoplePresent || ""} 
-            />
-          </>)}
-        </div>
-      </div>
       </div>
       <div className={styles['links-column-flex']}>
       {myVariable.workgroup?.preferred_template?.meetingInfo?.purpose == 1 && (<>
       <label className={styles['form-label']}>
         Purpose:
       </label>
-      <input
-        type="text"
+      <textarea
+        ref={purposeRef}
         name="purpose"
         value={meetingInfo.purpose || ""}
-        onChange={handleChange}
+        onChange={(e) => {
+          handleChange(e);
+          adjustTextareaHeight(purposeRef.current);
+        }}
         className={styles['form-input']}
         autoComplete="off"
         title="A sentence on what this group is about. Can be repeated for every summary"
@@ -280,7 +292,7 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
         name="townHallNumber"
         value={meetingInfo.townHallNumber || ""}
         onChange={handleChange}
-        className={styles['form-input']}
+        className={styles['form-select']}
         autoComplete="off"
         title="The number of the town hall meeting"
       />
@@ -294,7 +306,7 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
           name="meetingVideoLink"
           value={meetingInfo.meetingVideoLink || ""}
           onChange={handleChange}
-          className={styles['form-input']}
+          className={styles['form-select']}
           autoComplete="off"
         />
         </>)}
@@ -307,7 +319,7 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
           name="miroBoardLink"
           value={meetingInfo.miroBoardLink || ""}
           onChange={handleChange}
-          className={styles['form-input']}
+          className={styles['form-select']}
           autoComplete="off"
         />
         </>)}
@@ -320,7 +332,7 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
           name="otherMediaLink"
           value={meetingInfo.otherMediaLink || ""}
           onChange={handleChange}
-          className={styles['form-input']}
+          className={styles['form-select']}
           autoComplete="off"
         />
         </>)}
@@ -333,7 +345,7 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
           name="transcriptLink"
           value={meetingInfo.transcriptLink || ""}
           onChange={handleChange}
-          className={styles['form-input']}
+          className={styles['form-select']}
           autoComplete="off"
         />
         </>)}
@@ -346,7 +358,7 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
           name="mediaLink"
           value={meetingInfo.mediaLink || ""}
           onChange={handleChange}
-          className={styles['form-input']}
+          className={styles['form-select']}
           autoComplete="off"
         />
         </>)}
@@ -371,7 +383,7 @@ const SummaryMeetingInfo: React.FC<SummaryMeetingInfoProps> = ({ workgroup, onUp
           name="googleSlides"
           value={meetingInfo.googleSlides || ""}
           onChange={handleChange}
-          className={styles['form-input']}
+          className={styles['form-select']}
           autoComplete="off"
         />
       </>)}
diff --git a/components/SummaryTemplate.tsx b/components/SummaryTemplate.tsx
index f0decaf..6ccafc9 100644
--- a/components/SummaryTemplate.tsx
+++ b/components/SummaryTemplate.tsx
@@ -1,6 +1,6 @@
 // ../components/SummaryTemplate.tsx
 import { useState, useEffect } from "react";
-import styles from '../styles/typea.module.css'; 
+import styles from '../styles/summarytemplate.module.css'; 
 import { useMyVariable } from '../context/MyVariableContext';
 import SummaryMeetingInfo from './SummaryMeetingInfo'
 import SummaryAgendaItems from './SummaryAgendaItems'
@@ -283,24 +283,23 @@ const SummaryTemplate = ({ updateMeetings }: SummaryTemplateProps) => {
         {formData.meetingInfo.name && (<SummaryMeetingInfo workgroup={formData.workgroup} onUpdate={(info: any) => setFormData({...formData, meetingInfo: info})} />)}
         <SummaryAgendaItems onUpdate={(items: any) => setFormData({...formData, agendaItems: items})} />
         <Tags tags={tags} setTags={setTags} />
-        <button type="submit" disabled={loading} className={styles['submit-button']}>
+        <button type="submit" disabled={loading} className={styles.submitButton}>
           {loading ? "Loading..." : "Save"}
         </button>
         {myVariable.summary?.updated_at && (<p>{`(last saved ${formatTimestamp(myVariable.summary?.updated_at)})`}</p>)}
         <button
           type="button"
           onClick={handleCreateGoogleDoc}
-          className={styles['export-button']}
+          className={styles.exportButton}
           disabled={creatingDoc}
-          title="If you need to make the doc comment only, you'll have to create a copy of the doc."
         >
           {creatingDoc ? (
-            <span className={styles['flashing-text']}>Creating Google Doc...</span>
+            <span className={styles.flashingText}>Creating Google Doc...</span>
           ) : (
             "Create Google Doc"
           )}
         </button>
-        <p className={styles['popup-info']}>
+        <p className={styles.popupInfo}>
           (The document will open in a new tab if popups are enabled for this site)
         </p>
       </form>
diff --git a/components/WorkingDocs.tsx b/components/WorkingDocs.tsx
index e79d685..5caab31 100644
--- a/components/WorkingDocs.tsx
+++ b/components/WorkingDocs.tsx
@@ -74,8 +74,8 @@ const WorkingDocs = ({ handleChange, addNewDoc, docs, removeDoc, originalDocsCou
                   <a href={formatUrl(doc.link)} target="_blank" rel="noopener noreferrer">Link</a>
                 )}
               </td>
-              <td className={`${styles.td} ${styles.centerAligned}`}>
-                <button className={styles.removeButton} type="button" onClick={() => handleDocRemove(index)}>Remove</button>
+              <td className={`${styles.td} ${styles.centerAligned} ${styles.removeButtonColumn}`}>
+                <button className={styles.removeButton} type="button" onClick={() => handleDocRemove(index)}>X</button>
               </td>
             </tr>
           ))}
diff --git a/styles/agendaitems.module.css b/styles/agendaitems.module.css
new file mode 100644
index 0000000..5c23f50
--- /dev/null
+++ b/styles/agendaitems.module.css
@@ -0,0 +1,79 @@
+/* Agenda Items Styles */
+.agenda-item {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 15px;
+  margin-top: 10px;
+  margin-bottom: 25px;
+  background-color: rgb(22, 47, 97);
+}
+
+.agenda-title {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 4;
+}
+
+.action-item,
+.decision-item,
+.discussion-points {
+  border-radius: 5px;
+  padding: 10px;
+  margin: 10px;
+  background-color: black;
+}
+
+.remove-button,
+.add-button {
+  padding: 0.6rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+  color: white;
+  cursor: pointer;
+}
+
+.remove-button {
+  background-color: #680202;
+  margin-right: 1em;
+}
+
+.add-button {
+  background-color: rgb(6, 97, 113);
+  margin-left: 1em;
+}
+
+/* Form Styles */
+.form-label {
+  display: block;
+  margin-bottom: 0.1rem;
+  font-size: 0.9rem;
+}
+
+.form-input,
+.form-textarea,
+.form-select {
+  padding: 0.6rem;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+  margin-right: 1em;
+  background-color: black;
+  color: white;
+}
+
+.form-select {
+  border: 1px solid #ccc;
+}
+
+/* Layout Styles */
+.row-flex-start {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.column-flex {
+  display: flex;
+  flex-direction: column;
+}
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 04bc801..d22d428 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,3 +1,4 @@
+/* ../styles/globals */
 :root {
     --max-width: 1100px;
     --border-radius: 12px;
@@ -146,22 +147,27 @@
     outline: 4px auto -webkit-focus-ring-color;
   }
 
-  @media (max-width: 600px) {
-    .routes {
-      flex-direction: column; 
-      align-items: stretch; 
-    }
-  
-    .navLeft {
-      display: flex;
-      flex-direction: column;
-      width: 100%; 
-    }
-  
-    .navitems {
-      width: 90%; 
-      text-align: center; 
-      margin: 0.2em;
-    }
-  }  
-  
\ No newline at end of file
+  @media (max-width: 900px) {
+  .routes {
+    position: static;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 1rem 0;
+  }
+
+  .navLeft {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .navitems {
+    width: 100%;
+    text-align: center;
+    margin: 0.2em 0;
+  }
+
+  .component {
+    margin-top: 0;
+  }
+}
\ No newline at end of file
diff --git a/styles/items.module.css b/styles/items.module.css
new file mode 100644
index 0000000..b9c7654
--- /dev/null
+++ b/styles/items.module.css
@@ -0,0 +1,58 @@
+.column-flex {
+  display: flex;
+  flex-direction: column;
+}
+
+.row-flex-start {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.links-column-flex {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 0.1rem;
+  font-size: 0.9rem;
+}
+
+.form-input,
+.form-textarea {
+  padding: 0.6rem;
+  border-radius: 4px;
+  margin-bottom: 0rem;
+  margin-right: 1em;
+  background-color: black;
+  color: white;
+  overflow-y: hidden;
+}
+
+.remove-button {
+  padding: 0.6rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  margin-right: 1em;
+  background-color: #680202;
+  color: white;
+  cursor: pointer;
+}
+
+.item-container {
+  margin-bottom: 1rem;
+}
+
+.action-item,
+.decision-item {
+  border-radius: 5px;
+  padding: 10px;
+  margin: 10px;
+  background-color: black;
+}
\ No newline at end of file
diff --git a/styles/meetinginfo.module.css b/styles/meetinginfo.module.css
new file mode 100644
index 0000000..3921f45
--- /dev/null
+++ b/styles/meetinginfo.module.css
@@ -0,0 +1,73 @@
+/* Base styles */
+.form-column-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+  
+  .row-flex-start,
+  .row-flex-space-between {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    width: 100%;
+  }
+  
+  .column-flex,
+  .links-column-flex {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 200px;
+  }
+  
+  /* Form field styles */
+  .form-label {
+    font-size: 0.9rem;
+    margin-bottom: 0.1rem;
+    margin-top: 0.5rem;
+    color: #b1d5fc; /* Light blue color for labels */
+  }
+  
+  .form-input,
+  .form-select {
+    width: 100%;
+    padding: 0.6rem;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    background-color: black;
+    color: white;
+    font-size: 1rem;
+  }
+  
+  .form-input {
+    resize: vertical;
+    min-height: 30px;
+  }
+  
+  /* People section styles */
+  .people1,
+  .people2,
+  .people3 {
+    flex: 1;
+    min-width: 200px;
+  }
+  
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .row-flex-start,
+    .row-flex-space-between {
+      flex-direction: column;
+    }
+  
+    .column-flex,
+    .links-column-flex,
+    .people1,
+    .people2,
+    .people3 {
+      width: 100%;
+    }
+  }
\ No newline at end of file
diff --git a/styles/meetingsummary.module.css b/styles/meetingsummary.module.css
index 2cb084e..365adb6 100644
--- a/styles/meetingsummary.module.css
+++ b/styles/meetingsummary.module.css
@@ -1,8 +1,8 @@
 .container {
   display: flex;
   flex-direction: column;
-  margin-top: 4.5em;  /* Leaving space for the top fixed navbar */
-  height: calc(100vh - 4.5em);
+  margin-top: 4.5em;
+  min-height: calc(100vh - 4.5em);
 }
 
 .navbar {
@@ -25,24 +25,37 @@
   margin-left: 5px;
   margin-top: 5px;
 }
-@media (max-width: 600px) {
+@media (max-width: 900px) {
+  .container {
+    margin-top: 0;
+  }
+
   .navbar {
-    position: relative; /* Change from fixed to relative */
+    position: static;
     width: 100%;
-    margin-top: 210px; /* Adjust margin as needed */
-    display: flex;
     flex-direction: column;
-    flex-wrap: wrap;
-    background-color: black;
-    z-index: 9998; /* Adjust z-index as needed */
+    align-items: center;
+    padding: 1rem 0;
   }
+
   .mainContent {
-    display: flex;
-    justify-content: space-around;
-    flex-grow: 1;
-    padding: 1rem;
-    margin-left: 5px;
-    margin-top: -17px;
+    margin-top: 1rem;
+  }
+
+  .select,
+  .navButton,
+  .resetButton {
+    width: 90%;
+    max-width: 300px;
+  }
+
+  .column-flex {
+    width: 100%;
+    align-items: center;
+  }
+
+  .form-label {
+    text-align: center;
   }
 }
 
diff --git a/styles/summarytemplate.module.css b/styles/summarytemplate.module.css
new file mode 100644
index 0000000..3a01a09
--- /dev/null
+++ b/styles/summarytemplate.module.css
@@ -0,0 +1,67 @@
+.form-container {
+  max-width: 1000px;
+  padding: 2rem;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+
+.gitbookForm {
+  display: flex;
+  flex-direction: column;
+}
+
+.submitButton,
+.exportButton {
+  background-color: #007bff;
+  color: white;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 2em;
+  font-weight: bold;
+  width: 100%; /* Make buttons full width */
+}
+
+.submitButton {
+  height: 4em;
+  font-size: larger;
+}
+
+.submitButton:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.loading {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 4.5em);
+  justify-content: center;
+  align-items: center;
+  font-size: 3rem;
+  animation: fadeInOut 2s ease-in-out infinite;
+  color: aquamarine;
+}
+
+@keyframes fadeInOut {
+  0% { opacity: 0; }
+  50% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+.flashingText {
+  animation: flash 1s infinite;
+}
+
+@keyframes flash {
+  0% { opacity: 1; }
+  50% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.popupInfo {
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  color: #666;
+}
\ No newline at end of file
diff --git a/styles/typea.module.css b/styles/typea.module.css
index ff3f5cd..2493898 100644
--- a/styles/typea.module.css
+++ b/styles/typea.module.css
@@ -43,7 +43,6 @@
 .form-column-flex {
   display: flex;
   flex-direction: column;
-  margin-right: 50px;
 }
 
 .links-column-flex {
@@ -80,14 +79,25 @@
   font-size: 0.9rem;
 }
 
+.form-input{
+  min-height: 30px;
+}
+
 .form-input,
 .form-textarea {
   padding: 0.6rem;
-  border: 1px solid #ccc;
   border-radius: 4px;
   margin-bottom: 1rem; 
   margin-right: 1em;
-  background-color: #2b1f1f;
+  background-color: black;
+  color: white;
+  overflow-y: hidden;
+}
+
+.form-textarea {
+  min-height: 120px;
+  min-width: 500px;
+  background-color: black;
   color: white;
 }
 
@@ -97,14 +107,7 @@
   border-radius: 4px;
   margin-bottom: 1rem; 
   margin-right: 1em;
-  background-color: #2b1f1f;
-  color: white;
-}
-
-.form-textarea {
-  min-height: 120px;
-  min-width: 500px;
-  background-color: #2b1f1f;
+  background-color: black;
   color: white;
 }
 
@@ -130,7 +133,7 @@
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 15px;
-  margin: 10px;
+  margin-top: 10px;
   margin-bottom: 25px;
   background-color: rgb(22, 47, 97);
 }
@@ -177,7 +180,7 @@
   border-radius: 4px;
   margin-bottom: 1rem; 
   margin-left: 1em;
-  background-color: rgb(1, 121, 61);
+  background-color: rgb(6, 97, 113);
   color: white;
   cursor: pointer;
 }
@@ -220,7 +223,7 @@
   border-radius: 4px;
   margin-bottom: 1rem; 
   margin-right: 1em;
-  background-color: #2b1f1f;
+  background-color: black;
   color: white;
   min-height: 300px;
   width: 700px;
diff --git a/styles/workingDocsTable.module.css b/styles/workingDocsTable.module.css
index 29dd8fb..4a187ce 100644
--- a/styles/workingDocsTable.module.css
+++ b/styles/workingDocsTable.module.css
@@ -13,7 +13,7 @@
 }
 
 .centerAligned {
-  text-align: center; 
+  text-align: center;
 }
 
 .thead {
@@ -24,7 +24,7 @@
 .input {
   padding: 6px 12px;
   border: 1px solid #ccc;
-  background-color: #2b1f1f;
+  background-color: black;
   color: white;
   border-radius: 4px;
   width: 100%;
@@ -36,7 +36,7 @@
 }
 
 .linkCell {
-  width: 150px; 
+  width: 150px;
 }
 
 .link:hover {
@@ -44,7 +44,7 @@
 }
 
 .button {
-  background-color: #4CAF50;
+  background-color: #08617a;
   color: white;
   padding: 10px 15px;
   border: none;
@@ -57,25 +57,33 @@
 }
 
 .button:hover {
-  background-color: #419345;
+  background-color: #0d89cb;
 }
 
 .removeButton {
-    background-color: #982626;
-    color: white;
-    padding: 0.3em;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-  }
-  
+  background-color: #982626;
+  color: white;
+  padding: 0.3em;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  width: 100%;
+  height: 100%;
+}
+
 .removeButton:hover {
   background-color: #742020;
 }
 
 .label {
   display: block;
-  margin-bottom: 0.1rem;
-  font-size: 0.9rem;
+  margin-top: 0.5rem;
+  font-size: 1.3rem;
 }
+
+/* New styles for the remove button column */
+.removeButtonColumn {
+  width: 30px;
+  padding: 0;
+}
\ No newline at end of file