fix all old UI

gui/src/renderer/components/AddFriend/AddFriendInPerson.tsx

@@ -23,8 +23,10 @@ function ProgressBar({ progress }: { progress: number }): JSX.Element {
 
 export function StoryForm({
   numberOfLines,
+  completeAll,
 }: {
   numberOfLines: number;
+  completeAll: () => void;
 }): JSX.Element {
   let storyFromInput: String[] = [];
   for (let i = 0; i < numberOfLines; i++) {
@@ -80,6 +82,7 @@ export default function AddFriendInPerson({
 }): JSX.Element {
   const [progress, setProgress] = React.useState<number>(0);
   const [showtedious, setShowtedious] = React.useState<boolean>(false);
+  const [showverify, setShowverify] = React.useState<boolean>(false);
 
   React.useEffect(() => {
     setTimeout(() => {
@@ -154,19 +157,37 @@ export default function AddFriendInPerson({
               <h3 className="pb-8 text-center text-xs text-asbrown-light">
                 Their story.
               </h3>
-              <StoryForm numberOfLines={storylist.length} />
+              <StoryForm
+                numberOfLines={storylist.length}
+                completeAll={() => setShowverify(true)}
+              />
             </div>
           </div>
         </div>
         <p
           className={classNames(
             "self-center px-20 pt-5 text-center text-xs transition",
-            showtedious ? "text-asbrown-200" : "text-transparent"
+            showtedious ? "text-asbrown-200" : "text-transparent",
+            showverify ? "hidden" : ""
           )}
         >
           Tedious? We know, complete privacy is work. But trust us, it is worth
           it.
         </p>
+        <div className="grid items-center justify-center text-center">
+          <button
+            className={classNames(
+              "unselectable rounded-lg bg-asbrown-100 px-3 py-1 text-asbrown-light",
+              showverify ? "" : "hidden"
+            )}
+            onClick={() => {
+              console.log("next step");
+              setShowverify(false);
+            }}
+          >
+            Verify
+          </button>
+        </div>
       </div>
     </div>
   );

gui/src/renderer/components/FriendsModal.tsx

@@ -100,7 +100,7 @@ function LegacyFriendsModal({
         action: () => {},
         data: {
           type: "none",
-          name: "(No friends.)",
+          name: "(No contacts.)",
         },
       },
     ];

gui/src/renderer/components/RegisterModal.tsx

@@ -28,18 +28,18 @@ export function RegisterModal({
     case RegisterScreen.Welcome:
       component = (
         <Modal onClose={onClose}>
-          <div className="grid items-center w-full h-full">
-            <div className="grid justify-items-center gap-8 unselectable">
+          <div className="grid h-full w-full items-center">
+            <div className="unselectable grid justify-items-center gap-8">
               <img className="h-12" src={anyspherelogo} alt="Anysphere logo." />
-              <h1 className="font-['Lora'] text-center text-3xl text-asbrown-dark">
+              <h1 className="text-center font-['Lora'] text-3xl text-asbrown-dark">
                 Welcome to{" "}
-                <span className="animate-slideunderline decoration-2 underline underline-offset-4">
+                <span className="animate-slideunderline underline decoration-2 underline-offset-4">
                   complete privacy
                 </span>
                 .
               </h1>
               <button
-                className="animate-revealsimple mt-4 mx-auto text-asbrown-light opacity-80"
+                className="mx-auto mt-4 animate-revealsimple text-asbrown-light opacity-80"
                 onClick={() => setScreen(RegisterScreen.Form)}
               >
                 Get started ›
@@ -70,17 +70,17 @@ function RegisterModalForm({
   const [accesskey, setAccesskey] = React.useState<string>("");
   return (
     <Modal onClose={onClose}>
-      <div className="grid items-center h-full">
+      <div className="grid h-full items-center p-4">
         <div className="grid gap-2 px-1">
           <div className="text-center font-bold">Register</div>
-          <div className="text-sm text-center unselectable py-1">
+          <div className="unselectable py-1 text-center text-sm">
             Anysphere is in alpha! For support, please see{" "}
             <a className="hover:underline" href="https://discord.gg/FxCBpJRbT9">
               our Discord
             </a>
             .
           </div>
-          <div className="text-xs text-asbrown-dark pt-1 unselectable">
+          <div className="unselectable pt-1 text-xs text-asbrown-dark">
             <b>
               Please remember that this is an alpha product. While we think that
               our current implementation meets our privacy guarantees, we may
@@ -102,29 +102,29 @@ function RegisterModalForm({
               focus:ring-0 border-b-2 flex-grow border-asbrown-100"
           />
         </div> */}
-          <div className="flex flex-row my-2 gap-1 justify-center">
+          <div className="my-2 flex flex-row justify-center gap-1">
             <label className="unselectable">Access key: </label>
             <input
               type="text"
               value={accesskey}
               onChange={(e) => {
                 setAccesskey(e.target.value);
               }}
-              className="bg-red-100/[0] mx-2 px-1 font-mono focus:outline-none
-              focus:ring-0 border-b-2 flex-grow border-asbrown-100 placeholder:text-asbrown-200"
+              className="mx-2 flex-grow border-b-2 border-asbrown-100 bg-red-100/[0]
+              px-1 font-mono placeholder:text-asbrown-200 focus:outline-none focus:ring-0"
               autoFocus
               placeholder="alpha testing access key"
             />
           </div>
           <div className="grid">
             <button
-              className="place-self-center my-2 rounded-lg unselectable bg-asbrown-100 text-asbrown-light px-3 py-1"
+              className="unselectable my-2 place-self-center rounded-lg bg-asbrown-100 px-3 py-1 text-asbrown-light"
               onClick={() => onRegister(username, accesskey)}
             >
               Register
             </button>
           </div>
-          <div className="text-xs text-asbrown-dark pt-1 text-center unselectable">
+          <div className="unselectable pt-1 text-center text-xs text-asbrown-dark">
             By clicking Register, you agree to our{" "}
             <a
               className="hover:underline"

gui/src/renderer/components/Write.tsx

@@ -31,7 +31,7 @@ function MultiSelect(props: {
   const filteredOptions = useSearch(
     props.options,
     props.multiSelectState.text,
-    ["name"]
+    ["uniqueName", "displayName"]
   );
 
   let selectableOptions: (ListItem<string> | string)[] = filteredOptions.map(
@@ -52,7 +52,7 @@ function MultiSelect(props: {
 
   if (selectableOptions.length === 0) {
     selectableOptions.push(
-      `No friends matching ${props.multiSelectState.text}`
+      `No contacts matching ${props.multiSelectState.text}`
     );
   }
 
@@ -100,15 +100,15 @@ function MultiSelect(props: {
       <div className="grid pl-2">
         <input
           type="text"
-          className="w-full text-sm placeholder:text-asbrown-100 focus:outline-none"
+          className="w-full border-0 p-0 text-sm placeholder:text-asbrown-100 focus:outline-none focus:ring-0"
           onChange={(e) =>
             props.onEdit({
               ...props.multiSelectState,
               text: e.target.value,
             })
           }
           ref={inputRef}
-          placeholder="Search for a friend..."
+          placeholder="Search for a contact..."
           value={props.multiSelectState.text}
           autoFocus={props.focused}
         ></input>
@@ -215,7 +215,7 @@ function Write(props: {
               focus: "content",
             });
           }}
-          className="h-full w-full grow resize-none whitespace-pre-wrap pt-4 text-sm focus:outline-none"
+          className="h-full w-full grow resize-none whitespace-pre-wrap border-0 p-0 pt-4 text-sm focus:outline-none focus:ring-0"
           value={content}
           onChange={(e) =>
             props.edit({

gui/src/renderer/components/cmd-k/CmdKPortal.tsx

@@ -23,5 +23,9 @@ export function CmdKPortal(props: Props) {
     return null;
   }
 
-  return <Modal onClose={props.onClose}>{props.children}</Modal>;
+  return (
+    <Modal onClose={props.onClose}>
+      <div className="p-2">{props.children}</div>
+    </Modal>
+  );
 }