profile-pane 3.2.3-0 → 3.2.3-2

package/lib/sections/heading/HeadingSection.d.ts

@@ -1,10 +1,9 @@
 import { TemplateResult } from 'lit-html';
-import 'solid-ui/components/button';
 import './HeadingSection.css';
 import { ProfileDetails } from './types';
 import { DataBrowserContext } from 'pane-registry';
 import { NamedNode } from 'rdflib';
-import { ViewerMode } from '../../types';
-export declare const renderHeadingSection: (context: DataBrowserContext, subject: NamedNode, profileData: ProfileDetails, viewerMode: ViewerMode, onSaved?: () => Promise<void> | void) => Promise<TemplateResult<1>>;
+import { Layout, ViewerMode } from '../../types';
+export declare const renderHeadingSection: (context: DataBrowserContext, subject: NamedNode, profileData: ProfileDetails, viewerMode: ViewerMode, layout: Layout, onSaved?: () => Promise<void> | void) => Promise<TemplateResult<1>>;
 export declare const Image: (src: any, alt: any) => TemplateResult<1>;
 //# sourceMappingURL=HeadingSection.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"HeadingSection.d.ts","sourceRoot":"","sources":["../../../src/sections/heading/HeadingSection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,UAAU,CAAA;AACxD,OAAO,4BAA4B,CAAA;AACnC,OAAO,sBAAsB,CAAA;AAC7B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAqBxC,eAAO,MAAM,oBAAoB,GAC/B,SAAS,kBAAkB,EAC3B,SAAS,SAAS,EAClB,aAAa,cAAc,EAC3B,YAAY,UAAU,EACtB,UAAU,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,+BAyErC,CAAA;AAaD,eAAO,MAAM,KAAK,GAAI,QAAG,EAAE,QAAG,sBAmB7B,CAAA"}
