Skip to content

Commit 4a1f321

Browse files
Nick-1979Nick-1979
committed
style: adjust portfolio bg effect
1 parent 811769a commit 4a1f321

File tree

1 file changed

+115
-83
lines changed

1 file changed

+115
-83
lines changed

‎packages/extension-polkagate/src/popup/home/YouHave.tsx

Lines changed: 115 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,33 @@ export default function YouHave (): React.ReactElement {
3232
const youHave = useYouHave();
3333
const currency = useCurrency();
3434

35-
const isDark = theme.palette.mode === 'dark';
35+
const shadow = theme.palette.mode === 'dark'
36+
? '0px 0px 5px 2px rgba(255, 255, 255, 0.1)'
37+
: '0px 0px 10px rgba(0, 0, 0, 0.10)';
38+
39+
const youHaveStyle = {
40+
'&::before': {
41+
background: 'linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), transparent)',
42+
content: '""',
43+
height: '100%',
44+
left: '-50%',
45+
pointerEvents: 'none',
46+
position: 'absolute',
47+
top: '-50%',
48+
transform: 'rotate(12deg)',
49+
width: '100%'
50+
},
51+
bgcolor: 'divider',
52+
border: '1px solid',
53+
borderColor: 'divider',
54+
borderRadius: '10px',
55+
boxShadow: shadow,
56+
m: '20px 4% 10px',
57+
minHeight: '125px',
58+
overflow: 'hidden',
59+
position: 'relative',
60+
width: '100%'
61+
};
3662

3763
const { isHideNumbers, toggleHideNumbers } = useIsHideNumbers();
3864
const [isMenuOpen, setOpenMenu] = useState(false);
@@ -52,98 +78,104 @@ export default function YouHave (): React.ReactElement {
5278
}, []);
5379

