From 4907011ff235ceaa1c055ec5ace75031413f68e0 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 11 Sep 2023 14:08:49 +0530
Subject: [PATCH] chore: add labels to edit contact modal instead of
 placeholders for better ux

---
 .../Vaults/Contacts/EditContactModal.tsx      | 57 +++++++++----------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/EditContactModal.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/EditContactModal.tsx
index 26fb4ec89..c2563b9cd 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/EditContactModal.tsx
+++ b/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="flex w-full flex-col">
-          <div className="mb-3">
+      <div className="mb-3 flex w-full flex-col gap-4 px-4.5 pb-1.5 pt-4">
+        <label>
+          <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"
-              value={name}
-              placeholder="Contact Name"
+              id="invite-email-input"
+              value={collaborationID}
               onChange={(value) => {
-                setName(value)
+                setCollaborationID(value)
               }}
-              ref={focusInput}
               onEnter={handleSubmit}
             />
+          </label>
+        )}
 
-            {!editingContact?.isMe && (
-              <DecoratedInput
-                className={{ container: 'mt-4' }}
-                id="invite-email-input"
-                value={collaborationID}
-                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>
+        {!editContactUuid && (
+          <p>
+            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>
     </Modal>
   )