feat: add dynamic borderRadius and rainbow effect with NeonPaper

- **NeonPaperContainer.tsx**:
  - Added `borderRadius` prop to NeonPaperContainer, enabling customizable border radius with a default fallback value.
- **account-popover.tsx**:
  - Integrated NeonPaper with a dynamic rainbow gradient effect around the user avatar when `metadataIsPending` is true.
  - Enhanced layout styling by aligning elements vertically in the Box component.

src/layouts/_common/account-popover.tsx

@@ -30,6 +30,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import {closeLoginModal, openLoginModal, setAuthLoading, setBalance, setSession} from '@redux/auth';
 import { CircularProgress } from '@mui/material';
 import { useWeb3Auth } from '@src/hooks/use-web3-auth.ts';
+import NeonPaper from "@src/sections/publication/NeonPaperContainer.tsx";
 
 // ----------------------------------------------------------------------
 
@@ -99,10 +100,26 @@ export default function AccountPopover() {
     return <CircularProgress size={24} sx={{ color: '#fff' }} />;
   }
 
+  const metadataIsPending = true;
+
+  const EffectPaper = metadataIsPending ? NeonPaper : Box;
+  // Generate an array of colors with rainbow pattern, add 50% opacity to each color
+
+  const rainbowColors = [
+    "rgba(255, 0, 0, 0.5)",    // Red
+    "rgba(255, 127, 0, 0.5)",  // Orange
+    "rgba(255, 255, 0, 0.5)",  // Yellow
+    "rgba(0, 255, 0, 0.5)",    // Green
+    "rgba(0, 0, 255, 0.5)",    // Blue
+    "rgba(75, 0, 130, 0.5)",   // Indigo
+    "rgba(143, 0, 255, 0.5)"   // Violet
+  ];
+
   return (
     <>
-      <Box sx={{ display: 'flex' }} onClick={popover.onOpen}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }} onClick={popover.onOpen}>
         {sessionData?.authenticated ? (
+          <EffectPaper colors={rainbowColors} padding={'0'} borderRadius={'999999px'}>
           <IconButton
             component={m.button}
             whileTap="tap"
@@ -131,6 +148,7 @@ export default function AccountPopover() {
               }}
             />
           </IconButton>
+          </EffectPaper>
         ) : (
           <></>
         )}

src/sections/publication/NeonPaperContainer.tsx

@@ -10,15 +10,16 @@ interface NeonPaperProps {
   colors?: string[];
   animationSpeed?: string;
   padding?: string;
+  borderRadius?: string;
   sx?: SxProps<Theme>;
 }
 
 const NeonPaperContainer = styled(Paper, {
   shouldForwardProp: (prop) => prop !== 'colors' && prop !== 'animationSpeed',
-})<PaperProps & {colors?: string[], animationSpeed?: string, padding?: string} >(({ colors, animationSpeed, padding }) => ({
+})<PaperProps & {colors?: string[], animationSpeed?: string, padding?: string, borderRadius?: string} >(({ colors, animationSpeed, padding, borderRadius }) => ({
   '--gradient-pos-x': '50%',
   '--gradient-pos-y': '50%',
-  '--border-radius': '10px',
+  '--border-radius': `${borderRadius || '10px'}`,
   '--border-gap': '1px',
   width: '100%',
   position: 'relative',
@@ -66,13 +67,14 @@ ${colors?.join(', ') || '#1e87ff, #5c13c4, #ff0033, #ffda00, #64bc26, #1e87ff'}
   },
 }));
 
-const NeonPaper: FC<NeonPaperProps> = ({ children, colors, animationSpeed, padding='0.7rem' }) => {
+const NeonPaper: FC<NeonPaperProps> = ({ children, colors, animationSpeed, padding='0.7rem', borderRadius='10px' }) => {
   return (
     <NeonPaperContainer
       elevation={3}
       colors={colors}
       animationSpeed={animationSpeed}
       padding={padding}
+      borderRadius={borderRadius}
     >
       <div className="neon">
         <div className="gradient"></div>