creating main flow for the create conversation page

packages/web/components/v2/CreateConversation.tsx

@@ -1,7 +1,7 @@
 import { Select, Tag } from "antd";
 import Avatar from "antd/lib/avatar/avatar";
 import { useEffect, useRef } from "react";
-import { FaRegTimesCircle } from "react-icons/fa";
+import { FaPaperPlane, FaRegTimesCircle } from "react-icons/fa";
 
 const options = [
   { value: "gold" },
@@ -22,9 +22,9 @@ export default function CreateConversation() {
   // if it's an existing user, then show a nice chip of that user's profile picture and their name
 
   return (
-    <div className="mx-auto my-auto w-96">
+    <div className="mx-auto my-auto w-96 flex flex-col">
       <Select
-        placeholder={"Look up email addresses, names, etc."}
+        placeholder={"Look up emails, names, etc."}
         tagRender={tagRender}
         style={{ width: "100%" }}
         options={options}
@@ -35,22 +35,91 @@ export default function CreateConversation() {
         ref={input}
       />
 
+      <span className="flex flex-row items-center mt-10 mb-2">
+        <span className="uppercase tracking-widest text-slate-400 font-semibold">
+          Selected
+        </span>
+        <button className="ml-auto text-slate-400">clear</button>
+      </span>
+
       {/* list of selected people who are nirvana users */}
-      <span className="flex flex-row flex-wrap mt-10">
+
-        <span className="flex flex-row items-center py-1 px-3 space-x-2 bg-sky-200 rounded-full">
+      <span className="flex flex-col">
+        <span className="flex flex-row items-center py-1 border-t">
+          <Avatar shape="square" size={"small"}>
+            A
+          </Avatar>
+
+          <span className="flex flex-col ml-2">
+            <span className="text-slate-400 text-xs">
+              {"[email protected]"}
+            </span>
+            <span className="text-orange-500 text-xs">
+              Not a valid Nirvana user.
+            </span>
+          </span>
+
+          <button className="p-2 rounded-full hover:cursor-pointer text-sky-500 ml-auto">
+            <FaPaperPlane className="ml-auto text-lg" />
+          </button>
+        </span>
+        <span className="flex flex-row items-center py-1 border-t">
           <Avatar
             src={"https://joeschmoe.io/api/v1/random"}
             shape="square"
             size={"small"}
           />
 
-          <span className="text-sky-500 font-bold">{"Joe Smoe"}</span>
+          <span className="flex flex-col ml-2">
+            <span className="text-teal-500 font-bold">{"Joe Smoe"}</span>
+            <span className="text-slate-400 text-xs">
+              {"[email protected]"}
+            </span>
+          </span>
 
-          <button className="p-2 rounded-full hover:cursor-pointer text-sky-300">
+          <button className="p-2 rounded-full hover:cursor-pointer text-orange-500 ml-auto">
+            <FaRegTimesCircle className="ml-auto text-lg" />
+          </button>
+        </span>
+        <span className="flex flex-row items-center py-1 border-t">
+          <Avatar
+            src={"https://joeschmoe.io/api/v1/2"}
+            shape="square"
+            size={"small"}
+          />
+
+          <span className="flex flex-col ml-2">
+            <span className="text-teal-500 font-bold">{"Elon Musk"}</span>
+            <span className="text-slate-400 text-xs">{"[email protected]"}</span>
+          </span>
+
+          <button className="p-2 rounded-full hover:cursor-pointer text-orange-500 ml-auto">
             <FaRegTimesCircle className="ml-auto text-lg" />
           </button>
         </span>
       </span>
+
+      <span className="flex flex-col mt-10">
+        <span className="uppercase tracking-widest text-slate-400 font-semibold">
+          Name
+        </span>
+        <span className="text-slate-300 text-xs">
+          Name this conversation: engineering, hangout, lunch time, or leave it
+          as is.
+        </span>
+
+        <input
+          className="p-2 rounded mt-2 bg-slate-50"
+          placeholder="engineering, hangout, kitchen..."
+        />
+      </span>
+
+      <button
+        className="rounded p-2 border flex flex-row items-center space-x-2
+            text-white font-semibold text-xs ml-auto mt-5 bg-teal-600 hover:scale-110 transition-all"
+      >
+        <span>Create</span>
+      </button>
     </div>
   );
 }

packages/web/pages/s/index.tsx

@@ -63,50 +63,58 @@ export default function Me() {
     fullCleanPageContent = <CreateConversation />;
   }
 
+  if (fullCleanPageContent) {
+    return (
+      <div className="flex flex-col px-20">
+        <div className="flex flex-row">
+          <span className="flex flex-col items-center">
+            <button
+              onClick={() => router.push(Routes.convos)}
+              className="rounded-lg p-2 border flex flex-row items-center space-x-2
+            text-slate-400 text-xs hover:bg-slate-50"
+            >
+              <FaArrowLeft />
+              <span>back</span>
+            </button>
+
+            <span className="flex flex-row items-center text-xs text-slate-300">
+              ESC
+            </span>
+          </span>
+        </div>
+        {fullCleanPageContent}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-row items-stretch">
+      <Sidebar />
+
+      <SwitchTransition>
+        <CSSTransition
+          appear={true}
+          key={Math.random()}
+          timeout={400}
+          classNames="slide"
+        >
+          <div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
+            {getCurrentContent()}
+          </div>
+        </CSSTransition>
+      </SwitchTransition>
+    </div>
+  );
+}
+
+Me.getLayout = function (content: ReactElement) {
   return (
     <div className="flex flex-col">
       <KeyboardShortcutHandler />
 
       <Header />
 
-      {fullCleanPageContent ? (
+      {content}
-        <div className="flex flex-col px-20">
-          <div className="flex flex-row">
-            <span className="flex flex-col items-center">
-              <button
-                onClick={() => router.push(Routes.convos)}
-                className="rounded-lg p-2 border flex flex-row items-center space-x-2
-            text-slate-400 text-xs hover:bg-slate-50"
-              >
-                <FaArrowLeft />
-                <span>back</span>
-              </button>
-
-              <span className="flex flex-row items-center text-xs text-slate-300">
-                ESC
-              </span>
-            </span>
-          </div>
-          {fullCleanPageContent}
-        </div>
-      ) : (
-        <div className="flex-1 flex flex-row items-stretch">
-          <Sidebar />
-
-          <SwitchTransition>
-            <CSSTransition
-              appear={true}
-              key={"main_tabs_content"}
-              timeout={400}
-              classNames="slide"
-            >
-              <div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
-                {getCurrentContent()}
-              </div>
-            </CSSTransition>
-          </SwitchTransition>
-        </div>
-      )}
     </div>
   );
-}
+};