make side chat timetravel (which nobody will ever use) less ugly

Author: williamstein

src/packages/frontend/chat/side-chat.tsx

@@ -106,32 +106,33 @@ export default function SideChat({ project_id, path, style }: Props) {
             borderBottom: "1px solid lightgrey",
           }}
         >
-          <Tooltip title="Show TimeTravel change history of this side chat.">
-            <Button
-              style={{
-                float: "right",
-                marginTop: "-5px",
-                background: "rgb(91, 192, 222)",
-              }}
-              onClick={() => {
-                actions.showTimeTravelInNewTab();
-              }}
-            >
-              <Icon name="history" />
-            </Button>
-          </Tooltip>
-          <VideoChatButton
-            style={{ float: "right", marginTop: "-5px" }}
-            project_id={project_id}
-            path={path}
-            sendChat={(value) => {
-              const actions = redux.getEditorActions(
-                project_id,
-                path,
-              ) as ChatActions;
-              actions.send_chat({ input: value });
+          <Space.Compact
+            style={{
+              float: "right",
+              marginTop: "-5px",
             }}
-          />{" "}
+          >
+            <VideoChatButton
+              project_id={project_id}
+              path={path}
+              sendChat={(value) => {
+                const actions = redux.getEditorActions(
+                  project_id,
+                  path,
+                ) as ChatActions;
+                actions.send_chat({ input: value });
+              }}
+            />
+            <Tooltip title="Show TimeTravel change history of this side chat.">
+              <Button
+                onClick={() => {
+                  actions.showTimeTravelInNewTab();
+                }}
+              >
+                <Icon name="history" />
+              </Button>
+            </Tooltip>
+          </Space.Compact>
           <CollabList
             addCollab={addCollab}
             project={project}

src/packages/frontend/chat/video/launch-button.tsx

@@ -36,6 +36,7 @@ export default function VideoChatButton({
   // to know if somebody else has video chat opened for this file
   // @ts-ignore
   const file_use = useTypedRedux("file_use", "file_use");
+  const [open, setOpen] = useState<boolean>(false);
 
   // so we can exclude ourselves
   const account_id: string = useTypedRedux("account", "account_id");
@@ -86,15 +87,14 @@ export default function VideoChatButton({
     if (video_chat.current.we_are_chatting()) {
       return (
         <span>
-          Click to <b>leave</b> this video chatroom.
+          <b>Leave</b> this video chatroom.
         </span>
       );
     } else {
       if (num_users_chatting < VIDEO_CHAT_LIMIT) {
         return (
           <span>
-            Click to{" "}
-            {num_users_chatting == 0 ? "start a new " : "join the current"}{" "}
+            {num_users_chatting == 0 ? "Start a new " : "Join the current"}{" "}
             video chat.
           </span>
         );
@@ -125,26 +125,33 @@ export default function VideoChatButton({
     </>
   );
 
+  const btn = <Button style={{ ...style, ...style0 }}>{body}</Button>;
+
   return (
     <Popconfirm
+      onOpenChange={setOpen}
       title={`${
         num_users_chatting ? "Join the current" : "Start a new"
       } video chat session about this document?`}
       onConfirm={click_video_button}
       okText={`${num_users_chatting ? "Join" : "Start"} video chat`}
       cancelText={<CancelText />}
     >
-      <Popover
-        mouseEnterDelay={0.8}
-        title={() => (
-          <span>
-            {render_join(num_users_chatting)}
-            {render_num_chatting(num_users_chatting)}
-          </span>
-        )}
-      >
-        <Button style={{ ...style, ...style0 }}>{body}</Button>
-      </Popover>
+      {open ? (
+        btn
+      ) : (
+        <Popover
+          mouseEnterDelay={0.8}
+          title={() => (
+            <span>
+              {render_join(num_users_chatting)}
+              {render_num_chatting(num_users_chatting)}
+            </span>
+          )}
+        >
+          {btn}
+        </Popover>
+      )}
     </Popconfirm>
   );
 }