cleaning things up and now going for different routing scheme

packages/web/components/v2/Header.tsx

@@ -99,12 +99,12 @@ export default function Header() {
       {/* controls */}
       <div className="flex flex-row items-center space-x-5 px-5">
         <FaHeadphones
-          className="text-xl text-slate-200 
-        hover:cursor-pointer hover:text-white hover:scale-110 trasition-all animate-pulse"
+          className="text-xl text-teal-500 
+        hover:cursor-pointer 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"
+          className="text-xl text-teal-500
+        hover:cursor-pointer hover:scale-110 trasition-all animate-pulse"
         />
       </div>
 

packages/web/components/v2/Sidebar.tsx

@@ -10,8 +10,6 @@ import {
   FaGripHorizontal,
   FaDotCircle,
   FaUser,
-  FaPhoneSlash,
-  FaWalking,
   FaMicrophone,
   FaPlay,
   FaCircle,
@@ -57,6 +55,17 @@ function Sidebar() {
             Conversations
           </span>
 
+          <span className="flex flex-row items-center ml-2">
+            <FaDotCircle className="text-orange-500 text-md animate-pulse" />
+
+            <span
+              className="text-xs tracking-widest font-semibold 
+            text-slate-300 uppercase ml-1"
+            >
+              Live
+            </span>
+          </span>
+
           <span className="text-slate-300 text-md ml-auto">4</span>
         </span>
 
@@ -129,99 +138,14 @@ function Sidebar() {
           </span>
         </span>
 
-        <span
-          onClick={() => handleRoute(Routes.rooms)}
-          className="flex flex-row items-center hover:cursor-pointer transition-all group"
-        >
-          <span
-            className={`w-5 h-5 -translate-x-4 rounded bg-rose-500 ${
-              currPage == Routes.rooms ? "visible" : "invisible"
-            }`}
-          ></span>
-          <FaGripHorizontal
-            className={`ml-8 mr-2 text-lg ${
-              currPage == Routes.rooms ? "text-rose-500" : "text-slate-400"
-            } group-hover:text-slate-600`}
-          />
-
-          <span className="text-md text-slate-400 font-semibold group-hover:text-slate-600">
-            Rooms
-          </span>
-
-          <span className="ml-2 text-emerald-700 bg-emerald-200 bg-opacity-20 p-1 rounded-md text-xs font-semibold flex items-center flex-row space-x-1">
-            <HiSpeakerphone />
-            <span>new</span>
-          </span>
-
-          <span className="flex flex-row items-center ml-auto">
-            <FaDotCircle className="text-orange-500 text-md animate-pulse" />
-
-            <span
-              className="text-xs tracking-widest font-semibold 
-            text-slate-300 uppercase ml-1"
-            >
-              Live
-            </span>
-          </span>
-        </span>
-
         <Divider />
       </div>
 
-      {/* Live Rooms */}
-      <div className="flex flex-col items-start px-5 ml-8 py-5 space-y-2 w-full">
-        {/* section title */}
-        <span className="flex flex-row items-center ">
-          <FaDotCircle className="text-orange-500 text-lg" />
-
-          <span className="text-md tracking-widest font-semibold text-slate-300 uppercase ml-1">
-            Live
-          </span>
-        </span>
-
-        {/* list of current rooms */}
-        <span className="flex flex-row items-center bg-teal-600 rounded-lg shadow-lg p-2 w-full">
-          <Avatar.Group
-            maxCount={2}
-            size="large"
-            maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
-          >
-            <Avatar src="https://joeschmoe.io/api/v1/random" />
-            <Avatar style={{ backgroundColor: "#f56a00" }}>K</Avatar>
-            <Avatar style={{ backgroundColor: "#87d068" }} icon={<FaUser />} />
-            <Avatar style={{ backgroundColor: "#1890ff" }} icon={<FaUser />} />
-          </Avatar.Group>
-
-          <span className="text-white ml-2 font-semibold">Cafeteria</span>
-
-          <FaPhoneSlash className="ml-auto text-red-500 text-2xl" />
-        </span>
-
-        <span className="group flex flex-row items-center bg-slate-50 rounded-lg shadow-lg p-2 w-full">
-          <Avatar.Group
-            maxCount={2}
-            size="large"
-            maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
-          >
-            <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
-          </Avatar.Group>
-
-          <span className="text-slate-400 ml-2">Chillin and Coding</span>
-
-          <span
-            className="ml-auto invisible 
-          group-hover:visible hover:cursor-pointer transition-all"
-          >
-            <FaWalking className="text-teal-600 text-2xl" />
-          </span>
-        </span>
-      </div>
-
       {/* pinned items */}
       <div className="flex flex-col items-start px-5 ml-8 py-5 space-y-2 w-full">
         {/* section title */}
         <span className="flex flex-row items-center w-full">
-          <FaRocket className="text-sky-400 text-lg mr-1" />
+          <FaRocket className="text-sky-500 text-lg mr-1" />
 
           <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
             Priority

packages/web/pages/s/drawer.tsx

@@ -1,8 +1,22 @@
 import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout";
 import React from "react";
+import { FaLink } from "react-icons/fa";
 
 export default function Drawer() {
-  return <div>All caught up.</div>;
+  return (
+    <div className="mx-auto my-auto flex flex-col">
+      <img
+        src="/illustrations/undraw_share_link_qtxe.svg"
+        className="h-[15rem] mx-auto my-auto"
+      />
+
+      <span></span>
+      <span className="text-slate-400 text-center mt-5">
+        A place to <FaLink className="inline" /> bookmark that <br></br> drive
+        folder, GitHub repo, video, Jira ticket.
+      </span>
+    </div>
+  );
 }
 
 Drawer.getLayout = function getLayout(page: React.ReactElement) {

packages/web/pages/s/index.tsx

@@ -5,10 +5,12 @@ import {
   FaCheck,
   FaCheckDouble,
   FaCircle,
+  FaDotCircle,
   FaGithub,
   FaRegClock,
   FaRocket,
   FaUser,
+  FaWalking,
 } from "react-icons/fa";
 import React from "react";
 import getDynamicMeLayout from "../../components/Layouts/DynamicMeLayout";
@@ -27,12 +29,46 @@ function Convos() {
   return (
     <>
       <span className="flex flex-row items-center mb-5 px-5 w-full">
-        <FaRocket className="text-sky-400 text-lg mr-1" />
+        <FaDotCircle className="text-orange-500 text-lg mr-1" />
+        <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
+          Live
+        </span>
+      </span>
+
+      {/* row of live room cards */}
+      <span className="flex flex-row flex-wrap">
+        {/* engineering rooms */}
+        <span className="group relative flex flex-row items-center bg-slate-50 rounded-lg border p-5">
+          <Avatar.Group
+            maxCount={3}
+            size={{ xs: 1000 }}
+            maxStyle={{ color: "#f56a00", backgroundColor: "#fde3cf" }}
+          >
+            <Avatar
+              src="https://joeschmoe.io/api/v1/random"
+              style={{ backgroundColor: "cyan" }}
+            />
+            <Avatar src="https://joeschmoe.io/api/v1/100" />
+            <Avatar src="https://joeschmoe.io/api/v1/2" />
+            <Avatar src="https://joeschmoe.io/api/v1/10" />
+            <Avatar src="https://joeschmoe.io/api/v1/8" />
+          </Avatar.Group>
+
+          <span className="text-md font-semibold ml-2 mr-10">Engineering</span>
+
+          <span className="text-xs text-slate-300 group-hover:invisible">
+            {"01:20"}
+          </span>
+
+          <FaWalking className="absolute right-5 text-slate-50 group-hover:text-teal-600 text-lg transition-all -z-10 group-hover:z-10" />
+        </span>
+      </span>
+
+      <span className="flex flex-row items-center mb-5 px-5 w-full mt-10">
+        <FaRocket className="text-sky-500 text-lg mr-1" />
         <span className="text-md tracking-widest font-semibold text-slate-300 uppercase">
           Priority
         </span>
-
-        <FaCheckDouble className="text-slate-300 ml-auto text-lg" />
       </span>
 
       {/* Today */}
@@ -48,7 +84,7 @@ function Convos() {
         {/* engineering */}
         <span
           className="py-2 px-4 border-t border-t-slate-200 flex flex-row hover:bg-slate-50 transition-all
-         items-center first:rounded-t-lg last:rounded-b-lg"
+         items-center"
         >
           <FaCircle className="text-orange-500 mr-2 animate-pulse" />
 
@@ -110,7 +146,7 @@ function Convos() {
         {/* general */}
         <span
           className="group relative border-t border-t-slate-200 hover:bg-slate-50 
-        transition-all py-2 px-4 flex flex-row items-center first:rounded-t-lg last:rounded-b-lg"
+        transition-all py-2 px-4 flex flex-row items-center"
         >
           <FaCircle className="text-slate-100 mr-2 animate-pulse" />
 
@@ -164,7 +200,7 @@ function Convos() {
         {/* one on one chat with sydney */}
         <span
           className="group py-2 border-t border-t-slate-200 last:border-b hover:bg-slate-50 transition-all
-         relative px-4 flex flex-row items-center first:rounded-t-lg last:rounded-b-lg"
+         relative px-4 flex flex-row items-center"
         >
           <FaCircle className="text-orange-500 mr-2 animate-pulse" />