Adjust new profile styling

.changeset/restore-old-chip-style.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Various small adjustments to the themed profiles for better consistency.

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

@@ -1,5 +1,6 @@
 import type { RectCords } from 'folds';
 import { Chip, config, Icon, Icons, Menu, MenuItem, PopOut, Text } from 'folds';
+import type { CSSProperties } from 'react';
 import type { MouseEventHandler } from 'react';
 import { useState } from 'react';
 import FocusTrap from 'focus-trap-react';
@@ -16,19 +17,25 @@ import { useOpenSpaceSettings } from '$state/hooks/spaceSettings';
 import { SpaceSettingsPage } from '$state/spaceSettings';
 import { RoomSettingsPage } from '$state/roomSettings';
 import { PowerColorBadge, PowerIcon } from '$components/power';
+import { heroMenuItemStyle } from './heroMenuItemStyle';
 import * as css from './styles.css';
 
 export function CreatorChip({
-  backgroundColor,
   innerColor,
   cardColor,
   textColor,
+  chipSurfaceStyle,
+  chipFillColor,
+  chipHoverBrightness,
 }: {
-  backgroundColor?: string;
   innerColor?: string;
   cardColor?: string;
   textColor?: string;
+  chipSurfaceStyle?: CSSProperties;
+  chipFillColor?: string;
+  chipHoverBrightness?: number;
 }) {
+  const menuItemBg = chipFillColor ?? cardColor;
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const room = useRoom();
@@ -69,7 +76,10 @@ export function CreatorChip({
                 variant="Surface"
                 fill="None"
                 className={css.UserHeroMenuItem}
-                style={{ backgroundColor: cardColor, color: textColor }}
+                style={heroMenuItemStyle(
+                  { backgroundColor: menuItemBg, color: textColor },
+                  chipHoverBrightness
+                )}
                 size="300"
                 radii="300"
                 onClick={() => {
@@ -93,6 +103,8 @@ export function CreatorChip({
       }
     >
       <Chip
+        variant={cardColor ? undefined : 'Success'}
+        outlined={!cardColor}
         radii="Pill"
         before={
           cords ? (
@@ -104,12 +116,11 @@ 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,
-        }}
+        className={cardColor ? css.UserHeroChipThemed : css.UserHeroBrightnessHover}
+        style={heroMenuItemStyle(
+          cardColor && chipSurfaceStyle ? chipSurfaceStyle : {},
+          chipHoverBrightness
+        )}
       >
         <Text size="B300" truncate>
           {tag.name}

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

@@ -20,6 +20,7 @@ import {
   Text,
   toRem,
 } from 'folds';
+import type { CSSProperties } from 'react';
 import type { MouseEventHandler } from 'react';
 import { useCallback, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
@@ -45,6 +46,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 { heroMenuItemStyle } from './heroMenuItemStyle';
 import * as css from './styles.css';
 
 type SelfDemoteAlertProps = {
@@ -149,17 +151,22 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
 
 export function PowerChip({
   userId,
-  backgroundColor,
   innerColor,
   cardColor,
   textColor,
+  chipSurfaceStyle,
+  chipFillColor,
+  chipHoverBrightness,
 }: {
   userId: string;
-  backgroundColor?: string;
   innerColor?: string;
   cardColor?: string;
   textColor?: string;
+  chipSurfaceStyle?: CSSProperties;
+  chipFillColor?: string;
+  chipHoverBrightness?: number;
 }) {
+  const menuItemBg = chipFillColor ?? cardColor;
   const mx = useMatrixClient();
   const room = useRoom();
   const space = useSpaceOptionally();
@@ -288,7 +295,10 @@ export function PowerChip({
                       aria-disabled={changing || !canChangePowers || !canAssignPower}
                       aria-pressed={selected}
                       className={css.UserHeroMenuItem}
-                      style={{ backgroundColor: cardColor, color: textColor }}
+                      style={heroMenuItemStyle(
+                        { backgroundColor: menuItemBg, color: textColor },
+                        chipHoverBrightness
+                      )}
                       before={<PowerColorBadge color={powerTag.color} />}
                       after={
                         powerTagIconSrc ? (
@@ -314,7 +324,10 @@ export function PowerChip({
                   size="300"
                   radii="300"
                   className={css.UserHeroMenuItem}
-                  style={{ backgroundColor: cardColor, color: textColor }}
+                  style={heroMenuItemStyle(
+                    { backgroundColor: menuItemBg, color: textColor },
+                    chipHoverBrightness
+                  )}
                   onClick={() => {
                     if (room.isSpaceRoom()) {
                       openSpaceSettings(
@@ -340,14 +353,19 @@ export function PowerChip({
         }
       >
         <Chip
-          variant={error ? 'Critical' : undefined}
+          variant={error ? 'Critical' : cardColor ? undefined : 'SurfaceVariant'}
           radii="Pill"
-          className={css.UserHeroChip}
-          style={{
-            backgroundColor: (!error && cardColor) || undefined,
-            borderColor: backgroundColor,
-            color: textColor,
-          }}
+          className={
+            error ? undefined : cardColor ? css.UserHeroChipThemed : css.UserHeroBrightnessHover
+          }
+          style={
+            error
+              ? undefined
+              : heroMenuItemStyle(
+                  cardColor && chipSurfaceStyle ? chipSurfaceStyle : {},
+                  chipHoverBrightness
+                )
+          }
           before={
             cords ? (
               <Icon size="50" src={Icons.ChevronBottom} />