profile-pane 3.1.2-ccc559aa → 3.1.2-e3347eef

package/lib/ContactsCard.js

@@ -98,7 +98,7 @@ const createAddressBookUriEntryDiv = (context, contactsModule, addressBooksData,
   addressBookUriEntryDiv.setAttribute('aria-label', 'Address book URI entry div');
   addressBookUriEntryDiv.setAttribute('aria-describedby', 'addressbook-uri-entry-div');
   addressBookUriEntryDiv.setAttribute('id', 'contacts-addressbook-uri-entry');
-  addressBookUriEntryDiv.classList.add('contactsPopupMessage', 'contactsAddressBookUriEntry');
+  addressBookUriEntryDiv.classList.add('contactsPopupDialog', 'contactsAddressBookUriEntry');
   const closeButton = createCloseButton(context, addressBookUriEntryDiv, 'contactsAddressBookUriEntryCloseButton');
   addressBookUriEntryDiv.appendChild(closeButton);
   addressBookUriEntryDiv.appendChild(createAddressBookUriEntryForm(context, contactsModule, addressBooksData, contactData));
@@ -434,7 +434,7 @@ const createNewAddressBookForm = (context, addressBooksData, contactsModule, con
   newAddressBookForm.method = 'post';
   newAddressBookForm.innerHTML = 'Create a new address book';
   newAddressBookForm.setAttribute('id', 'new-addressbook-form');
-  newAddressBookForm.classList.add('contactsPopupMessage', 'contactsNewAddressForm');
+  newAddressBookForm.classList.add('contactsPopupDialog', 'contactsNewAddressForm');
   const addressBookNameLabel = context.dom.createElement('label');
   addressBookNameLabel.classList.add('label');
   addressBookNameLabel.setAttribute('for', 'addressBookNameInput');
@@ -559,7 +559,7 @@ const createGroupNameForm = (context, contactsModule, addressBooksData, contactD
   newGroupForm.addEventListener('submit', addGroupEventListener);
   newGroupForm.innerHTML = 'Create a new group';
   newGroupForm.setAttribute('id', 'new-group-form');
-  newGroupForm.classList.add('contactsPopupMessage', 'contactsNewGroupForm');
+  newGroupForm.classList.add('contactsPopupDialog', 'contactsNewGroupForm');
   const groupNameLabel = context.dom.createElement('label');
   groupNameLabel.classList.add('label');
   groupNameLabel.setAttribute('for', 'groupNameInput');
@@ -713,7 +713,7 @@ const showPopupOverlay = context => {
 const removePopupOverlayIfNoPopup = context => {
   const selectorDialog = context.dom.getElementById('contacts-selector-dialog');
   if (!selectorDialog) return;
-  const activePopup = selectorDialog.querySelector('.contactsPopupMessage, .contactsContactExistsAlert');
+  const activePopup = selectorDialog.querySelector('.contactsPopupDialog, .contactsContactExistsAlert');
   if (activePopup) return;
   const overlay = selectorDialog.querySelector(`#${CONTACTS_POPUP_OVERLAY_ID}`);
   if (overlay) overlay.remove();

package/lib/addMeToYourContacts.js

@@ -70,8 +70,8 @@ const createAddMeToYourContactsButton = async (subject, context) => {
   button.refresh = refreshButton();
   function refreshButton() {
     if ((0, _buttonsHelper.checkIfAnyUserLoggedIn)(me)) {
-      const contactExistsByWebID = (0, _contactsHelpers.checkIfContactExistsByWebID)(addressBooksData, contactData.webID);
-      const contactExistsByName = (0, _contactsHelpers.checkIfContactExistsByName)(addressBooksData, contactData.name);
+      const contactExistsByWebID = contactData ? (0, _contactsHelpers.checkIfContactExistsByWebID)(addressBooksData, contactData.webID) : false;
+      const contactExistsByName = contactData ? (0, _contactsHelpers.checkIfContactExistsByName)(addressBooksData, contactData.name) : false;
       if (contactExistsByWebID) {
         //logged in and friend exists or friend was just added
         button.innerHTML = _texts.contactExistsAlreadyButtonText.toUpperCase();

package/lib/profile-pane.js

@@ -4897,11 +4897,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
   justify-content: center;
   align-items: center;
   line-height: 1;
-
-     /* width: 100% !important;
-    max-width: 100% !important;
-    margin-left: 0;
-    align-self: stretch !important; */
 }
 
 .contactsNewGroupForm {
@@ -4969,7 +4964,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
   right: 0.2rem;
   background: transparent;
   color: #787878;
-  font-size: var(--font-size-xs);
   border: none;
   font-size: var(--font-size-sm);
   cursor: pointer;
@@ -4989,8 +4983,14 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
   width: auto !important;
   height: auto !important;
   cursor: pointer;
-  font-size: var(--font-size-xs);
   line-height: 1;
+  left: auto;
+  margin: 0;
+  align-self: auto !important;
+  background: transparent;
+  color: #787878;
+  border: none;
+  z-index: 100 !important;
 }
 
 .contactsCloseButton:hover {
@@ -5072,8 +5072,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
   white-space: nowrap;
 }
 
-[role="alert"] {
-  border: none !important; /* Hides the element from all users and AT */
+.contactsAddressBookSelector [role="alert"] {
+  border: none !important; /* Remove borders from alerts within the contacts dialog */
 }
 
 .contactsPopupOverlay {
@@ -5083,20 +5083,19 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
   z-index: 8;
 }
 
-.contactsAddressBookSelector.contactsOverlayActive > *:not(.contactsPopupOverlay):not(.contactsPopupMessage):not(.contactsContactExistsAlert) {
+.contactsAddressBookSelector.contactsOverlayActive > *:not(.contactsPopupOverlay):not(.contactsPopupDialog):not(.contactsContactExistsAlert) {
   pointer-events: none;
   user-select: none;
 }
 
-.contactsAddressBookSelector.contactsOverlayActive .contactsPopupMessage,
+.contactsAddressBookSelector.contactsOverlayActive .contactsPopupDialog,
 .contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert,
-.contactsAddressBookSelector.contactsOverlayActive .contactsPopupMessage *,
+.contactsAddressBookSelector.contactsOverlayActive .contactsPopupDialog *,
 .contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert * {
   pointer-events: auto;
 }
 
-/* SAM Look at finding a better name than popupMessage  */
-.contactsPopupMessage {
+.contactsPopupDialog {
   background: #F5F5F5 !important;
   color: var(--color-primary);
   padding: 2em;
@@ -5119,7 +5118,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
     padding-top: 3rem !important;
   }
 
-  .contactsPopupMessage {
+  .contactsPopupDialog {
     max-width: 92vw;
     max-height: 78vh;
     padding: 1.25rem;
@@ -5188,7 +5187,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
   line-height: 1;
 }
 
-`, "",{"version":3,"sources":["webpack://./src/styles/ContactsCard.css"],"names":[],"mappings":"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","sourcesContent":["#add-to-contacts-button-container {\n  position: relative;\n  overflow: visible;\n}\n\n.contactsAddressBookSelector {\n  width: fit-content;\n  max-width: min(94vw, 48rem);\n  min-width: 0;\n  max-height: 80vh;\n  overflow-y: auto;\n  overflow-x: hidden;\n  border-radius: var(--border-radius-base);\n  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n  background: #F0F0F0;\n  color: var(--color-primary);\n  padding-top: 4em;\n  align-items: stretch;\n  box-sizing: border-box;\n  gap: 7px;\n  display: flex;\n  flex-direction: column;\n  font-weight: 600;\n  position: absolute;\n  top: 54%;\n  bottom: auto;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  margin-top: 0;\n  margin: 0;\n  z-index: 200;\n  opacity: 1;\n}\n\n@media (max-width: 900px) {\n  .contactsAddressBookSelector {\n    top: 54%;\n    bottom: auto;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  .contactsAddressBookDetails {\n    flex-direction: column !important; /* Stacks items vertically on small screens */\n    align-items: center !important;\n    width: 100% !important;\n    max-height: 60vh;\n    overflow-y: auto;\n    overflow-x: hidden; \n  }\n\n  .contactsAddressBookCreationDiv .contactsNewContactCreationButton {\n    width: fit-content !important;\n    min-width: 10em;\n    margin-left: auto !important;\n    margin-right: auto !important;\n    align-self: center !important;\n    display: inline-flex !important;\n    justify-content: center !important;\n    align-items: center !important;\n    text-align: center;\n  }\n}\n\n@media (max-width: 333px) {\n  .contactsAddressBookSelector {\n    width: 96vw;\n    max-width: 96vw;\n    min-width: 0;\n    top: 50%;\n    bottom: auto;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    padding-top: 3rem;\n    position: fixed;\n    overflow-x: hidden;\n  }\n\n  .contactsAddressBookDetails {\n    width: 100% !important;\n    min-width: 0;\n    padding: 0.5rem;\n  }\n  .contactsAddressBookList,\n  .contactsGroupList {\n    min-width: 0;\n    max-width: 100% !important;\n    width: 100%;\n  }\n}\n\n.contactsAddressBookCreationDiv {\n  width: 100%;\n  border-radius: var(--border-radius-base);\n  background: #F0F0F0;\n  box-sizing: border-box;\n  padding: 5px;\n  gap: 5px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n}\n\n.contactsHelpersButtonDiv {\n  display: flex;\n  flex-direction: row;\n  gap: var(--spacing-md);\n  justify-content: center;\n  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n  padding: var(--spacing-md);\n  border-radius: var(--border-radius-base);\n}\n\n.contactsAddressBookCreationButton {\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--color-primary), white 85%) !important;  \n  color: var(--color-primary) !important;\n  border-radius: 8px;\n  text-align: left;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.contactsAddressBookUriEntryButton {\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--color-primary), white 85%) !important;  \n  color: var(--color-primary) !important;\n  border-radius: 8px;\n  text-align: left;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.contactsActionButton {\n  background: var(--color-primary);\n  color: white;\n  border-radius: var(--border-radius-base);\n  transition: all 0.3s ease-in-out;\n  cursor: pointer;\n}\n\n.contactsActionButton:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.contactsActionButton:active {\n  box-shadow: 0 1px 2px white;\n}\n\n.contactsActionButton:focus,\n.contactsActionButton:focus-visible {\n  outline: 3px solid var(--color-primary) !important;\n  outline-offset: 2px !important;\n  box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n  z-index: 1;   \n}\n\n.contactsAddressBookDetails {\n  width: 100%;\n  min-width: 0;\n  min-height: 0;\n  border-radius: var(--border-radius-base);\n  justify-content: flex-start;\n  box-sizing: border-box;\n  gap: 15px;\n  display: flex;\n  flex-direction: row;\n  padding: var(--spacing-md);\n  overflow-x: auto;\n  overflow-y: auto;\n}\n\n.contactsAddressBookUriEntry {\n  width: calc(100% - 1rem) !important;\n  max-width: calc(100% - 1rem) !important;\n  min-width: 0;\n  box-sizing: border-box;\n  padding-top: 3em !important;\n  gap: 5px;\n  display: flex;\n  align-self: stretch;\n  flex-direction: column;\n\n}\n\n.contactsAddressBookUriEntryForm {\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  background: #F0F0F0;\n  box-sizing: border-box;\n  gap: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.contactsAddressBookUriInput {\n  width: clamp(14rem, 60vw, 22rem);\n  max-width: 100%;\n  min-width: 0;\n  flex: 0 0 auto;\n  align-self: flex-start;\n  padding: 5px;\n  gap: 15px;\n  border-radius: var(--border-radius-base);\n  border: 1px solid #ccc;\n}\n\n.contactsAddressBookUriEntryAddButton {\n  width: 10%;\n  min-width: 0;\n  max-width: 4em;\n  align-self: flex-end !important;\n  margin-left: auto;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  line-height: 1;\n\n     /* width: 100% !important;\n    max-width: 100% !important;\n    margin-left: 0;\n    align-self: stretch !important; */\n}\n\n.contactsNewGroupForm {\n  box-sizing: border-box;\n  padding-top: 2.5rem !important;\n  gap: 5px;\n  display: flex;\n  flex-direction: column;\n}\n\n.contactsCreateNewAddressBook {\n  border-radius: var(--border-radius);\n  color: white;\n  padding: var(--spacing-md);\n  justify-content: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n}\n\n.contactsAddressBookList {\n  width: 100%;\n  max-width: fit-content !important;\n  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);\n  min-width: 200px;\n  box-sizing: border-box;\n  gap: 4px;\n  display: flex;\n  flex-direction: column;\n}\n\n.contactsGroupList {\n  width: auto;\n  max-width: fit-content !important;\n  min-width: 200px;\n  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);\n  box-sizing: border-box;\n  gap: 4px;\n  display: flex;\n  flex-direction: column;\n}\n\n.contactsErrorDisplay {\n  width: 90%;\n  align-self: flex-end;\n  padding: 5px;\n  position: absolute;\n  background: pink;\n  display: none;\n  color: #787878;\n  border-radius: var(--border-radius-base);\n  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; \n  z-index: 3;\n}\n\n.contactsShowErrors {\n  display: flex !important;\n  flex-direction: row;\n  justify-content: center;\n}\n.contactsCloseErrorDisplayButton {\n  position: absolute;\n  top: 0.2rem;\n  right: 0.2rem;\n  background: transparent;\n  color: #787878;\n  font-size: var(--font-size-xs);\n  border: none;\n  font-size: var(--font-size-sm);\n  cursor: pointer;\n  z-index: 4;\n}\n\n.contactsCloseButton {\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius-base);\n  color: #787878 !important;\n  padding: 1em;\n  font-size: var(--font-size-sm);\n  position: absolute;\n  top: 0;          \n  right: 0;\n  display: inline-block;\n  width: auto !important;\n  height: auto !important;\n  cursor: pointer;\n  font-size: var(--font-size-xs);\n  line-height: 1;\n}\n\n.contactsCloseButton:hover {\n  box-shadow: 0 2px 4px var(--color-primary) !important;\n}\n\n.contactsCloseButton:focus,\n.contactsCloseButton:focus-visible {\n  outline: 3px solid var(--color-primary) !important;\n  outline-offset: 2px !important;\n  box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n  z-index: 1;\n}\n\n.contactsNewAddressForm {\n  padding-top: 3em !important;\n  gap: 5px;\n  display: flex;\n  flex-direction: column;\n}\n\n.contactsButton {\n  flex-shrink: 0;\n  background: #F0F0F0;\n  color: #787878;\n  border-radius: 8px;\n  text-align: left;\n  padding: var(--spacing-md);\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.contactsButton:hover {\n  color: var(--color-primary);\n  background: color-mix(in srgb, var(--color-primary), white 85%) !important;  \n} \n\n.contactsSelectedButton {\n background: color-mix(in srgb, var(--color-primary), white 60%) !important; \n color: var(--color-primary);\n}\n\n.contactsContactExistsAlert {\n  background: #F0F0F0 !important;\n  color: #787878;\n  padding: 10px;\n  border-radius: var(--border-radius-base);\n  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n  z-index: 10;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 300px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 15px;  \n  text-wrap: pretty;\n}\n\n.contactsContactExistsActions {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  width: auto;\n}\n\n.contactsContactExistsActions .contactsConfirmButton,\n.contactsContactExistsActions .contactsCancelButton {\n  display: inline-flex !important;\n  width: auto !important;\n  min-width: fit-content;\n  flex: 0 0 auto;\n  margin: 0;\n  white-space: nowrap;\n}\n\n[role=\"alert\"] {\n  border: none !important; /* Hides the element from all users and AT */\n}\n\n.contactsPopupOverlay {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.2);\n  z-index: 8;\n}\n\n.contactsAddressBookSelector.contactsOverlayActive > *:not(.contactsPopupOverlay):not(.contactsPopupMessage):not(.contactsContactExistsAlert) {\n  pointer-events: none;\n  user-select: none;\n}\n\n.contactsAddressBookSelector.contactsOverlayActive .contactsPopupMessage,\n.contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert,\n.contactsAddressBookSelector.contactsOverlayActive .contactsPopupMessage *,\n.contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert * {\n  pointer-events: auto;\n}\n\n/* SAM Look at finding a better name than popupMessage  */\n.contactsPopupMessage {\n  background: #F5F5F5 !important;\n  color: var(--color-primary);\n  padding: 2em;\n  border-radius: var(--border-radius-base);\n  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n  z-index: 50;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  max-width: min(92vw, 34rem);\n  max-height: calc(100vh - 6rem);\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n@media (max-width: 600px) {\n  .contactsAddressBookUriEntry {\n    padding-top: 3rem !important;\n  }\n\n  .contactsPopupMessage {\n    max-width: 92vw;\n    max-height: 78vh;\n    padding: 1.25rem;\n  }\n}\n\n.contactsConfirmButton {\n  background: var(--color-primary);\n  color: white;\n  border-radius: var(--border-radius-base);\n  padding: var(--spacing-md);\n  transition: all 0.3s ease-in-out;\n  cursor: pointer;\n}\n\n.contactsConfirmButton:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.contactsCancelButton {\n  background: transparent;\n  color: #787878;\n  border-radius: var(--border-radius-base);\n  padding: var(--spacing-md);\n  border: 1px solid #ccc;\n  transition: all 0.3s ease-in-out;\n  cursor: pointer;\n}\n.contactsCancelButton:hover {\n  background: color-mix(in srgb, var(--color-primary), white 85%) !important;  \n  color: var(--color-primary);\n} \n\n.contactsNewContactCreationButton {\n  width: 10em !important;\n  align-self: flex-end;\n  line-height: 1;\n}\n\n.contactsCreateGroupCreationButton {\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--color-primary), white 85%) !important;  \n  color: var(--color-primary) !important;\n  border-radius: 8px;\n  text-align: left;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.contactsCloseButton {\n  position: absolute !important;\n  top: 0 !important;\n  right: 0 !important;\n  left: auto;\n  margin: 0;\n  align-self: auto !important;\n  background: transparent;\n  color: #787878;\n  font-size: var(--font-size-xs);\n  border: none;\n  font-size: var(--font-size-sm);\n  cursor: pointer;\n  z-index: 100 !important;\n  padding: 0.35rem 0.5rem;\n  line-height: 1;\n}\n\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./src/styles/ContactsCard.css"],"names":[],"mappings":"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","sourcesContent":["#add-to-contacts-button-container {\n  position: relative;\n  overflow: visible;\n}\n\n.contactsAddressBookSelector {\n  width: fit-content;\n  max-width: min(94vw, 48rem);\n  min-width: 0;\n  max-height: 80vh;\n  overflow-y: auto;\n  overflow-x: hidden;\n  border-radius: var(--border-radius-base);\n  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n  background: #F0F0F0;\n  color: var(--color-primary);\n  padding-top: 4em;\n  align-items: stretch;\n  box-sizing: border-box;\n  gap: 7px;\n  display: flex;\n  flex-direction: column;\n  font-weight: 600;\n  position: absolute;\n  top: 54%;\n  bottom: auto;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  margin-top: 0;\n  margin: 0;\n  z-index: 200;\n  opacity: 1;\n}\n\n@media (max-width: 900px) {\n  .contactsAddressBookSelector {\n    top: 54%;\n    bottom: auto;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  .contactsAddressBookDetails {\n    flex-direction: column !important; /* Stacks items vertically on small screens */\n    align-items: center !important;\n    width: 100% !important;\n    max-height: 60vh;\n    overflow-y: auto;\n    overflow-x: hidden; \n  }\n\n  .contactsAddressBookCreationDiv .contactsNewContactCreationButton {\n    width: fit-content !important;\n    min-width: 10em;\n    margin-left: auto !important;\n    margin-right: auto !important;\n    align-self: center !important;\n    display: inline-flex !important;\n    justify-content: center !important;\n    align-items: center !important;\n    text-align: center;\n  }\n}\n\n@media (max-width: 333px) {\n  .contactsAddressBookSelector {\n    width: 96vw;\n    max-width: 96vw;\n    min-width: 0;\n    top: 50%;\n    bottom: auto;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    padding-top: 3rem;\n    position: fixed;\n    overflow-x: hidden;\n  }\n\n  .contactsAddressBookDetails {\n    width: 100% !important;\n    min-width: 0;\n    padding: 0.5rem;\n  }\n  .contactsAddressBookList,\n  .contactsGroupList {\n    min-width: 0;\n    max-width: 100% !important;\n    width: 100%;\n  }\n}\n\n.contactsAddressBookCreationDiv {\n  width: 100%;\n  border-radius: var(--border-radius-base);\n  background: #F0F0F0;\n  box-sizing: border-box;\n  padding: 5px;\n  gap: 5px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n}\n\n.contactsHelpersButtonDiv {\n  display: flex;\n  flex-direction: row;\n  gap: var(--spacing-md);\n  justify-content: center;\n  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n  padding: var(--spacing-md);\n  border-radius: var(--border-radius-base);\n}\n\n.contactsAddressBookCreationButton {\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--color-primary), white 85%) !important;  \n  color: var(--color-primary) !important;\n  border-radius: 8px;\n  text-align: left;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.contactsAddressBookUriEntryButton {\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--color-primary), white 85%) !important;  \n  color: var(--color-primary) !important;\n  border-radius: 8px;\n  text-align: left;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.contactsActionButton {\n  background: var(--color-primary);\n  color: white;\n  border-radius: var(--border-radius-base);\n  transition: all 0.3s ease-in-out;\n  cursor: pointer;\n}\n\n.contactsActionButton:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.contactsActionButton:active {\n  box-shadow: 0 1px 2px white;\n}\n\n.contactsActionButton:focus,\n.contactsActionButton:focus-visible {\n  outline: 3px solid var(--color-primary) !important;\n  outline-offset: 2px !important;\n  box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n  z-index: 1;   \n}\n\n.contactsAddressBookDetails {\n  width: 100%;\n  min-width: 0;\n  min-height: 0;\n  border-radius: var(--border-radius-base);\n  justify-content: flex-start;\n  box-sizing: border-box;\n  gap: 15px;\n  display: flex;\n  flex-direction: row;\n  padding: var(--spacing-md);\n  overflow-x: auto;\n  overflow-y: auto;\n}\n\n.contactsAddressBookUriEntry {\n  width: calc(100% - 1rem) !important;\n  max-width: calc(100% - 1rem) !important;\n  min-width: 0;\n  box-sizing: border-box;\n  padding-top: 3em !important;\n  gap: 5px;\n  display: flex;\n  align-self: stretch;\n  flex-direction: column;\n\n}\n\n.contactsAddressBookUriEntryForm {\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  background: #F0F0F0;\n  box-sizing: border-box;\n  gap: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.contactsAddressBookUriInput {\n  width: clamp(14rem, 60vw, 22rem);\n  max-width: 100%;\n  min-width: 0;\n  flex: 0 0 auto;\n  align-self: flex-start;\n  padding: 5px;\n  gap: 15px;\n  border-radius: var(--border-radius-base);\n  border: 1px solid #ccc;\n}\n\n.contactsAddressBookUriEntryAddButton {\n  width: 10%;\n  min-width: 0;\n  max-width: 4em;\n  align-self: flex-end !important;\n  margin-left: auto;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  line-height: 1;\n}\n\n.contactsNewGroupForm {\n  box-sizing: border-box;\n  padding-top: 2.5rem !important;\n  gap: 5px;\n  display: flex;\n  flex-direction: column;\n}\n\n.contactsCreateNewAddressBook {\n  border-radius: var(--border-radius);\n  color: white;\n  padding: var(--spacing-md);\n  justify-content: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n}\n\n.contactsAddressBookList {\n  width: 100%;\n  max-width: fit-content !important;\n  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);\n  min-width: 200px;\n  box-sizing: border-box;\n  gap: 4px;\n  display: flex;\n  flex-direction: column;\n}\n\n.contactsGroupList {\n  width: auto;\n  max-width: fit-content !important;\n  min-width: 200px;\n  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);\n  box-sizing: border-box;\n  gap: 4px;\n  display: flex;\n  flex-direction: column;\n}\n\n.contactsErrorDisplay {\n  width: 90%;\n  align-self: flex-end;\n  padding: 5px;\n  position: absolute;\n  background: pink;\n  display: none;\n  color: #787878;\n  border-radius: var(--border-radius-base);\n  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; \n  z-index: 3;\n}\n\n.contactsShowErrors {\n  display: flex !important;\n  flex-direction: row;\n  justify-content: center;\n}\n.contactsCloseErrorDisplayButton {\n  position: absolute;\n  top: 0.2rem;\n  right: 0.2rem;\n  background: transparent;\n  color: #787878;\n  border: none;\n  font-size: var(--font-size-sm);\n  cursor: pointer;\n  z-index: 4;\n}\n\n.contactsCloseButton {\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius-base);\n  color: #787878 !important;\n  padding: 1em;\n  font-size: var(--font-size-sm);\n  position: absolute;\n  top: 0;          \n  right: 0;\n  display: inline-block;\n  width: auto !important;\n  height: auto !important;\n  cursor: pointer;\n  line-height: 1;\n  left: auto;\n  margin: 0;\n  align-self: auto !important;\n  background: transparent;\n  color: #787878;\n  border: none;\n  z-index: 100 !important;\n}\n\n.contactsCloseButton:hover {\n  box-shadow: 0 2px 4px var(--color-primary) !important;\n}\n\n.contactsCloseButton:focus,\n.contactsCloseButton:focus-visible {\n  outline: 3px solid var(--color-primary) !important;\n  outline-offset: 2px !important;\n  box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n  z-index: 1;\n}\n\n.contactsNewAddressForm {\n  padding-top: 3em !important;\n  gap: 5px;\n  display: flex;\n  flex-direction: column;\n}\n\n.contactsButton {\n  flex-shrink: 0;\n  background: #F0F0F0;\n  color: #787878;\n  border-radius: 8px;\n  text-align: left;\n  padding: var(--spacing-md);\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.contactsButton:hover {\n  color: var(--color-primary);\n  background: color-mix(in srgb, var(--color-primary), white 85%) !important;  \n} \n\n.contactsSelectedButton {\n background: color-mix(in srgb, var(--color-primary), white 60%) !important; \n color: var(--color-primary);\n}\n\n.contactsContactExistsAlert {\n  background: #F0F0F0 !important;\n  color: #787878;\n  padding: 10px;\n  border-radius: var(--border-radius-base);\n  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n  z-index: 10;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 300px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 15px;  \n  text-wrap: pretty;\n}\n\n.contactsContactExistsActions {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  width: auto;\n}\n\n.contactsContactExistsActions .contactsConfirmButton,\n.contactsContactExistsActions .contactsCancelButton {\n  display: inline-flex !important;\n  width: auto !important;\n  min-width: fit-content;\n  flex: 0 0 auto;\n  margin: 0;\n  white-space: nowrap;\n}\n\n.contactsAddressBookSelector [role=\"alert\"] {\n  border: none !important; /* Remove borders from alerts within the contacts dialog */\n}\n\n.contactsPopupOverlay {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.2);\n  z-index: 8;\n}\n\n.contactsAddressBookSelector.contactsOverlayActive > *:not(.contactsPopupOverlay):not(.contactsPopupDialog):not(.contactsContactExistsAlert) {\n  pointer-events: none;\n  user-select: none;\n}\n\n.contactsAddressBookSelector.contactsOverlayActive .contactsPopupDialog,\n.contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert,\n.contactsAddressBookSelector.contactsOverlayActive .contactsPopupDialog *,\n.contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert * {\n  pointer-events: auto;\n}\n\n.contactsPopupDialog {\n  background: #F5F5F5 !important;\n  color: var(--color-primary);\n  padding: 2em;\n  border-radius: var(--border-radius-base);\n  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n  z-index: 50;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  max-width: min(92vw, 34rem);\n  max-height: calc(100vh - 6rem);\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n@media (max-width: 600px) {\n  .contactsAddressBookUriEntry {\n    padding-top: 3rem !important;\n  }\n\n  .contactsPopupDialog {\n    max-width: 92vw;\n    max-height: 78vh;\n    padding: 1.25rem;\n  }\n}\n\n.contactsConfirmButton {\n  background: var(--color-primary);\n  color: white;\n  border-radius: var(--border-radius-base);\n  padding: var(--spacing-md);\n  transition: all 0.3s ease-in-out;\n  cursor: pointer;\n}\n\n.contactsConfirmButton:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.contactsCancelButton {\n  background: transparent;\n  color: #787878;\n  border-radius: var(--border-radius-base);\n  padding: var(--spacing-md);\n  border: 1px solid #ccc;\n  transition: all 0.3s ease-in-out;\n  cursor: pointer;\n}\n.contactsCancelButton:hover {\n  background: color-mix(in srgb, var(--color-primary), white 85%) !important;  \n  color: var(--color-primary);\n} \n\n.contactsNewContactCreationButton {\n  width: 10em !important;\n  align-self: flex-end;\n  line-height: 1;\n}\n\n.contactsCreateGroupCreationButton {\n  flex-shrink: 0;\n  background: color-mix(in srgb, var(--color-primary), white 85%) !important;  \n  color: var(--color-primary) !important;\n  border-radius: 8px;\n  text-align: left;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.contactsCloseButton {\n  position: absolute !important;\n  top: 0 !important;\n  right: 0 !important;\n  left: auto;\n  margin: 0;\n  align-self: auto !important;\n  background: transparent;\n  color: #787878;\n  font-size: var(--font-size-xs);\n  border: none;\n  font-size: var(--font-size-sm);\n  cursor: pointer;\n  z-index: 100 !important;\n  padding: 0.35rem 0.5rem;\n  line-height: 1;\n}\n\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -11235,7 +11234,7 @@ const createAddressBookUriEntryDiv = (context, contactsModule, addressBooksData,
     addressBookUriEntryDiv.setAttribute('aria-label', 'Address book URI entry div');
     addressBookUriEntryDiv.setAttribute('aria-describedby', 'addressbook-uri-entry-div');
     addressBookUriEntryDiv.setAttribute('id', 'contacts-addressbook-uri-entry');
-    addressBookUriEntryDiv.classList.add('contactsPopupMessage', 'contactsAddressBookUriEntry');
+    addressBookUriEntryDiv.classList.add('contactsPopupDialog', 'contactsAddressBookUriEntry');
     const closeButton = createCloseButton(context, addressBookUriEntryDiv, 'contactsAddressBookUriEntryCloseButton');
     addressBookUriEntryDiv.appendChild(closeButton);
     addressBookUriEntryDiv.appendChild(createAddressBookUriEntryForm(context, contactsModule, addressBooksData, contactData));
@@ -11567,7 +11566,7 @@ const createNewAddressBookForm = (context, addressBooksData, contactsModule, con
     newAddressBookForm.method = 'post';
     newAddressBookForm.innerHTML = 'Create a new address book';
     newAddressBookForm.setAttribute('id', 'new-addressbook-form');
-    newAddressBookForm.classList.add('contactsPopupMessage', 'contactsNewAddressForm');
+    newAddressBookForm.classList.add('contactsPopupDialog', 'contactsNewAddressForm');
     const addressBookNameLabel = context.dom.createElement('label');
     addressBookNameLabel.classList.add('label');
     addressBookNameLabel.setAttribute('for', 'addressBookNameInput');
@@ -11691,7 +11690,7 @@ const createGroupNameForm = (context, contactsModule, addressBooksData, contactD
     newGroupForm.addEventListener('submit', addGroupEventListener);
     newGroupForm.innerHTML = 'Create a new group';
     newGroupForm.setAttribute('id', 'new-group-form');
-    newGroupForm.classList.add('contactsPopupMessage', 'contactsNewGroupForm');
+    newGroupForm.classList.add('contactsPopupDialog', 'contactsNewGroupForm');
     const groupNameLabel = context.dom.createElement('label');
     groupNameLabel.classList.add('label');
     groupNameLabel.setAttribute('for', 'groupNameInput');
@@ -11850,7 +11849,7 @@ const removePopupOverlayIfNoPopup = (context) => {
     const selectorDialog = context.dom.getElementById('contacts-selector-dialog');
     if (!selectorDialog)
         return;
-    const activePopup = selectorDialog.querySelector('.contactsPopupMessage, .contactsContactExistsAlert');
+    const activePopup = selectorDialog.querySelector('.contactsPopupDialog, .contactsContactExistsAlert');
     if (activePopup)
         return;
     const overlay = selectorDialog.querySelector(`#${CONTACTS_POPUP_OVERLAY_ID}`);
@@ -13277,8 +13276,8 @@ const createAddMeToYourContactsButton = async (subject, context) => {
     button.refresh = refreshButton();
     function refreshButton() {
         if (checkIfAnyUserLoggedIn(me)) {
-            const contactExistsByWebID = checkIfContactExistsByWebID(addressBooksData, contactData.webID);
-            const contactExistsByName = checkIfContactExistsByName(addressBooksData, contactData.name);
+            const contactExistsByWebID = (contactData) ? checkIfContactExistsByWebID(addressBooksData, contactData.webID) : false;
+            const contactExistsByName = (contactData) ? checkIfContactExistsByName(addressBooksData, contactData.name) : false;
             if (contactExistsByWebID) {
                 //logged in and friend exists or friend was just added
                 button.innerHTML = contactExistsAlreadyButtonText.toUpperCase();