add to friend like profile-pane

Author: SharonStrats

src/social/socialPane.css

@@ -56,6 +56,17 @@
   flex-wrap: wrap;
 }
 
+.social-pane__header-actions--friend {
+  justify-content: center;
+}
+
+.social-pane__header-actions--friend > solid-ui-button {
+  margin-inline: auto;
+  --button-border-radius: var(--border-radius-md, 0.5rem);
+  --button-hover-text: var(--color-primary, #7C4DFF);
+  --button-hover-border: var(--color-primary, #7C4DFF);
+}
+
 .social-pane__header-summary {
   gap: var(--spacing-xs, 0.75rem);
   width: fit-content;
@@ -156,33 +167,6 @@
   stroke: none;
 }
 
-.social-pane__friend-action {
-  position: static;
-  width: auto;
-  min-width: 0;
-  max-width: none;
-  padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);
-  gap: var(--spacing-xxs, 0.3125rem);
-  border-radius: var(--border-radius-md, 0.5rem);
-  border: 1px solid var(--color-primary, #7C4DFF);
-  background: transparent;
-  color: var(--color-primary, #7C4DFF);
-  cursor: pointer;
-  font: inherit;
-  font-weight: var(--font-weight-bold, 600);
-  font-size: var(--font-size-sm, 0.875rem);
-  line-height: 1.2;
-}
-
-.social-pane__friend-action:hover {
-  background: rgb(124 77 255 / 0.06);
-}
-
-.social-pane__friend-action:focus-visible {
-  outline: var(--border-width-medium, 2px) solid var(--color-primary, #7C4DFF);
-  outline-offset: 2px;
-}
-
 .social-pane__dialog-backdrop {
   position: fixed;
   inset: 0;
@@ -1059,6 +1043,16 @@ div.social-pane {
   margin-left: 0;
 }
 
+:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-actions--friend {
+  grid-column: 1 / -1;
+  grid-row: 3;
+  justify-self: stretch;
+  justify-content: center;
+  width: 100%;
+  margin-left: 0;
+  margin-top: 0.125rem;
+}
+
 :is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-summary {
   display: flex;
   flex-direction: column;
@@ -1137,12 +1131,6 @@ div.social-pane {
   font-size: var(--font-size-xxs, 0.75rem);
 }
 
-:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__friend-action {
-  padding: var(--spacing-xxxs, 0.2rem) var(--spacing-xxs-old, 0.3rem);
-  font-size: var(--font-size-xs, 0.813rem);
-  border-radius: var(--border-radius-base, 0.3125rem);
-}
-
 :is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__edit-button-label, .social-pane__edit-button .profile-section-collapsible__edit-label) {
   display: none !important;
 }
@@ -1258,6 +1246,16 @@ div.social-pane {
     margin-left: 0;
   }
 
+  .social-pane__header-actions--friend {
+    grid-column: 1 / -1;
+    grid-row: 3;
+    justify-self: stretch;
+    justify-content: center;
+    width: 100%;
+    margin-left: 0;
+    margin-top: 0.125rem;
+  }
+
   .social-pane__header-summary {
     display: flex;
     flex-direction: column;
@@ -1340,9 +1338,9 @@ div.social-pane {
   }
 
   .social-pane__friend-action {
-    padding: var(--spacing-xxxs, 0.2rem) var(--spacing-xxs-old, 0.3rem);
-    font-size: var(--font-size-xs, 0.813rem);
-    border-radius: var(--border-radius-base, 0.3125rem);
+    --button-padding-sm: var(--spacing-xxxs, 0.2rem) var(--spacing-xxs-old, 0.3rem);
+    --button-font-size-sm: var(--font-size-xs, 0.813rem);
+    --button-border-radius-sm: var(--border-radius-base, 0.3125rem);
   }
 
   .social-pane__edit-button-label,

src/social/socialSections.ts

@@ -1,5 +1,5 @@
-import { createAddMeToYourFriendsButton } from 'profile-pane'
 import { DataBrowserContext } from 'pane-registry'
+import { createAddMeToYourFriendsButton } from 'profile-pane/lib/specialButtons/addMeToYourFriends'
 import { Statement, NamedNode } from 'rdflib'
 import { ns, utils, widgets } from 'solid-ui'
 import { appendProfileLinks, createEditProfileDetailsButton } from './editProfileDetails'
@@ -33,6 +33,10 @@ export type HeaderProfileData = {
   location?: string | null
 } | null
 
+type HeaderCallbacks = {
+  onAddFriendSuccess?: () => void
+}
+
 export type FriendRowRenderers = {
   renderSupportingInfo: (target: NamedNode, renderDom: HTMLDocument) => HTMLElement | null,
   renderNameSuffix: (target: NamedNode, renderDom: HTMLDocument) => HTMLElement | null
@@ -43,7 +47,8 @@ export function createHeaderSection (
   subject: NamedNode,
   controls: HeaderControls,
   stats: HeaderStats,
-  getProfileData: () => HeaderProfileData
+  getProfileData: () => HeaderProfileData,
+  callbacks: HeaderCallbacks = {}
 ): SocialHeaderElement {
   const dom = context.dom
   const kb = context.session.store
@@ -69,8 +74,9 @@ export function createHeaderSection (
         onSaved: renderHeader
       }))
     } else if (headerControls.viewerMode === 'authenticated' && headerControls.showAddFriendAction) {
+      headerActions.classList.add('social-pane__header-actions--friend')
       const addToFriendsButton = createAddMeToYourFriendsButton(subject, context)
-      addToFriendsButton.classList.add('social-pane__friend-action', 'profile__action-button', 'profile__btn-friends', 'flex-center')
+      addToFriendsButton.classList.add('flex-center')
       headerActions.appendChild(addToFriendsButton)
     }