From b07889badedb7b1389bfd5649e9267536fda7a91 Mon Sep 17 00:00:00 2001
From: Thomas Cherret <b00705488@essec.edu>
Date: Mon, 9 Dec 2024 21:22:25 +0100
Subject: [PATCH] fix: solve merge conflicts

---
 .../AddressBox/AddressBox.style.ts            | 103 ++++++++++++++++++
 .../ProfilePage/AddressBox/AddressBox.tsx     |   6 +-
 2 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ProfilePage/AddressBox/AddressBox.style.ts

diff --git a/src/components/ProfilePage/AddressBox/AddressBox.style.ts b/src/components/ProfilePage/AddressBox/AddressBox.style.ts
new file mode 100644
index 000000000..e2061dbe1
--- /dev/null
+++ b/src/components/ProfilePage/AddressBox/AddressBox.style.ts
@@ -0,0 +1,103 @@
+import type { BoxProps, IconButtonProps } from '@mui/material';
+import { Box, IconButton, alpha, styled } from '@mui/material';
+
+export interface AddressBoxContainerProps extends Omit<BoxProps, 'component'> {
+  imgUrl?: string;
+}
+
+export const AddressBoxContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'imgUrl',
+})<AddressBoxContainerProps>(({ theme, imgUrl }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: 24,
+  paddingTop: theme.spacing(3),
+  overflow: 'hidden',
+  position: 'relative',
+  paddingBottom: theme.spacing(1),
+  width: '100%',
+  minHeight: 200,
+  boxShadow: theme.palette.shadow.main,
+
+  ...(!imgUrl && {
+    background: `linear-gradient(to bottom, ${theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.accent1Alt.main} 50%, ${theme.palette.mode === 'light' ? theme.palette.grey[100] : 'transparent'} 50%)`,
+  }),
+
+  [theme.breakpoints.up('sm')]: {
+    minHeight: 256,
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+
+  '&:before': {
+    ...(imgUrl && { content: '" "' }),
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: '50%',
+    filter: 'blur(6px)',
+    background: `url(${imgUrl})`,
+    backgroundPosition: 'top',
+    backgroundSize: 'cover',
+  },
+  '&:after': {
+    ...(imgUrl && { content: '" "' }),
+    position: 'absolute',
+    left: 0,
+    top: '50%',
+    right: 0,
+    bottom: 0,
+    backgroundColor:
+      theme.palette.mode === 'light'
+        ? theme.palette.grey[100]
+        : alpha(theme.palette.grey[100], 0.08),
+  },
+}));
+
+export const ProfileIconButton = styled(IconButton)<IconButtonProps>(
+  ({ theme }) => ({
+    backgroundColor:
+      theme.palette.mode === 'light'
+        ? theme.palette.grey[200]
+        : alpha(theme.palette.grey[200], 0.08),
+    color:
+      theme.palette.mode === 'light'
+        ? theme.palette.black.main
+        : theme.palette.grey[100],
+    width: '32px',
+    height: '32px',
+    marginLeft: theme.spacing(1),
+  }),
+);
+
+export const AddressDisplayBox = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  marginTop: theme.spacing(1.5),
+  marginBottom: theme.spacing(1.5),
+  zIndex: 1,
+
+  [theme.breakpoints.up('sm')]: {
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    gap: theme.spacing(1),
+  },
+  [theme.breakpoints.up('md')]: {
+    flexWrap: 'nowrap',
+    gap: 0,
+  },
+}));
+
+export const PassImageBox = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  marginTop: theme.spacing(3),
+  [theme.breakpoints.down('sm')]: {
+    marginTop: 8,
+    '& > img': {
+      width: 84,
+      height: 84,
+    },
+  },
+}));
diff --git a/src/components/ProfilePage/AddressBox/AddressBox.tsx b/src/components/ProfilePage/AddressBox/AddressBox.tsx
index b54fd1300..012b0fef6 100644
--- a/src/components/ProfilePage/AddressBox/AddressBox.tsx
+++ b/src/components/ProfilePage/AddressBox/AddressBox.tsx
@@ -17,7 +17,9 @@ import { useWalletAddressImg } from '@/hooks/useAddressImg';
 import {
   AddressBoxContainer,
   PassImageBox,
+  ProfileIconButton,
 } from '../AddressCard/AddressCard.style';
+import { AddressDisplayBox } from './AddressBox.style';
 
 interface AddressBoxProps {
   address: string;
@@ -44,7 +46,7 @@ export const AddressBox = ({ address }: AddressBoxProps) => {
   };
 
   return (
-    <AddressBoxContainer imgUrl={imgLink}>
+    <AddressBoxContainer>
       <PassImageBox>
         <Image
           alt={`${address} wallet Icon`}
@@ -67,7 +69,7 @@ export const AddressBox = ({ address }: AddressBoxProps) => {
           }}
         />
       </PassImageBox>
-      <AddressDisplayBo>
+      <AddressDisplayBox>
         <NoSelectTypography
           fontWeight={700}
           fontSize={20}