fix: person card color (#2533)

removes fluent card and manually styles card background
now uses --neutral-floating-layer as card background color

Co-authored-by: Nickii Miaro <[email protected]>

Author: gavinbarron

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.scss

@@ -46,7 +46,6 @@ $person-card-base-icons-left-spacing: var(
   --file-list-background-color: transparent;
   --file-list-box-shadow: none;
   --file-item-background-color: transparent;
-  --card-height: auto;
 
   .small {
     max-height: 100vh;

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.theme.scss

@@ -19,7 +19,7 @@
 @import '../../components/mgt-messages/mgt-messages.theme';
 @import '../../components/mgt-file-list/mgt-file-list.theme';
 
-$person-card-background-color: var(--person-card-background-color, transparent);
+$person-card-background-color: var(--person-card-background-color, var(--neutral-layer-floating));
 $person-card-expanded-background-color-hover: var(
   --person-card-expanded-background-color-hover,
   var(--neutral-fill-hover)

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts

@@ -564,15 +564,15 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       ? html`<div @keydown=${this.handleEndOfCard} aria-label=${this.strings.endOfCard} tabindex="0" id="end-of-container"></div>`
       : html``;
     return html`
-      <fluent-card class="root" dir=${this.direction}>
+      <div class="root" dir=${this.direction}>
         <div class=${classMap({ small: this._smallView })}>
           ${navigationTemplate}
           ${closeCardTemplate}
           <div class="person-details-container">${personDetailsTemplate}</div>
           <div class="expanded-details-container">${expandedDetailsTemplate}</div>
           ${tabLocker}
         </div>
-      </fluent-card>
+      </div>
      `;
   }