profile-pane 3.2.3-0 → 3.2.3-2

package/lib/sections/contactInfo/ContactInfoEditDialog.js

@@ -199,15 +199,12 @@ function renderContactPhoneInputRow({
       </label>
       <div class="profile-edit-dialog__actions">
         <solid-ui-button
-          type="button"
-          variant="icon"
-          size="md"
-          class="profile-edit-dialog__delete-button"
+          variant="ghost"
           aria-label=${`Delete phone number ${displayIndex + 1}`}
           title=${_texts.deleteEntryButtonTitleText}
           @click=${handleDelete}
         >
-          <span slot="icon" class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+          <span slot="icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
         </solid-ui-button>
       </div>
     </div>
@@ -242,17 +239,12 @@ function renderContactInfoPhoneSection(phones, onAddRow) {
           Phone Numbers
         </h3>
         <solid-ui-button
-          type="button"
-          variant="secondary"
-          size="sm"
-          class="profile__action-button profile-action-text profile-edit-dialog__add-button"
+          variant="tertiary"
           aria-label="Add another phone number"
           @click=${createNewRow}
         >
-          <span class="profile__add-more-content">
-            <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
-            <span>Add More</span>
-          </span>
+          <span slot="left-icon" class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
+          Add More
         </solid-ui-button>
       </header>
       <fieldset>
@@ -332,15 +324,12 @@ function renderContactEmailInputRow({
       </label>
       <div class="profile-edit-dialog__actions">
         <solid-ui-button
-          type="button"
-          variant="icon"
-          size="md"
-          class="profile-edit-dialog__delete-button"
+          variant="ghost"
           aria-label=${`Delete email address ${displayIndex + 1}`}
           title=${_texts.deleteEntryButtonTitleText}
           @click=${handleDelete}
         >
-          <span slot="icon" class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+          <span slot="icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
         </solid-ui-button>
       </div>
     </div>
@@ -375,17 +364,12 @@ function renderContactInfoEmailSection(emails, onAddRow) {
           Email Addresses
         </h3>
         <solid-ui-button
-          type="button"
-          variant="secondary"
-          size="sm"
-          class="profile__action-button profile-action-text profile-edit-dialog__add-button"
+          variant="tertiary"
           aria-label="Add another email address"
           @click=${createNewRow}
         >
-          <span class="profile__add-more-content">
-            <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
-            <span>Add More</span>
-          </span>
+          <span slot="left-icon" class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
+          Add More
         </solid-ui-button>
       </header>
       <fieldset>
@@ -451,15 +435,12 @@ function renderContactAddressInputRow({
       </label>
       <div class="profile-edit-dialog__actions profile-edit-dialog__actions--edge">
         <solid-ui-button
-          type="button"
-          variant="icon"
-          size="md"
-          class="profile-edit-dialog__delete-button"
+          variant="ghost"
           aria-label=${`Delete address ${displayIndex + 1}`}
           title=${_texts.deleteEntryButtonTitleText}
           @click=${handleDelete}
         >
-          <span slot="icon" class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+          <span slot="icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
         </solid-ui-button>
       </div>
     </div>
@@ -586,17 +567,12 @@ function renderContactInfoAddressSection(addresses, onAddRow) {
           Addresses
         </h3>
         <solid-ui-button
-          type="button"
-          variant="secondary"
-          size="sm"
-          class="profile__action-button profile-action-text profile-edit-dialog__add-button"
+          variant="tertiary"
           aria-label="Add another address"
           @click=${createNewRow}
         >
-          <span class="profile__add-more-content">
-            <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
-            <span>Add More</span>
-          </span>
+          <span slot="left-icon" class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
+          Add More
         </solid-ui-button>
       </header>
       <fieldset>

package/lib/sections/contactInfo/ContactInfoSection.css

@@ -1,6 +1,6 @@
 .profile__section[data-profile-section='contact-info'],
 .profile__section--empty[data-profile-section='contact-info'] {
-  --contact-info-icon-padding-inline: 0.575rem;
+  --contact-info-icon-padding-inline: 9.2px;
   --contact-info-icon-size: var(--icon-xxs, 1rem);
   --contact-info-contact-point-value-size: var(--font-size-sm, 0.875rem);
   --contact-info-contact-point-type-size: var(--font-size-xxs, 0.75rem);
@@ -13,14 +13,14 @@
   justify-content: center;
   width: 2.25rem;
   height: 2.25rem;
-  padding: 0 var(--contact-info-icon-padding-inline, 0.575rem);
+  padding: 0 var(--contact-info-icon-padding-inline);
   flex-shrink: 0;
 }
 
 .contact-info__item {
   display: flex;
   align-items: flex-start;
-  gap: var(--spacing-2xs, 0.625rem);
+  gap: 10px;
   margin-inline-start: 0;
 }
 
@@ -66,8 +66,8 @@
   box-sizing: border-box;
   list-style: none;
   margin: 0;
-  padding: 0 0 var(--spacing-2xs, 0.625rem) 0;
-  gap: var(--spacing-2xs, 0.625rem);
+  padding: 0 0 10px 0;
+  gap: 10px;
 }
 
 .contact-info__list:last-of-type {
@@ -75,7 +75,7 @@
 }
 
 .contact-info__list + .contact-info__list {
-  margin-top: var(--spacing-2xs, 0.625rem);
+  margin-top: 10px;
 }
 
 /* Empty state */
@@ -100,7 +100,7 @@
   text-align: center;
   font-size: var(--font-size-xs, 0.813rem);
   font-weight: var(--font-weight-normal, 400);
-  line-height: var(--line-height-tight, 1.4);
+  line-height: 1.4;
 }
 
 .contact-info__empty-icon-wrapper {

package/lib/sections/contactInfo/ContactInfoSection.d.ts

@@ -1,7 +1,7 @@
 import 'solid-ui/components/button';
-import { ViewerMode } from '../../types';
+import { Layout, ViewerMode } from '../../types';
 import { LiveStore, NamedNode } from 'rdflib';
 import './ContactInfoSection.css';
 import { ContactInfo } from './types';
-export declare function renderContactInfoSection(store: LiveStore, subject: NamedNode, contactInfo: ContactInfo, viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
+export declare function renderContactInfoSection(store: LiveStore, subject: NamedNode, contactInfo: ContactInfo, viewerMode: ViewerMode, layout: Layout, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1>;
 //# sourceMappingURL=ContactInfoSection.d.ts.map

package/lib/sections/contactInfo/ContactInfoSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactInfoSection.d.ts","sourceRoot":"","sources":["../../../src/sections/contactInfo/ContactInfoSection.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,0BAA0B,CAAA;AAGjC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAkSrC,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAoBrC"}
+{"version":3,"file":"ContactInfoSection.d.ts","sourceRoot":"","sources":["../../../src/sections/contactInfo/ContactInfoSection.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAEhD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,0BAA0B,CAAA;AAGjC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAwQrC,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,wCAmBrC"}

package/lib/sections/contactInfo/ContactInfoSection.js

@@ -15,6 +15,7 @@ var _phoneCountries = require("../shared/phoneCountries");
 var _contactTypeUtils = require("../shared/contactTypeUtils");
 var _profileIcons = require("../../icons-svg/profileIcons");
 var _contactIcons = require("../../icons-svg/contactIcons");
+var _responsiveActionButton = require("../../ui/responsiveActionButton");
 function toText(value) {
   if (!value) return '';
   if (typeof value === 'string') return value;
@@ -111,7 +112,7 @@ function renderAddresses(addresses) {
   if (!addresses || !addresses.length || !addresses[0]) return (0, _litHtml.html)``;
   return (0, _litHtml.html)`${renderAddress(addresses[0])}${addresses.length > 1 ? renderAddresses(addresses.slice(1)) : (0, _litHtml.html)``}`;
 }
-function renderContactInfoSectionDefault(store, subject, contactInfo, viewerMode, onSaved) {
+function renderContactInfoSectionDefault(store, subject, contactInfo, viewerMode, layout, onSaved) {
   const hasAnyContactInfo = contactInfo?.emails.length > 0 || contactInfo?.phones.length > 0 || contactInfo?.addresses.length > 0;
   const isOwner = viewerMode === 'owner';
   return (0, _litHtml.html)`
@@ -127,27 +128,18 @@ function renderContactInfoSectionDefault(store, subject, contactInfo, viewerMode
         <h3 id="contact-details-heading" tabindex="-1">${_texts.contactInfoHeadingText}</h3>
         <div class="profile-section-collapsible__actions">
           ${isOwner ? (0, _litHtml.html)`
-            <solid-ui-button
-              type="button"
-              variant="secondary"
-              size="sm"
-              class="profile__action-button profile-action-text profile-section-collapsible__edit-button"
-              aria-label="Edit contact information"
-              @click=${event => {
-    return (0, _ContactInfoEditDialog.createContactInfoEditDialog)(event, store, subject, contactInfo, viewerMode, onSaved);
-  }}
-            >
-              <span class="profile-section-collapsible__edit-label profile__add-more-content">
-                <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
-                <span>Add More</span>
-              </span>
-              <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
-            </solid-ui-button>
-          ` : (0, _litHtml.html)``}
+              ${(0, _responsiveActionButton.renderResponsiveActionButton)({
+    layout,
+    className: 'profile-section-collapsible__edit-button',
+    ariaLabel: 'Edit contact information',
+    onClick: event => (0, _ContactInfoEditDialog.createContactInfoEditDialog)(event, store, subject, contactInfo, viewerMode, onSaved),
+    desktopIcon: (0, _litHtml.html)`<span slot="left-icon" class="profile-section-collapsible__action-label profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>`,
+    desktopLabel: 'Add More',
+    mobileIcon: (0, _litHtml.html)`<span slot="icon" class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>`
+  })}
+            ` : _litHtml.nothing}
           <solid-ui-button
-            type="button"
-            variant="icon"
-            size="sm"
+            variant="ghost"
             class="profile-section-collapsible__toggle-button"
             aria-label="Toggle contact information section"
             aria-controls="contact-details-panel"
@@ -174,24 +166,21 @@ function renderContactInfoSectionDefault(store, subject, contactInfo, viewerMode
                 ${renderAddresses(contactInfo.addresses)}
               </ul>
             ` : (0, _litHtml.html)``}
-        ${hasAnyContactInfo ? (0, _litHtml.html)`` : (0, _litHtml.html)`<p>No contact details added yet.</p>`}
+        ${hasAnyContactInfo ? _litHtml.nothing : (0, _litHtml.html)`<p>No contact details added yet.</p>`}
       </div>
     </section>
   `;
 }
-function renderOwnerEmptyContactInfoContent(_store, _subject, _contactInfo, _viewerMode, _onSaved) {
+function renderOwnerEmptyContactInfoContent() {
   return (0, _litHtml.html)`
       <div class="profile__empty-state-content" role="group" aria-label="Empty contact information section">    
         <div class="contact-info__empty-icon-wrapper">
           <span class="contact-info__empty-icon">${_profileIcons.envelopeIcon}</span>
         </div>
-        <p class="profile__empty-state-message contact-info__empty-message">
-            No additional contact info added yet.
-        </p>
       </div>
   `;
 }
-function renderOwnerEmptyContactInfoSection(store, subject, contactInfo, viewerMode, onSaved) {
+function renderOwnerEmptyContactInfoSection(store, subject, contactInfo, viewerMode, layout, onSaved) {
   return (0, _litHtml.html)`
     <section 
       aria-labelledby="contact-details-heading" 
@@ -204,23 +193,19 @@ function renderOwnerEmptyContactInfoSection(store, subject, contactInfo, viewerM
       <header class="profile__section-header profile-section-collapsible__header">
         <h3 id="contact-details-heading" tabindex="-1">${_texts.contactInfoEmptyHeadingText}</h3>
         <div class="profile-section-collapsible__actions">
+         ${(0, _responsiveActionButton.renderResponsiveActionButton)({
+    layout,
+    className: 'profile-section-collapsible__edit-button',
+    ariaLabel: 'Add contact information',
+    onClick: event => {
+      return (0, _ContactInfoEditDialog.createContactInfoEditDialog)(event, store, subject, contactInfo, viewerMode, onSaved);
+    },
+    desktopIcon: (0, _litHtml.html)`<span slot="left-icon" class="profile-section-collapsible__action-label profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>`,
+    desktopLabel: 'Add More',
+    mobileIcon: (0, _litHtml.html)`<span slot="icon" class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>`
+  })}
           <solid-ui-button
-            type="button"
-            variant="secondary"
-            size="sm"
-            class="profile__action-button profile-action-text profile-section-collapsible__edit-button"
-            aria-label="Add contact information"
-            @click=${event => {
-    return (0, _ContactInfoEditDialog.createContactInfoEditDialog)(event, store, subject, contactInfo, viewerMode, onSaved);
-  }}
-          >
-            <span class="profile-section-collapsible__edit-label">${_profileIcons.addIcon} Add More</span>
-            <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
-          </solid-ui-button>
-          <solid-ui-button
-            type="button"
-            variant="icon"
-            size="sm"
+            variant="ghost"
             class="profile-section-collapsible__toggle-button"
             aria-label="Toggle contact information section"
             aria-controls="contact-details-panel"
@@ -232,12 +217,13 @@ function renderOwnerEmptyContactInfoSection(store, subject, contactInfo, viewerM
         </div>
       </header>
       <div id="contact-details-panel" class="profile-section-collapsible__content">
-        ${renderOwnerEmptyContactInfoContent(store, subject, contactInfo, viewerMode, onSaved)}
+        ${renderOwnerEmptyContactInfoContent()}
       </div>
     </section>
   `;
 }
-function renderContactInfoSection(store, subject, contactInfo, viewerMode, onSaved) {
+function renderContactInfoSection(store, subject, contactInfo, viewerMode, layout, onSaved) {
+  const currentLayout = layout || 'desktop';
   const safeContactInfo = {
     emails: contactInfo?.emails || [],
     phones: contactInfo?.phones || [],
@@ -245,8 +231,7 @@ function renderContactInfoSection(store, subject, contactInfo, viewerMode, onSav
   };
   const hasAnyContactInfo = safeContactInfo.emails.length > 0 || safeContactInfo.phones.length > 0 || safeContactInfo.addresses.length > 0;
   const showOwnerEmptyContactInfo = !hasAnyContactInfo && viewerMode === 'owner';
-  const showSection = true;
-  return showSection ? (0, _litHtml.html)`
-    ${showOwnerEmptyContactInfo ? renderOwnerEmptyContactInfoSection(store, subject, safeContactInfo, viewerMode, onSaved) : renderContactInfoSectionDefault(store, subject, safeContactInfo, viewerMode, onSaved)}
-  ` : '';
+  return (0, _litHtml.html)`
+    ${showOwnerEmptyContactInfo ? renderOwnerEmptyContactInfoSection(store, subject, safeContactInfo, viewerMode, currentLayout, onSaved) : renderContactInfoSectionDefault(store, subject, safeContactInfo, viewerMode, currentLayout, onSaved)}
+  `;
 }

package/lib/sections/education/EducationSection.d.ts

@@ -4,5 +4,5 @@ import { ViewerMode } from '../../types';
 import './EducationSection.css';
 import { LiveStore, NamedNode } from 'rdflib';
 export declare const EducationCard: (educationData: EducationDetails[]) => import("lit-html").TemplateResult<1>;
-export declare function renderEducationSection(store: LiveStore, subject: NamedNode, educationData: EducationDetails[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
+export declare function renderEducationSection(store: LiveStore, subject: NamedNode, educationData: EducationDetails[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1>;
 //# sourceMappingURL=EducationSection.d.ts.map

package/lib/sections/education/EducationSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EducationSection.d.ts","sourceRoot":"","sources":["../../../src/sections/education/EducationSection.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AA4E7C,eAAO,MAAM,aAAa,GACxB,eAAe,gBAAgB,EAAE,yCAclC,CAAA;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,aAAa,EAAE,gBAAgB,EAAE,EACjC,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAqDrC"}
+{"version":3,"file":"EducationSection.d.ts","sourceRoot":"","sources":["../../../src/sections/education/EducationSection.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AA4E7C,eAAO,MAAM,aAAa,GACxB,eAAe,gBAAgB,EAAE,yCAclC,CAAA;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,aAAa,EAAE,gBAAgB,EAAE,EACjC,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,wCAoDrC"}

package/lib/sections/education/EducationSection.js

@@ -85,9 +85,8 @@ function renderEducationSection(store, subject, educationData, viewerMode, onSav
   const educationCard = EducationCard(educationData);
   const educationDetails = educationData || [];
   const hasEducation = educationDetails && educationDetails.length > 0;
-  const showSection = true;
   const isOwner = viewerMode === 'owner';
-  return showSection ? (0, _litHtml.html)`
+  return (0, _litHtml.html)`
     <section 
       aria-labelledby="education-heading" 
       class="profile__section profile-section-collapsible profile-section-collapsible--inline-mobile-actions"
@@ -129,5 +128,5 @@ function renderEducationSection(store, subject, educationData, viewerMode, onSav
         ${hasEducation ? educationCard : (0, _litHtml.html)`<p>No education details added yet.</p>`}
       </div>
     </section>
-  ` : '';
+  `;
 }

package/lib/sections/heading/HeadingEditDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeadingEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/heading/HeadingEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,4BAA4B,CAAA;AACnC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAwC,MAAM,SAAS,CAAA;AAE9E,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AA+6BxC,wBAAsB,uBAAuB,CAC3C,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,cAAc,EAC3B,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBA6ErC"}
+{"version":3,"file":"HeadingEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/heading/HeadingEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,4BAA4B,CAAA;AACnC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAwC,MAAM,SAAS,CAAA;AAE9E,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAu6BxC,wBAAsB,uBAAuB,CAC3C,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,cAAc,EAC3B,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBA6ErC"}

package/lib/sections/heading/HeadingEditDialog.js

@@ -618,10 +618,8 @@ function renderHeadingInfoInput(formState, rerender) {
         <div class="profile-edit-dialog__image-frame">
           ${(0, _HeadingSection.Image)(imagePreviewSrc || basicInfo.imageSrc, basicInfo.name)}
           <solid-ui-button
-            type="button"
             class="profile-edit-dialog__image-camera-button"
-            variant="icon"
-            size="md"
+            variant="ghost"
             aria-label="Take a photo"
             title="Take a photo"
             @click=${handleCameraClick}
@@ -637,10 +635,7 @@ function renderHeadingInfoInput(formState, rerender) {
 
         <div class="profile-edit-dialog__image-preview-actions">
           <solid-ui-button
-            type="button"
             variant="secondary"
-            size="md"
-            label="Upload New"
             class="profile-edit-dialog__image-button profile-edit-dialog__image-upload-button"
             aria-label="Upload new profile photo"
             title="Upload New"
@@ -649,10 +644,7 @@ function renderHeadingInfoInput(formState, rerender) {
             Upload New
           </solid-ui-button>
           <solid-ui-button
-            type="button"
             variant="secondary"
-            size="md"
-            label="Remove"
             class="profile-edit-dialog__image-button profile-edit-dialog__image-remove-button"
             aria-label="Delete profile photo"
             title="Remove"