adding done image

packages/web/components/Layouts/DynamicMeLayout.tsx

@@ -9,10 +9,10 @@ export default function getDynamicMeLayout(page: React.ReactElement) {
     <div className="flex flex-col">
       <Header />
 
-      <div className="flex-1 flex flex-row items-baseline">
+      <div className="flex-1 flex flex-row items-stretch">
         <Sidebar />
 
-        <div className="flex flex-col px-20 items-baseline flex-1 container mx-auto">
+        <div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
           {page}
         </div>
       </div>

packages/web/pages/s/done.tsx

@@ -1,8 +1,22 @@
 import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout";
 import React from "react";
+import { FaCheck } from "react-icons/fa";
 
 export default function Done() {
-  return <div>All caught up.</div>;
+  return (
+    <div className="mx-auto my-auto flex flex-col">
+      <img
+        src="/illustrations/undraw_scooter_re_lrsb.svg"
+        className="h-[15rem] mx-auto my-auto"
+      />
+
+      <span></span>
+      <span className="text-slate-400 text-center mt-5">
+        Add things to <FaCheck className="inline" /> done to <br></br> clear
+        your mind.
+      </span>
+    </div>
+  );
 }
 
 Done.getLayout = function getLayout(page: React.ReactElement) {

packages/web/pages/s/drawer.tsx

@@ -0,0 +1,10 @@
+import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout";
+import React from "react";
+
+export default function Drawer() {
+  return <div>All caught up.</div>;
+}
+
+Drawer.getLayout = function getLayout(page: React.ReactElement) {
+  return getDynamicMeLayout(page);
+};

packages/web/pages/s/rooms.tsx

@@ -0,0 +1,10 @@
+import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout";
+import React from "react";
+
+export default function Rooms() {
+  return <div>All caught up.</div>;
+}
+
+Rooms.getLayout = function getLayout(page: React.ReactElement) {
+  return getDynamicMeLayout(page);
+};