change profile button

icons/profile.svg

+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.593A8.407 8.407 0 0 0 3.332 15.12c1.465-2.162 3.89-3.556 6.668-3.556 2.784 0 5.2 1.461 6.66 3.567A8.407 8.407 0 0 0 10 1.593ZM0 10C0 4.477 4.477 0 10 0s10 4.477 10 10-4.477 10-10 10S0 15.523 0 10Zm4.476 6.287c1.443 1.295 3.412 2.039 5.524 2.039a8.529 8.529 0 0 0 5.51-2.045c-1.17-1.85-3.2-3.123-5.51-3.123-2.333 0-4.363 1.225-5.524 3.129Zm3.388-8.975a2.136 2.136 0 1 1 4.272 0 2.136 2.136 0 0 1-4.272 0ZM10 3.584a3.729 3.729 0 1 0 0 7.457 3.729 3.729 0 0 0 0-7.457Z" fill="currentColor"/>
+</svg>

ui/pages/Home.tsx

@@ -22,7 +22,7 @@ const Home = () => {
         minW={{ base: 'unset', lg: '900px' }}
         data-label="hero plate"
       >
-        <Flex mb={{ base: 6, lg: 8 }} justifyContent="space-between">
+        <Flex mb={{ base: 6, lg: 8 }} justifyContent="space-between" alignItems="center">
           <Heading
             as="h1"
             size={{ base: 'md', lg: 'xl' }}
@@ -33,7 +33,7 @@ const Home = () => {
             Welcome to { config.chain.name } explorer
           </Heading>
           <Box display={{ base: 'none', lg: 'block' }}>
-            { config.features.account.isEnabled && <ProfileMenuDesktop/> }
+            { config.features.account.isEnabled && <ProfileMenuDesktop isHomePage/> }
           </Box>
         </Flex>
         <LightMode>

ui/shared/UserAvatar.tsx

-import { SkeletonCircle, Image } from '@chakra-ui/react';
+import { SkeletonCircle, Image, Icon } from '@chakra-ui/react';
 import React from 'react';
 
+import profileIcon from 'icons/profile.svg';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
-import IdenticonGithub from 'ui/shared/IdenticonGithub';
 
 interface Props {
   size: number;
@@ -34,7 +34,7 @@ const UserAvatar = ({ size }: Props) => {
       boxSize={ `${ size }px` }
       borderRadius="full"
       overflow="hidden"
-      fallback={ isImageLoadError || !data?.avatar ? <IdenticonGithub size={ size } seed={ data?.email || 'randomness' } flexShrink={ 0 }/> : undefined }
+      fallback={ isImageLoadError || !data?.avatar ? <Icon as={ profileIcon } boxSize={ 5 }/> : undefined }
       onError={ handleImageLoadError }
     />
   );

ui/snippets/profileMenu/ProfileMenuDesktop.tsx

-import type { ButtonProps } from '@chakra-ui/react';
-import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button } from '@chakra-ui/react';
+import type { IconButtonProps } from '@chakra-ui/react';
+import { Popover, PopoverContent, PopoverBody, PopoverTrigger, IconButton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
@@ -8,7 +8,11 @@ import * as mixpanel from 'lib/mixpanel/index';
 import UserAvatar from 'ui/shared/UserAvatar';
 import ProfileMenuContent from 'ui/snippets/profileMenu/ProfileMenuContent';
 
-const ProfileMenuDesktop = () => {
+type Props = {
+  isHomePage?: boolean;
+};
+
+const ProfileMenuDesktop = ({ isHomePage }: Props) => {
   const { data, error, isLoading } = useFetchProfileInfo();
   const loginUrl = useLoginUrl();
   const [ hasMenu, setHasMenu ] = React.useState(false);
@@ -27,7 +31,7 @@ const ProfileMenuDesktop = () => {
     );
   }, []);
 
-  const buttonProps: Partial<ButtonProps> = (() => {
+  const iconButtonProps: Partial<IconButtonProps> = (() => {
     if (hasMenu || !loginUrl) {
       return {};
     }
@@ -39,18 +43,45 @@ const ProfileMenuDesktop = () => {
     };
   })();
 
+  const variant = React.useMemo(() => {
+    if (data?.avatar) {
+      return 'subtle';
+    }
+    return isHomePage ? 'solid' : 'outline';
+  }, [ data?.avatar, isHomePage ]);
+
+  let iconButtonStyles: Partial<IconButtonProps> = {};
+  const themedBackground = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const themedBorderColor = useColorModeValue('gray.300', 'gray.700');
+  const themedColor = useColorModeValue('blackAlpha.800', 'gray.400');
+  if (data?.avatar) {
+    iconButtonStyles = {
+      bg: isHomePage ? '#EBF8FF' : themedBackground,
+    };
+  } else if (isHomePage) {
+    iconButtonStyles = {
+      color: '#fff',
+    };
+  } else {
+    iconButtonStyles = {
+      borderColor: themedBorderColor,
+      color: themedColor,
+    };
+  }
+
   return (
     <Popover openDelay={ 300 } placement="bottom-end" gutter={ 10 } isLazy>
       <PopoverTrigger>
-        <Button
-          variant="unstyled"
-          display="block"
-          boxSize="50px"
+        <IconButton
+          aria-label="profile menu"
+          icon={ <UserAvatar size={ 20 }/> }
+          variant={ variant }
+          colorScheme="blue"
+          boxSize="40px"
           flexShrink={ 0 }
-          { ...buttonProps }
-        >
-          <UserAvatar size={ 50 }/>
-        </Button>
+          { ...iconButtonProps }
+          { ...iconButtonStyles }
+        />
       </PopoverTrigger>
       { hasMenu && (
         <PopoverContent w="212px">

ui/snippets/profileMenu/ProfileMenuMobile.tsx

-import { Box, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, Button } from '@chakra-ui/react';
-import type { ButtonProps } from '@chakra-ui/react';
+import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton, useColorModeValue } from '@chakra-ui/react';
+import type { IconButtonProps } from '@chakra-ui/react';
 import React from 'react';
 
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
@@ -29,7 +29,7 @@ const ProfileMenuMobile = () => {
     }
   }, [ data, error?.status, isLoading ]);
 
-  const buttonProps: Partial<ButtonProps> = (() => {
+  const iconButtonProps: Partial<IconButtonProps> = (() => {
     if (hasMenu || !loginUrl) {
       return {};
     }
@@ -41,19 +41,25 @@ const ProfileMenuMobile = () => {
     };
   })();
 
+  const themedBackground = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
+  const themedBorderColor = useColorModeValue('gray.300', 'gray.700');
+  const themedColor = useColorModeValue('blackAlpha.800', 'gray.400');
+
   return (
     <>
-      <Box padding={ 2 } onClick={ hasMenu ? onOpen : undefined }>
-        <Button
-          variant="unstyled"
-          display="block"
-          boxSize="24px"
-          flexShrink={ 0 }
-          { ...buttonProps }
-        >
-          <UserAvatar size={ 24 }/>
-        </Button>
-      </Box>
+      <IconButton
+        aria-label="profile menu"
+        icon={ <UserAvatar size={ 20 }/> }
+        variant={ data?.avatar ? 'subtle' : 'outline' }
+        colorScheme="gray"
+        boxSize="40px"
+        flexShrink={ 0 }
+        bg={ data?.avatar ? themedBackground : undefined }
+        color={ themedColor }
+        borderColor={ !data?.avatar ? themedBorderColor : undefined }
+        onClick={ hasMenu ? onOpen : undefined }
+        { ...iconButtonProps }
+      />
       { hasMenu && (
         <Drawer
           isOpen={ isOpen }