5480
return (
55-
<Grid alignItems='flex-start' container sx={{ bgcolor: 'background.paper', borderRadius: '10px', minHeight: '125px', m: '20px 4% 10px', width: '100%', boxShadow: isDark ? '3px 2px 15px rgba(255, 255, 255, 0.25)' : '2px 3px 4px 2px rgba(0, 0, 0, 0.10)' }}>
56-
<Grid container sx={{ position: 'relative', px: '10px', py: '5px' }}>
57-
<Grid container item sx={{ textAlign: 'left' }}>
58-
<Typography sx={{ fontSize: '16px', fontVariant: 'small-caps', fontWeight: 400, mt: '10px' }}>
59-
{t('My Portfolio')}
60-
</Typography>
61-
</Grid>
62-
<Grid container item justifyContent='flex-start' pt='15px'>
63-
{isHideNumbers
64-
? <Box
65-
component='img'
66-
src={(theme.palette.mode === 'dark' ? stars5White : stars5Black) as string}
67-
sx={{ height: '20px', width: '130px' }}
68-
/>
69-
: <>
70-
<Stack alignItems='center' direction='row' justifyContent='space-between' sx={{ flexWrap: 'wrap', mr: '15px', textAlign: 'start', width: '100%' }}>
71-
<Stack alignItems='flex-start' direction='row' sx= {{ ml: '-5px' }}>
72-
<Currency
73-
color='secondary.light'
74-
dialogLeft ={64}
75-
fontSize='25px'
76-
height='27px'
77-
minWidth='27px'
78-
/>
81+
<>
82+
<Grid
83+
alignItems='flex-start' container sx={{ ...youHaveStyle }}
84+
>
85+
<Grid container sx={{ position: 'relative', px: '10px', py: '5px' }}>
86+
<Grid container item sx={{ textAlign: 'left' }}>
87+
<Typography sx={{ fontSize: '16px', fontVariant: 'small-caps', fontWeight: 400, mt: '10px', lineHeight: 'normal' }}>
88+
{t('My Portfolio')}
89+
</Typography>
90+
</Grid>
91+
<Grid container item justifyContent='flex-start' pt='15px'>
92+
{isHideNumbers
93+
? <Box
94+
component='img'
95+
src={(theme.palette.mode === 'dark' ? stars5White : stars5Black) as string}
96+
sx={{ height: '20px', width: '130px' }}
97+
/>
98+
: <>
99+
<Stack alignItems='center' direction='row' justifyContent='space-between' sx={{ flexWrap: 'wrap', mr: '15px', textAlign: 'start', width: '100%' }}>
100+
<Stack alignItems='flex-start' direction='row' sx= {{ ml: '-5px' }}>
101+
<Currency
102+
color='secondary.light'
103+
dialogLeft ={64}
104+
fontSize='25px'
105+
height='27px'
106+
minWidth='27px'
107+
/>
108+
<Grid item sx={{ ml: '5px' }}>
109+
<FormatPrice
110+
fontSize='28px'
111+
fontWeight={500}
112+
num={youHave?.portfolio}
113+
sign= ' '
114+
skeletonHeight={28}
115+
textColor={isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'}
116+
width='100px'
117+
withCountUp
118+
withSmallDecimal
119+
/>
120+
</Grid>
121+
</Stack>
122+
<Typography sx={{ color: !youHave?.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.main' : 'warning.main', fontSize: '15px', fontWeight: 400 }}>
123+
<CountUp
124+
decimals={countDecimalPlaces(portfolioChange) || PORTFOLIO_CHANGE_DECIMAL}
125+
duration={1}
126+
end={portfolioChange}
127+
prefix={`${changeSign(youHave?.change)}${currency?.sign}`}
128+
suffix={`(${COIN_GECKO_PRICE_CHANGE_DURATION}h)`}
129+
/>
130+
</Typography>
131+
</Stack>
132+
<Stack alignItems='center' direction='row' spacing={1} sx={{ ml: '5px', mt: '5px', textAlign: 'start', width: '100%' }}>
79133
<FormatPrice
80-
fontSize='28px'
81-
fontWeight={500}
82-
num={youHave?.portfolio}
83-
sign= ' '
84-
skeletonHeight={28}
85-
textColor={isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'}
134+
fontSize='14px'
135+
fontWeight={400}
136+
num={youHave?.available}
137+
skeletonHeight={14}
138+
textColor={ 'primary.light' }
86139
width='100px'
87140
withCountUp
88-
withSmallDecimal
89141
/>
142+
<Typography sx={{ color: 'primary.light', fontSize: '14px', fontWeight: 400 }}>
143+
{t('available')}
144+
</Typography>
90145
</Stack>
91-
<Typography sx={{ color: !youHave?.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.main' : 'warning.main', fontSize: '15px', fontWeight: 400 }}>
92-
<CountUp
93-
decimals={countDecimalPlaces(portfolioChange) || PORTFOLIO_CHANGE_DECIMAL}
94-
duration={1}
95-
end={portfolioChange}
96-
prefix={`${changeSign(youHave?.change)}${currency?.sign}`}
97-
suffix={`(${COIN_GECKO_PRICE_CHANGE_DURATION}h)`}
98-
/>
99-
</Typography>
100-
</Stack>
101-
<Stack alignItems='center' direction='row' spacing={1} sx={{ ml: '5px', mt: '5px', textAlign: 'start', width: '100%' }}>
102-
<FormatPrice
103-
fontSize='14px'
104-
fontWeight={400}
105-
num={youHave?.available}
106-
skeletonHeight={14}
107-
textColor={ 'primary.light' }
108-
width='100px'
109-
withCountUp
110-
/>
111-
<Typography sx={{ color: 'primary.light', fontSize: '14px', fontWeight: 400 }}>
112-
{t('available')}
113-
</Typography>
114-
</Stack>
115-
</>
116-
}
117-
<Infotip2 text={t('Menu options')}>
118-
<IconButton
119-
onClick={onMenuClick}
120-
sx={{ p: 0, position: 'absolute', pt: '3px', right: '3px', top: '8px' }}
121-
>
122-
<MoreVertIcon sx={{ color: 'secondary.light', fontSize: '33px' }} />
123-
</IconButton>
124-
</Infotip2>
125-
</Grid>
126-
<Grid item sx={{ position: 'absolute', right: '30px', top: '5px' }}>
127-
<HideBalance
128-
darkColor={theme.palette.secondary.light}
129-
hide={isHideNumbers}
130-
lightColor={theme.palette.secondary.light}
131-
onClick={toggleHideNumbers}
132-
size={20}
133-
/>
146+
</>
147+
}
148+
<Infotip2 text={t('Menu options')}>
149+
<IconButton
150+
onClick={onMenuClick}
151+
sx={{ p: 0, position: 'absolute', pt: '3px', right: '3px', top: '8px' }}
152+
>
153+
<MoreVertIcon sx={{ color: 'secondary.light', fontSize: '33px' }} />
154+
</IconButton>
155+
</Infotip2>
156+
</Grid>
157+
<Grid item sx={{ position: 'absolute', right: '30px', top: '5px' }}>
158+
<HideBalance
159+
darkColor={theme.palette.secondary.light}
160+
hide={isHideNumbers}
161+
lightColor={theme.palette.secondary.light}
162+
onClick={toggleHideNumbers}
163+
size={20}
164+
/>
165+
</Grid>
134166
</Grid>
135-
</Grid>
167+
168+
</Grid> {isMenuOpen &&
169+
<Menu
170+
setShowMenu={setOpenMenu}
171+
/>
172+
}
136173
<Box
137174
alt={t('PolkaGate logo')}
138175
component='img'
139176
src={theme.palette.mode === 'dark' ? logoBlack as string : logoWhite as string}
140-
sx={{ filter: 'drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5))', height: 40, left: 'calc(50% - 20px)', position: 'absolute', top: '5px', width: 40 }}
177+
sx={{ filter: 'drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5))', height: 34, left: 'calc(50% - 17px)', position: 'absolute', top: '5px', width: 34 }}
141178
/>
142-
{isMenuOpen &&
143-
<Menu
144-
setShowMenu={setOpenMenu}
145-
/>
146-
}
147-
</Grid>
179+
</>
148180
);
149181
}

0 commit comments

Comments
 (0)