Add background styling to user profile cards

.changeset/add_color_heros.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add background styling to user profile cards

src/app/components/user-profile/CreatorChip.tsx

@@ -16,8 +16,19 @@ import { useOpenSpaceSettings } from '$state/hooks/spaceSettings';
 import { SpaceSettingsPage } from '$state/spaceSettings';
 import { RoomSettingsPage } from '$state/roomSettings';
 import { PowerColorBadge, PowerIcon } from '$components/power';
+import * as css from './styles.css';
 
-export function CreatorChip() {
+export function CreatorChip({
+  backgroundColor,
+  innerColor,
+  cardColor,
+  textColor,
+}: {
+  backgroundColor?: string;
+  innerColor?: string;
+  cardColor?: string;
+  textColor?: string;
+}) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const room = useRoom();
@@ -53,10 +64,12 @@ export function CreatorChip() {
           }}
         >
           <Menu>
-            <div style={{ padding: config.space.S100 }}>
+            <div style={{ padding: config.space.S100, backgroundColor: innerColor }}>
               <MenuItem
                 variant="Surface"
                 fill="None"
+                className={css.UserHeroMenuItem}
+                style={{ backgroundColor: cardColor, color: textColor }}
                 size="300"
                 radii="300"
                 onClick={() => {
@@ -80,8 +93,6 @@ export function CreatorChip() {
       }
     >
       <Chip
-        variant="Success"
-        outlined
         radii="Pill"
         before={
           cords ? (
@@ -93,6 +104,12 @@ export function CreatorChip() {
         after={tagIconSrc ? <PowerIcon size="50" iconSrc={tagIconSrc} /> : undefined}
         onClick={open}
         aria-pressed={!!cords}
+        className={css.UserHeroChip}
+        style={{
+          backgroundColor: cardColor,
+          borderColor: backgroundColor,
+          color: textColor,
+        }}
       >
         <Text size="B300" truncate>
           {tag.name}

src/app/components/user-profile/PowerChip.tsx

@@ -45,6 +45,7 @@ import { useMemberPowerCompare } from '$hooks/useMemberPowerCompare';
 import { CutoutCard } from '$components/cutout-card';
 import { PowerColorBadge, PowerIcon } from '$components/power';
 import { EventType } from '$types/matrix-sdk';
+import * as css from './styles.css';
 
 type SelfDemoteAlertProps = {
   power: number;
@@ -146,7 +147,19 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
   );
 }
 
-export function PowerChip({ userId }: { userId: string }) {
+export function PowerChip({
+  userId,
+  backgroundColor,
+  innerColor,
+  cardColor,
+  textColor,
+}: {
+  userId: string;
+  backgroundColor?: string;
+  innerColor?: string;
+  cardColor?: string;
+  textColor?: string;
+}) {
   const mx = useMatrixClient();
   const room = useRoom();
   const space = useSpaceOptionally();
@@ -241,7 +254,11 @@ export function PowerChip({ userId }: { userId: string }) {
               <Box
                 direction="Column"
                 gap="100"
-                style={{ padding: config.space.S100, maxWidth: toRem(200) }}
+                style={{
+                  padding: config.space.S100,
+                  maxWidth: toRem(200),
+                  backgroundColor: innerColor,
+                }}
               >
                 {error && (
                   <CutoutCard style={{ padding: config.space.S200 }} variant="Critical">
@@ -270,6 +287,8 @@ export function PowerChip({ userId }: { userId: string }) {
                       radii="300"
                       aria-disabled={changing || !canChangePowers || !canAssignPower}
                       aria-pressed={selected}
+                      className={css.UserHeroMenuItem}
+                      style={{ backgroundColor: cardColor, color: textColor }}
                       before={<PowerColorBadge color={powerTag.color} />}
                       after={
                         powerTagIconSrc ? (
@@ -287,13 +306,15 @@ export function PowerChip({ userId }: { userId: string }) {
                   );
                 })}
               </Box>
-              <Line size="300" />
-              <div style={{ padding: config.space.S100 }}>
+              <Line size="300" color={textColor} />
+              <div style={{ padding: config.space.S100, backgroundColor: innerColor }}>
                 <MenuItem
                   variant="Surface"
                   fill="None"
                   size="300"
                   radii="300"
+                  className={css.UserHeroMenuItem}
+                  style={{ backgroundColor: cardColor, color: textColor }}
                   onClick={() => {
                     if (room.isSpaceRoom()) {
                       openSpaceSettings(
@@ -319,8 +340,14 @@ export function PowerChip({ userId }: { userId: string }) {
         }
       >
         <Chip
-          variant={error ? 'Critical' : 'SurfaceVariant'}
+          variant={error ? 'Critical' : undefined}
           radii="Pill"
+          className={css.UserHeroChip}
+          style={{
+            backgroundColor: (!error && cardColor) || undefined,
+            borderColor: backgroundColor,
+            color: textColor,
+          }}
           before={
             cords ? (
               <Icon size="50" src={Icons.ChevronBottom} />