created edit profile view

blocks/event-format-component/event-format-component.js

@@ -136,20 +136,6 @@ function decorateCheckbox(column) {
   column.append(checkbox);
 }
 
-// async function decorateNewSeriesBtnAndModal(column) {
-//   const pTag = column.querySelector(':scope > p');
-//   const plusIcon = getIcon('add-circle');
-//   const a = column.querySelector('a[href$="#new-series"]');
-
-//   if (a) {
-//     pTag.classList.add('add-series-btn-wrapper');
-//     a.append(plusIcon);
-//     a.classList.add('add-series-modal-btn');
-//   }
-
-//   await decorateNewSeriesModal(column);
-// }
-
 export default function init(el) {
   el.classList.add('form-component');
 

blocks/form-handler/controllers/profile-component-controller.js

@@ -25,9 +25,9 @@ export async function onSubmit(component, props) {
 
 export default function init(component) {
   const eventData = getJoinedData();
-  const { profiles } = eventData;
+  const { speakers } = eventData;
   const profileContainer = component.querySelector('profile-container');
-  if (!profiles || !profileContainer) return;
-  profileContainer.profiles = profiles;
+  if (!speakers || !profileContainer) return;
+  profileContainer.profiles = speakers;
   profileContainer.requestUpdate();
 }

blocks/form-handler/form-handler.js

@@ -53,6 +53,10 @@ const SPECTRUM_COMPONENTS = [
   'divider',
   'button',
   'progress-circle',
+  'overlay',
+  'dialog',
+  'button-group',
+  'tooltip',
 ];
 
 function replaceAnchorWithButton(anchor) {

blocks/profile-component/profile-component.js

@@ -9,6 +9,7 @@ function extractFieldLabels(element) {
 
   const payload = {
     heading: headingDiv.querySelector('h2, h3, h4, h5, h6')?.textContent?.trim(),
+    tooltipMessage: headingDiv.querySelector('p > em')?.textContent?.trim(),
     chooseType: rows[0].querySelector('div')?.textContent?.trim(),
     firstName: rows[1].querySelector('div')?.textContent?.trim(),
     firstNameSubText: rows[1].querySelector('div > div:nth-of-type(2)')?.textContent?.trim(),
@@ -35,7 +36,7 @@ async function decorateProfile(element) {
 
   const profileContainer = createTag('profile-container', { class: 'profile-component' });
   profileContainer.fieldlabels = fieldlabels;
-  profileContainer.profiles = [{ socialMedia: [{ url: '' }] }];
+  profileContainer.profiles = [{ socialMedia: [{ link: '' }] }];
   element.append(profileContainer);
 }
 

components/image-dropzone/image-dropzone.css.js

@@ -40,6 +40,7 @@ export const style = css`
   height: 100%;
   width: 100%;
   object-fit: cover;
+  display: block;
 }
 
 .img-file-input-wrapper label {

components/image-dropzone/image-dropzone.js

@@ -36,7 +36,7 @@ export class ImageDropzone extends LitElement {
   }
 
   async uploadImage(url = this.configs.targetUrl) {
-    if (!this.file) return;
+    if (!this.file || !(this.file instanceof File)) return;
 
     this.configs.targetUrl = url;
     const resp = await uploadBinaryFile(this.file, this.configs);

components/profile-container/profile-container.css.js

@@ -27,12 +27,6 @@ repeater-element {
     margin: 24px;
 }
 
-.form-component {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
 .form-component > div:first-of-type > div > h2,
 .form-component > div:first-of-type > div > h3 {
   display: flex;

components/profile-container/profile-container.js

@@ -6,7 +6,7 @@ import { style } from './profile-container.css.js';
 
 const { LitElement, html, repeat, nothing } = await import(`${getLibs()}/deps/lit-all.min.js`);
 
-const defaultProfile = { socialMedia: [{ url: '' }], isPlaceholder: true };
+const defaultProfile = { socialMedia: [{ link: '' }], isPlaceholder: true };
 
 export class ProfileContainer extends LitElement {
   static properties = {

components/profile/profile.css.js

@@ -6,7 +6,8 @@ const { css } = await import(`${getLibs()}/deps/lit-all.min.js`);
 // eslint-disable-next-line import/prefer-default-export
 export const style = css`
 image-dropzone {
-  width: 40%;
+  width: 300px;
+  max-width: 100%;
 }
 
 .img-file-input-wrapper {
@@ -18,14 +19,16 @@ image-dropzone {
   justify-content: center;
   text-align: center;
   align-items: center;
+  align-self: flex-start;
+  overflow: hidden;
 }
 
 sp-textfield {
-    width: 100%;
+  width: 100%;
 }
 
 p {
-    margin: 0px;
+  margin: 0px;
 }
 
 h2 {
@@ -39,20 +42,31 @@ h5 {
   margin-bottom: 0px;
 }
 
+.social-media {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
 .social-media-row {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 16px;
-  margin-bottom: 32px;
+}
+
+.social-media-row svg {
+  margin-left: 16px;
+  color: var(--color-black);
+  height: 32px;
+  width: 32px;
 }
 
 .social-media-input {
   width: 100%;
 }
 
-.save-profile-button {
-  width: fit-content;
+.profile-action-button {
   align-self: end;
 }
 
@@ -67,4 +81,86 @@ h5 {
 .icon-remove-circle:hover {
   opacity: 1;
 }
+
+.edit-profile {
+  margin-left: auto;
+}
+
+modal{
+  width: 1000px;
+}
+
+.profile-view {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.social-media h3 {
+  margin: 0;
+}
+
+.speaker-image {
+  width: 300px;
+  max-width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.feds-social-icon {
+  display: block;
+  width: 24px;
+  height: 24px;
+  color: #808080;
+}
+
+.feds-footer-icons {
+  display: none;
+}
+
+.last-updated {
+  width: 100%;
+}
+
+.profile-footer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+}
+
+.save-profile-button {
+  width: fit-content;
+  align-self: end;
+}
+
+.profile-save-footer {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.footer-button-group {
+  margin-left: auto;
+}
+
+.profile-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.profile-header h2 {
+  margin: 0;
+}
+
+.profile-header overlay-trigger {
+  height: 18px;
+}
+
+.edit-profile-title {
+  color: var(--color-red);
+}
 `;