diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.jsx | 19 |
1 files changed, 16 insertions, 3 deletions
diff --git a/src/App.jsx b/src/App.jsx index aa1ae6d..300f1a0 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -20,6 +20,7 @@ function App() { ] ); const [removeDisabled, setRemoveDisabled] = useState(false); + const [elevatedId, setElevatedId] = useState(null); useEffect(() => { setRemoveDisabled(listEntry.length === 1); @@ -78,7 +79,11 @@ function App() { </AppBar> <Typography variant='overline' display='block' align='center'>🤑🤑 Sudahkah anda lembur hari ini? 🤑🤑</Typography> - <Paper sx={{margin: '10px 0', padding: '20px'}}> + <Paper id="entry-paper" sx={{margin: '10px 0', padding: '20px'}} + elevation={elevatedId === "entry-paper" ? 5 : 0} // gak penting + onMouseEnter={() => setElevatedId("entry-paper")} + onMouseLeave={() => setElevatedId(null) } + > <ul> <li style={{listStyle: 'none', margin: '20px 0'}}> <SalaryInput handleBaseSalaryChange={handleBaseSalaryChange}/> @@ -115,12 +120,20 @@ function App() { </Paper> <Grid container columnSpacing='5px' sx={{mb: '20px'}}> <Grid item xs={6}> - <Paper sx={{padding: '10px', minHeight: '100%'}}> + <Paper id="result-paper" sx={{padding: '10px', minHeight: '100%'}} + elevation={elevatedId === "result-paper" ? 5 : 0} + onMouseEnter={() => setElevatedId("result-paper")} + onMouseLeave={() => setElevatedId(null) } + > <Result listEntry={listEntry} baseSalary={baseSalary}/> </Paper> </Grid> <Grid item xs={6}> - <Paper sx={{padding: '10px', minHeight: '100%'}}> + <Paper id="about-paper" sx={{padding: '10px', minHeight: '100%'}} + elevation={elevatedId === "about-paper" ? 5 : 0} + onMouseEnter={() => setElevatedId("about-paper")} + onMouseLeave={() => setElevatedId(null) } + > <ul> <li><Typography>Disclaimer: keakuratan tidak terjamin</Typography></li> <li><Typography>Sudah termasuk perhitungan lembur akhir pekan</Typography></li> |