Feature/smoother collapsing tiles

src/components/planner/Tiles/SemesterTile.tsx

@@ -93,11 +93,43 @@
       );
     };
 
+    const outerRef = useRef(null);
+    function toggleHeight() {
+      if (open) {
+        collapseSection(outerRef.current!);
+      } 
+      else {
+        expandSection(outerRef.current!);
+      }
+    }
+
+    function collapseSection(element: HTMLElement) {
+      var sectionHeight = element.scrollHeight;
+      setTimeout(() => {
+        element.style.height = sectionHeight + 'px';
+        requestAnimationFrame(function() {
+          element.style.height = ((outerRef.current! as HTMLElement).childNodes[1].lastChild?.textContent === 'Drag courses here') ? '140px' : '170px';
+        }); 
+      }, 100);
+    }
+
+    function expandSection(element: HTMLElement) {
+      let zero = performance.now();
+      requestAnimationFrame(animate);
+      function animate() {
+        const value = (performance.now() - zero) / 700;
+        if (value < 1) {
+          element.style.height = (element.scrollHeight + 8) + 'px';
+          requestAnimationFrame(animate);
+        }
+      }
+    }
+
     // QUESTION: isValid color?
     return (
       <div
-        ref={ref}
-        className={`tutorial-editor-3 flex h-fit select-none flex-col gap-y-2 overflow-hidden rounded-2xl border border-neutral-300 ${
+        ref={outerRef}
+        className={`tutorial-editor-3 flex h-fit select-none flex-col gap-y-2 overflow-hidden rounded-2xl border border-neutral-300 transition-all duration-700 ease-in-out ${
           semester.locked ? 'bg-neutral-200' : 'bg-white'
         }`}
       >
@@ -110,7 +142,10 @@
                   open ? '-rotate-90' : 'rotate-90'
                 } ml-auto h-3 w-3 transform cursor-pointer text-neutral-500 transition-all duration-500`}
                 fontSize="inherit"
-                onClick={() => setOpen(!open)}
+                onClick={(MouseEvent) => {
+                  toggleHeight();
+                  setOpen(!open);
+                }}
               />
             </div>
           </article>
@@ -153,8 +188,8 @@
             />
           )}
           <article
-            className={`mb-5 flex flex-col gap-y-4 overflow-hidden transition-all duration-700 ${
-              open ? 'max-h-[999px]' : 'max-h-0'
+            className={`mb-5 flex flex-col gap-y-4 overflow-hidden transition-all duration-700 ease-in-out ${
+              open ? 'h-full' : 'h-0'
             }`}
           >
             {semester.courses.map((course) => (

src/components/planner/TransferBank.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, useState, useRef } from 'react';
 
 import ChevronIcon from '@/icons/ChevronIcon';
 
@@ -9,22 +9,55 @@
 const TransferBank: FC<TransferBankProps> = ({ transferCredits }) => {
   const [open, setOpen] = useState(true);
 
+  const bankRef = useRef(null);
+  function toggleHeight() {
+    if (open) {
+      collapseSection(bankRef.current!);
+    } 
+    else {
+      expandSection(bankRef.current!);
+    }
+  }
+
+  function collapseSection(element: HTMLElement) {
+    var sectionHeight = element.scrollHeight;
+    setTimeout(() => {
+      element.style.height = sectionHeight + 'px';
+      requestAnimationFrame(function() {
+        element.style.height = '50px';
+      }); 
+    }, 100);
+  }
+
+  function expandSection(element: HTMLElement) {
+    let zero = performance.now();
+    requestAnimationFrame(animate);
+    function animate() {
+      const value = (performance.now() - zero) / 1000;
+      if (value < 1) {
+        element.style.height = element.scrollHeight + 'px';
+        requestAnimationFrame(animate);
+      }
+    }
+  }
+
   return (
-    <section className="w-full rounded-2xl border border-neutral-200 bg-generic-white px-5 py-3 shadow-sm">
+    <section ref={bankRef} className="w-full rounded-2xl border border-neutral-200 bg-generic-white px-5 py-3 shadow-sm flex-shrink-0 overflow-hidden transition-all duration-1000 ease-in-out">
       <article className="flex items-center justify-between">
         <h5 className="text-xl font-semibold text-primary-900">Transfer Credits</h5>
         <ChevronIcon
           className={`${
             open ? '-rotate-90' : 'rotate-90'
           } h-3 w-3 transform cursor-pointer text-neutral-500 transition-all duration-500`}
           fontSize="inherit"
-          onClick={() => setOpen(!open)}
+          onClick={() => {
+            toggleHeight();
+            setOpen(!open);
+          }}
         />
       </article>
       <ol
-        className={`mt-4 flex flex-wrap gap-x-10 gap-y-3 overflow-hidden transition-all duration-1000 ${
-          open ? 'max-h-[999px]' : 'max-h-0'
-        }`}
+        className={`mt-4 flex flex-wrap gap-x-10 gap-y-3 transition-all duration-1000 ease-in-out`}
       >
         {transferCredits.map((credit, i) => (
           <li