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,42 +95,41 @@ 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}
-              placeholder="Contact Name"
             onChange={(value) => {
               setName(value)
             }}
             ref={focusInput}
             onEnter={handleSubmit}
           />
+        </label>
 
         {!editingContact?.isMe && (
+          <label>
+            <div className="mb-1">CollaborationID</div>
             <DecoratedInput
-                className={{ container: 'mt-4' }}
               id="invite-email-input"
               value={collaborationID}
-                placeholder="Contact CollaborationID"
               onChange={(value) => {
                 setCollaborationID(value)
               }}
               onEnter={handleSubmit}
             />
+          </label>
         )}
 
         {!editContactUuid && (
-              <p className="mt-4">
+          <p>
-                Ask your contact for their Standard Notes CollaborationID via secure email or chat. Then, enter it here
+            Ask your contact for their Standard Notes CollaborationID via secure email or chat. Then, enter it here to
-                to add them as a contact.
+            add them as a contact.
           </p>
         )}
       </div>
-        </div>
-      </div>
     </Modal>
   )
 }