refresh profile section design

packages/design-system/src/theme/colors.ts

@@ -5,6 +5,7 @@ type ColorHues = typeof baseTheme.colors.red;
 export type MetaColors = ChakraTheme['colors'] & {
   offwhite: string;
   blue20: string;
+  blueProfileSection: string;
   dark: string;
   purpleBoxDark: string;
   purpleBoxLight: string;
@@ -21,6 +22,7 @@ export type MetaColors = ChakraTheme['colors'] & {
   discordDark: string;
   bronze: string;
   purple80: string;
+  purpleProfileSection: string;
   brightIdOrange: ColorHues;
   borderPurple: string;
 };
@@ -34,7 +36,9 @@ export const colors: MetaColors = {
   bronze: '#a97142',
   offwhite: '#F6F8F9',
   blue20: 'rgba(79, 105, 205, 0.2)',
+  blueProfileSection: 'rgba(42, 31, 71, 0.9)',
   purple80: 'rgba(70, 20, 100, 0.8)',
+  purpleProfileSection: 'rgba(27, 13, 42, 0.9)',
   dark: '#1B0D2A',
   purpleBoxDark: '#261943',
   purpleBoxLight: '#392373',

packages/web/components/ProfileSection.tsx

@@ -20,7 +20,7 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
 }) => (
   <Box minW="72">
     {title ? (
-      <Box bg="purple80" borderTopRadius="lg" p={4}>
+      <Box bg="purpleProfileSection" borderTopRadius="lg" p={4}>
         <HStack height={5}>
           <Text
             fontFamily="mono"
@@ -30,7 +30,7 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
             as="div"
             mr="auto"
           >
-            {title}
+            {title.toUpperCase()}
           </Text>
           {displayEditButton ? (
             <IconButton
@@ -55,7 +55,7 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
       </Box>
     ) : null}
     <Box
-      bg="whiteAlpha.200"
+      bg="blueProfileSection"
       borderBottomRadius="lg"
       borderTopRadius={!title ? 'lg' : 0}
       p={6}