chore: add labels to edit contact modal instead of placeholders for better ux

packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/EditContactModal.tsx

@@ -95,41 +95,40 @@ const EditContactModal: FunctionComponent<Props> = ({ onCloseDialog, fromInvite,
       close={handleDialogClose}
       actions={modalActions}
     >
-      <div className="px-4.5 pb-1.5 pt-4">
+      <div className="mb-3 flex w-full flex-col gap-4 px-4.5 pb-1.5 pt-4">
-        <div className="flex w-full flex-col">
+        <label>
-          <div className="mb-3">
+          <div className="mb-1">Contact Name</div>
+          <DecoratedInput
+            id="invite-name-input"
+            value={name}
+            onChange={(value) => {
+              setName(value)
+            }}
+            ref={focusInput}
+            onEnter={handleSubmit}
+          />
+        </label>
+
+        {!editingContact?.isMe && (
+          <label>
+            <div className="mb-1">CollaborationID</div>
             <DecoratedInput
-              id="invite-name-input"
+              id="invite-email-input"
-              value={name}
+              value={collaborationID}
-              placeholder="Contact Name"
               onChange={(value) => {
-                setName(value)
+                setCollaborationID(value)
               }}
-              ref={focusInput}
               onEnter={handleSubmit}
             />
+          </label>
+        )}
 
-            {!editingContact?.isMe && (
+        {!editContactUuid && (
-              <DecoratedInput
+          <p>
-                className={{ container: 'mt-4' }}
+            Ask your contact for their Standard Notes CollaborationID via secure email or chat. Then, enter it here to
-                id="invite-email-input"
+            add them as a contact.
-                value={collaborationID}
+          </p>
-                placeholder="Contact CollaborationID"
+        )}
-                onChange={(value) => {
-                  setCollaborationID(value)
-                }}
-                onEnter={handleSubmit}
-              />
-            )}
-
-            {!editContactUuid && (
-              <p className="mt-4">
-                Ask your contact for their Standard Notes CollaborationID via secure email or chat. Then, enter it here
-                to add them as a contact.
-              </p>
-            )}
-          </div>
-        </div>
       </div>
     </Modal>
   )