adding more with stale states

packages/web/components/MainLogo.tsx

@@ -1,6 +1,6 @@
 export default function MainLogo({ ...props }) {
   return (
-    <span {...props} id="main-title">
+    <span id="main-title" {...props}>
       nirvana
     </span>
   );

packages/web/components/v2/Header.tsx

@@ -1,3 +1,4 @@
+// import Routes from "@nirvana/common/helpers/routes";
 import { Menu, Dropdown, Avatar } from "antd";
 import { useRouter } from "next/router";
 import { useRef } from "react";
@@ -16,6 +17,9 @@ import UserStatusBubble from "../UserStatusBubble";
 export default function Header() {
   const router = useRouter();
 
+  const currPage = router.pathname;
+  console.log(currPage);
+
   const UserMenu = (
     <Menu title="user menu">
       <Menu.Item
@@ -58,11 +62,29 @@ export default function Header() {
     SELECT_SEARCH: selectSearch,
   };
 
+  // let headerBgColorClasses: string;
+  // switch (currPage) {
+  //   case Routes.convos:
+  //     headerBgColorClasses = "bg-teal-600";
+  //     break;
+  //   case Routes.done:
+  //     headerBgColorClasses = "bg-emerald-500";
+  //     break;
+  //   case Routes.later:
+  //     headerBgColorClasses = "bg-purple-500";
+  //     break;
+  //   case Routes.priority:
+  //     headerBgColorClasses = "bg-sky-500";
+  //     break;
+  // }
+
   return (
-    <div className="flex flex-row justify-start items-center py-3 px-10 bg-slate-50 border-b mb-10">
+    <div
+      className={`flex flex-row justify-start items-center py-3 px-10 bg-slate-50 border-b mb-10`}
+    >
       <GlobalHotKeys handlers={handlers} keyMap={keyMap} />
 
-      <MainLogo className="text-3xl" />
+      <MainLogo className="text-3xl text-white" />
 
       {/* search bar */}
       <div className="mx-auto flex flex-row items-center space-x-2">
@@ -76,8 +98,14 @@ export default function Header() {
 
       {/* controls */}
       <div className="flex flex-row items-center space-x-5 px-5">
-        <FaHeadphones className="text-xl text-teal-600 hover:cursor-pointer hover:scale-110 trasition-all animate-pulse" />
-        <FaMicrophoneAlt className="text-xl text-teal-600 hover:cursor-pointer hover:scale-110 trasition-all animate-pulse" />
+        <FaHeadphones
+          className="text-xl text-slate-200 
+        hover:cursor-pointer hover:text-white hover:scale-110 trasition-all animate-pulse"
+        />
+        <FaMicrophoneAlt
+          className="text-xl text-slate-200 
+        hover:cursor-pointer hover:text-white hover:scale-110 trasition-all animate-pulse"
+        />
       </div>
 
       {/* profile section */}

packages/web/pages/s/later.tsx

@@ -1,8 +1,23 @@
 import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout";
 import React from "react";
+import { FaRegClock } from "react-icons/fa";
 
 export default function Later() {
-  return <div>All caught up.</div>;
+  return (
+    <div className="mx-auto my-auto flex flex-col">
+      <img
+        src="/illustrations/undraw_season_change_f99v.svg"
+        className="h-[15rem] mx-auto my-auto"
+      />
+
+      <span></span>
+      <span className="text-slate-400 text-center mt-5">
+        Focusing right now? <br></br> No worries, go through low-priority{" "}
+        <br></br>
+        conversations <FaRegClock className="inline" /> later.
+      </span>
+    </div>
+  );
 }
 
 Later.getLayout = function getLayout(page: React.ReactElement) {

packages/web/pages/s/priority.tsx

@@ -1,8 +1,23 @@
 import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout";
 import React from "react";
+import { FaRocket } from "react-icons/fa";
 
 export default function Priority() {
-  return <div>All caught up.</div>;
+  return (
+    <div className="mx-auto my-auto flex flex-col">
+      <img
+        src="/illustrations/undraw_team_collaboration_re_ow29.svg"
+        className="h-[15rem] mx-auto my-auto"
+      />
+
+      <span></span>
+      <span className="text-slate-400 text-center mt-5">
+        One place for your most important
+        <br></br>people and items <FaRocket className="inline" />.<br></br>
+        <span className="text-red-600">Keep this clean at all costs.</span>
+      </span>
+    </div>
+  );
 }
 
 Priority.getLayout = function getLayout(page: React.ReactElement) {