showing the ui for selecting and all with the conversation

packages/web/components/FullPageExperiences/CreateConversation.tsx.tsx

@@ -118,12 +118,17 @@ export default function CreateConversation() {
       </span>
 
       {/* show search results nicely like tailwind website */}
+      <span className="text-slate-400 text-xs text-center">
+        showing {recommendedUsers.length} results
+      </span>
+      <span className="text-slate-400 text-xs text-center">
+        Click{" "}
+        <a href="mailto:?subject=Join my conversation on Nirvana!">here</a> to
+        invite a user to Nirvana.
+      </span>
 
-      {recommendedUsers && recommendedUsers.length > 0 ? (
-        <>
-          <span className="text-slate-400 text-xs">
-            showing {recommendedUsers.length} results
-          </span>
+      {recommendedUsers?.length > 0 ? (
+        <div className="flex flex-col items-stretch">
           {recommendedUsers.map((recUser) => {
             return (
               <SimpleUserDetailsRow
@@ -141,7 +146,7 @@ export default function CreateConversation() {
               />
             );
           })}
-        </>
+        </div>
       ) : (
         <></>
       )}

packages/web/components/UserDetails/SimpleUserDetailsRow.tsx

@@ -15,8 +15,12 @@ export default function SelectedUserRow(props: {
       />
 
       <span className="flex flex-col ml-2">
-        <span className="text-teal-500 font-bold">{"Joe Smoe"}</span>
-        <span className="text-slate-400 text-xs">{"joe@microsoft.com"}</span>
+        <span className="text-teal-500 font-bold">
+          {props.user.firstName + " " + props.user.lastName}
+        </span>
+        <span className="text-slate-400 text-xs">
+          {props.user.emailAddress}
+        </span>
       </span>
 
       {props.actionButton}