+{"version":3,"file":"HeadingSection.d.ts","sourceRoot":"","sources":["../../../src/sections/heading/HeadingSection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,UAAU,CAAA;AACxD,OAAO,sBAAsB,CAAA;AAC7B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAqBhD,eAAO,MAAM,oBAAoB,GAC/B,SAAS,kBAAkB,EAC3B,SAAS,SAAS,EAClB,aAAa,cAAc,EAC3B,YAAY,UAAU,EACtB,QAAQ,MAAM,EACd,UAAU,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,+BA6DrC,CAAA;AAaD,eAAO,MAAM,KAAK,GAAI,QAAG,EAAE,QAAG,sBAmB7B,CAAA"}

package/lib/sections/heading/HeadingSection.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.renderHeadingSection = exports.Image = void 0;
 var _litHtml = require("lit-html");
-require("solid-ui/components/button");
 require("./HeadingSection.css");
 var _HeadingEditDialog = require("./HeadingEditDialog");
 var _textUtils = require("../../textUtils");
@@ -13,8 +12,8 @@ var _dateHelpers = require("./dateHelpers");
 var _profileIcons = require("../../icons-svg/profileIcons");
 var _contactIcons = require("../../icons-svg/contactIcons");
 var _addMeToYourFriends = require("../../specialButtons/addMeToYourFriends");
-var _addMeToYourContacts = require("../../specialButtons/addContact/addMeToYourContacts");
 var _imageHelpers = require("./imageHelpers");
+var _responsiveActionButton = require("../../ui/responsiveActionButton");
 const showHeadingImageFallback = event => {
   const image = event.currentTarget;
   const frame = image?.parentElement;
@@ -24,7 +23,8 @@ const showHeadingImageFallback = event => {
   image.hidden = true;
   frame.classList.add('profile__image-frame--fallback');
 };
-const renderHeadingSection = async (context, subject, profileData, viewerMode, onSaved) => {
+const renderHeadingSection = async (context, subject, profileData, viewerMode, layout, onSaved) => {
+  const currentLayout = layout || 'desktop';
   const {
     name,
     pronouns,
@@ -38,7 +38,6 @@ const renderHeadingSection = async (context, subject, profileData, viewerMode, o
   const resolvedImageSrc = await (0, _imageHelpers.resolvePhotoDisplaySrc)(context.session.store, imageSrc);
   const isOwner = viewerMode === 'owner';
   const isAuthenticatedViewer = viewerMode === 'authenticated';
-  const contactsButton = isAuthenticatedViewer ? await (0, _addMeToYourContacts.addMeToYourContactsDiv)(subject, context) : _litHtml.nothing;
   const friendsButton = isAuthenticatedViewer ? (0, _addMeToYourFriends.addMeToYourFriendsDiv)(subject, context, viewerMode) : _litHtml.nothing;
   const phoneValue = (0, _textUtils.toText)(primaryPhone?.valueNode).replace(/^tel:/i, '');
   const emailValue = (0, _textUtils.toText)(primaryEmail?.valueNode).replace(/^mailto:/i, '');
@@ -61,26 +60,21 @@ const renderHeadingSection = async (context, subject, profileData, viewerMode, o
           ${isOwner || isAuthenticatedViewer ? (0, _litHtml.html)`
                 ${isAuthenticatedViewer ? (0, _litHtml.html)`
                   <div class="profile__actions profile__heading-actions">
-                    ${contactsButton}
                     ${friendsButton}
                   </div>
                 ` : _litHtml.nothing}
                 ${isOwner ? (0, _litHtml.html)`
                   <div class="profile__actions profile__heading-edit-action">
-                    <solid-ui-button
-                      type="button"
-                      variant="secondary"
-                      size="sm"
-                      class="profile__action-button profile__heading-action-button profile-action-text profile-section-collapsible__edit-button"
-                      aria-label="Add or edit heading information"
-                      @click=${event => {
-    return (0, _HeadingEditDialog.createHeadingEditDialog)(event, context.session.store, subject, profileData, viewerMode, onSaved);
-  }}
-                    >
-                    <span class="profile-section-collapsible__edit-label">${_profileIcons.editIcon} Edit</span>
-                    <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
-                  </solid-ui-button>
-                </div>
+                    ${(0, _responsiveActionButton.renderResponsiveActionButton)({
+    layout: currentLayout,
+    className: 'profile-section-collapsible__edit-button',
+    ariaLabel: 'Add or edit heading information',
+    onClick: event => (0, _HeadingEditDialog.createHeadingEditDialog)(event, context.session.store, subject, profileData, viewerMode, onSaved),
+    desktopIcon: (0, _litHtml.html)`<span slot="left-icon" class="profile-section-collapsible__action-label profile__add-more-icon" aria-hidden="true">${_profileIcons.editIcon}</span>`,
+    desktopLabel: 'Edit',
+    mobileIcon: (0, _litHtml.html)`<span slot="icon" class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>`
+  })}
+                  </div>
                 ` : _litHtml.nothing}
             ` : _litHtml.nothing}
           <div class="profile__details">

package/lib/sections/languages/LanguageEditDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/languages/LanguageEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,eAAe,EAAe,MAAM,SAAS,CAAA;AACtD,OAAO,8BAA8B,CAAA;AACrC,OAAO,0CAA0C,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAymBxC,wBAAsB,wBAAwB,CAC5C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,eAAe,EAAE,EAC5B,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAgDrC"}
+{"version":3,"file":"LanguageEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/languages/LanguageEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,eAAe,EAAe,MAAM,SAAS,CAAA;AACtD,OAAO,8BAA8B,CAAA;AACrC,OAAO,0CAA0C,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAsmBxC,wBAAsB,wBAAwB,CAC5C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,eAAe,EAAE,EAC5B,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAgDrC"}

package/lib/sections/languages/LanguageEditDialog.js

@@ -15,6 +15,9 @@ var _textUtils = require("../../textUtils");
 var _mutations = require("./mutations");
 var _profileIcons = require("../../icons-svg/profileIcons");
 var _texts = require("../../texts");
+/* combobox isn't working because the design system
+one doesn't work with search data */
+
 const WIKIDATA_LANGUAGE_ENDPOINT = 'https://query.wikidata.org/sparql';
 const LANGUAGE_OBJECT_URI_BASE = 'https://www.w3.org/ns/iana/language-code/';
 function sanitizeLanguageFieldValue(value) {
@@ -280,10 +283,8 @@ function renderLanguageInputRow({
       @drop=${event => onDrop(event, index)}
     >
       <solid-ui-button
-        type="button"
         class="profile-edit-dialog__drag-handle"
-        variant="icon"
-        size="md"
+        variant="ghost"
         aria-label=${`Reorder language ${displayIndex + 1}`}
         title="Drag to reorder"
         draggable="true"
@@ -294,7 +295,7 @@ function renderLanguageInputRow({
         @pointerup=${event => onPointerUp(event)}
         @pointercancel=${event => onPointerCancel(event)}
       >
-        <span slot="icon" class="profile-edit-dialog__drag-handle-icon" aria-hidden="true">${_profileIcons.bentoIcon}</span>
+        <span slot="icon" aria-hidden="true">${_profileIcons.bentoIcon}</span>
       </solid-ui-button>
       <label aria-label=${`${label} Language`} class="label profile-edit-dialog__field profile-edit-dialog__field--language-name">
         <solid-ui-combobox
@@ -306,7 +307,7 @@ function renderLanguageInputRow({
         ></solid-ui-combobox>
         <small class="profile-edit-dialog__input-help-text">Type to search and select one language suggestion.</small>
       </label>
-      <label aria-label=${proficiencyLabel} class="label" hidden>
+      <label aria-label=${proficiencyLabel} class="label profile-edit-dialog__field-type profile-edit-dialog__field-type--language-proficiency" hidden>
         <select name=${proficiencyInputName} id=${proficiencySelectId} @change=${handleProficiencyInput} .value=${row?.proficiency || ''}>
           <option value="Basic">Basic</option>
           <option value="Intermediate">Intermediate</option>
@@ -315,9 +316,7 @@ function renderLanguageInputRow({
       </label>
       <div class="profile-edit-dialog__actions profile-edit-dialog__actions--edge profile-edit-dialog__actions--language">
         <solid-ui-button
-          type="button"
-          variant="icon"
-          size="md"
+          variant="ghost"
           class="profile-edit-dialog__delete-button"
           aria-label=${`Delete language ${displayIndex + 1}`}
           title=${_texts.deleteEntryButtonTitleText}

package/lib/sections/languages/LanguageSection.css

@@ -10,14 +10,14 @@
   margin: 0;
   padding: 0;
   align-items: flex-start;
-  gap: var(--spacing-sm, 0.9375rem);
+  gap: 15px;
   align-self: stretch;
 }
 
 .languages__item-label {
   color: var(--color-text-subheading, var(--gray-900, #101828));
-  font-size: var(--font-size-md, 1rem);
-  font-weight: var(--font-weight-md, 500);
+  font-size: var(--solid-ui-font-size-md, 1rem);
+  font-weight: 500;
 }
 
 /* Empty state */
@@ -37,17 +37,17 @@
 }
 
 :is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .languages__item-label {
-  font-size: var(--font-size-sm, 0.875rem);
+  font-size: var(--solid-ui-font-size-sm, 0.875rem);
 }
 
 @media (max-width: 576px) {
   .languages__item-label {
-    font-size: var(--font-size-sm, 0.875rem);
+    font-size: var(--solid-ui-font-size-sm, 0.875rem);
   }
 }
 
 @container profile-pane (max-width: 576px) {
   .languages__item-label {
-    font-size: var(--font-size-sm, 0.875rem);
+    font-size: var(--solid-ui-font-size-sm, 0.875rem);
   }
 }

package/lib/sections/languages/LanguageSection.d.ts

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

package/lib/sections/languages/LanguageSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageSection.d.ts","sourceRoot":"","sources":["../../../src/sections/languages/LanguageSection.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAiKzC,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,eAAe,EAAE,EAC5B,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAcrC"}
+{"version":3,"file":"LanguageSection.d.ts","sourceRoot":"","sources":["../../../src/sections/languages/LanguageSection.ts"],"names":[],"mappings":"AACA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAkJzC,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,eAAe,EAAE,EAC5B,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,wCAarC"}

package/lib/sections/languages/LanguageSection.js

@@ -12,6 +12,7 @@ var _LanguageEditDialog = require("./LanguageEditDialog");
 var _profileIcons = require("../../icons-svg/profileIcons");
 var _texts = require("../../texts");
 var _collapsibleSection = require("../shared/collapsibleSection");
+var _responsiveActionButton = require("../../ui/responsiveActionButton");
 function renderLan(language, asList = false) {
   if (!language) return (0, _litHtml.html)``;
   return asList ? (0, _litHtml.html)`<li class="languages__item-label" role="listitem">${language.name}</li>` : (0, _litHtml.html)``;
@@ -20,7 +21,7 @@ function renderLanguages(languages, asList = false) {
   if (!languages || !languages.length || !languages[0]) return (0, _litHtml.html)``;
   return (0, _litHtml.html)`${renderLan(languages[0], asList)}${languages.length > 1 ? renderLanguages(languages.slice(1), asList) : (0, _litHtml.html)``}`;
 }
-function renderLanguagesSectionDefault(store, subject, languages, viewerMode, onSaved) {
+function renderLanguagesSectionDefault(store, subject, languages, viewerMode, layout, onSaved) {
   const hasLanguages = Array.isArray(languages) && languages.length > 0;
   const hasLanguageLinks = store.each(subject, _solidUi.ns.schema('knowsLanguage')).length > 0;
   const isOwner = viewerMode === 'owner';
@@ -37,25 +38,18 @@ function renderLanguagesSectionDefault(store, subject, languages, viewerMode, on
         <h3 id="languages-heading">${_texts.languagesHeadingText}</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="Add or edit languages"
-              @click=${event => (0, _LanguageEditDialog.createLanguageEditDialog)(event, store, subject, languages, 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: 'Add or edit languages',
+    onClick: event => (0, _LanguageEditDialog.createLanguageEditDialog)(event, store, subject, languages, 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 languages section"
             aria-controls="languages-panel"
@@ -76,19 +70,16 @@ function renderLanguagesSectionDefault(store, subject, languages, viewerMode, on
     </section>
   `;
 }
-function renderOwnerEmptyLanguagesContent(_store, _subject, _languages, _viewerMode, _onSaved) {
+function renderOwnerEmptyLanguagesContent() {
   return (0, _litHtml.html)`
       <div class="profile__empty-state-content" role="group" aria-label="Empty languages section">    
         <div class="languages__empty-icon-wrapper">
           <span class="languages__empty-icon">${_profileIcons.commentIcon}</span>
         </div>
-        <p class="profile__empty-state-message languages__empty-message">
-            No languages added yet.
-        </p>
       </div>
   `;
 }
-function renderOwnerEmptyLanguagesSection(store, subject, languages, viewerMode, onSaved) {
+function renderOwnerEmptyLanguagesSection(store, subject, languages, viewerMode, layout, onSaved) {
   return (0, _litHtml.html)`
     <section 
       aria-labelledby="languages-heading" 
@@ -101,26 +92,19 @@ function renderOwnerEmptyLanguagesSection(store, subject, languages, viewerMode,
       <header class="profile__section-header profile-section-collapsible__header">
         <h3 id="languages-heading" tabindex="-1">${_texts.languagesHeadingText}</h3>
         <div class="profile-section-collapsible__actions">
+          ${(0, _responsiveActionButton.renderResponsiveActionButton)({
+    layout,
+    className: 'profile-section-collapsible__edit-button',
+    ariaLabel: 'Add languages',
+    onClick: event => {
+      return (0, _LanguageEditDialog.createLanguageEditDialog)(event, store, subject, languages, 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 languages"
-            @click=${event => {
-    return (0, _LanguageEditDialog.createLanguageEditDialog)(event, store, subject, languages, 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>
-          <solid-ui-button
-            type="button"
-            variant="icon"
-            size="sm"
+            variant="ghost"
             class="profile-section-collapsible__toggle-button"
             aria-label="Toggle languages section"
             aria-controls="languages-panel"
@@ -132,17 +116,17 @@ function renderOwnerEmptyLanguagesSection(store, subject, languages, viewerMode,
         </div>
       </header>
       <div id="languages-panel" class="profile-section-collapsible__content">
-        ${renderOwnerEmptyLanguagesContent(store, subject, languages, viewerMode, onSaved)}
+        ${renderOwnerEmptyLanguagesContent()}
       </div>
     </section>
   `;
 }
-function renderLanguageSection(store, subject, languages, viewerMode, onSaved) {
+function renderLanguageSection(store, subject, languages, viewerMode, layout, onSaved) {
+  const currentLayout = layout || 'desktop';
   const safeLanguages = languages || [];
   const hasLanguages = Array.isArray(safeLanguages) && safeLanguages.length > 0;
   const showOwnerEmptyLanguages = !hasLanguages && viewerMode === 'owner';
-  const showSection = true;
-  return showSection ? (0, _litHtml.html)`
-    ${showOwnerEmptyLanguages ? renderOwnerEmptyLanguagesSection(store, subject, safeLanguages, viewerMode, onSaved) : renderLanguagesSectionDefault(store, subject, safeLanguages, viewerMode, onSaved)}
-  ` : '';
+  return (0, _litHtml.html)`
+    ${showOwnerEmptyLanguages ? renderOwnerEmptyLanguagesSection(store, subject, safeLanguages, viewerMode, currentLayout, onSaved) : renderLanguagesSectionDefault(store, subject, safeLanguages, viewerMode, currentLayout, onSaved)}
+      `;
 }

package/lib/sections/projects/ProjectEditDialog.d.ts

@@ -1,7 +1,6 @@
 import 'solid-ui/components/button';
 import { ProjectDetails } from './types';
 import '../../styles/EditDialogs.css';
-import '../contactInfo/ContactInfoEditDialog.css';
 import { LiveStore, NamedNode } from 'rdflib';
 import { ViewerMode } from '../../types';
 export declare function createProjectsEditDialog(event: Event, store: LiveStore, subject: NamedNode, projects: ProjectDetails[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): Promise<void>;

package/lib/sections/projects/ProjectEditDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/projects/ProjectEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,cAAc,EAAc,MAAM,SAAS,CAAA;AACpD,OAAO,8BAA8B,CAAA;AACrC,OAAO,0CAA0C,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAwJxC,wBAAsB,wBAAwB,CAC5C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,cAAc,EAAE,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAuCrC"}
+{"version":3,"file":"ProjectEditDialog.d.ts","sourceRoot":"","sources":["../../../src/sections/projects/ProjectEditDialog.ts"],"names":[],"mappings":"AAEA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,cAAc,EAAc,MAAM,SAAS,CAAA;AACpD,OAAO,8BAA8B,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAqJxC,wBAAsB,wBAAwB,CAC5C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,cAAc,EAAE,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,iBAuCrC"}

package/lib/sections/projects/ProjectEditDialog.js

@@ -8,7 +8,6 @@ var _dialog = require("../../ui/dialog");
 var _litHtml = require("lit-html");
 require("solid-ui/components/button");
 require("../../styles/EditDialogs.css");
-require("../contactInfo/ContactInfoEditDialog.css");
 var _rowState = require("../shared/rowState");
 var _textUtils = require("../../textUtils");
 var _mutations = require("./mutations");
@@ -94,16 +93,13 @@ function renderProjectInputRow(row, onChange) {
             @input=${handleUrlInput}
           />
           <solid-ui-button
-            type="button"
-            variant="secondary"
-            size="md"
-            label="Paste"
+            variant="tertiary"
             class="profile-edit-dialog__paste-button"
             aria-label="Paste project or community URL from clipboard"
             title=${_texts.pasteEntryButtonTitleText}
             @click=${handlePaste}
           >
-            <span slot="icon" class="profile-edit-dialog__paste-icon" aria-hidden="true">${_profileIcons.pasteIcon}</span>
+            <span slot="left-icon" class="profile-edit-dialog__paste-icon" aria-hidden="true">${_profileIcons.pasteIcon}</span>
             Paste
           </solid-ui-button>
         </div>