styling

1 files changed, 81 insertions, 38 deletions

diff --git a/src/App.jsx b/src/App.jsx
index 705587c..7fb1a6b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,12 @@
 import {useEffect, useState} from "react";
 import Entry from "./Entry.jsx";
 
-import {Button, Container, Typography} from "@mui/material";
+import {AppBar, Button, Container, Grid, Paper, Typography} from "@mui/material";
 import dayjs from "dayjs";
 import SalaryInput from "./SalaryInput.jsx";
 import Result from "./Result.jsx";
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
 
 
 function App() {
@@ -55,46 +57,87 @@ function App() {
         });
     }
 
+    // raimu kurang gawean
     return (
-        <Container>
-            <Typography variant='h3' align='center'>Overtime Calculator</Typography>
-            <Typography variant='overline' display='block' align='center'>🤑🤑 Sudahkah anda lembur hari ini?
-                🤑🤑</Typography>
-            <ul>
-                <li style={{listStyle: 'none', margin: '20px 0'}}>
-                    <SalaryInput handleBaseSalaryChange={handleBaseSalaryChange}/>
-                </li>
-                {listEntry.map((entry) => {
-                    return (
-                        <div key={entry.id} style={{display: 'flex', gap: '10px', marginBottom: '10px'}}>
-                            <li style={{listStyle: 'none'}} key={entry.id}>
-                                <Entry
-                                    propId={entry.id}
-                                    propDate={entry.date}
-                                    propStart={entry.start}
-                                    propFinish={entry.finish}
-                                    handleEntryChange={handleEntryChange}
-                                />
-                            </li>
-                            <Button
-                                disabled={removeDisabled}
-                                variant="outlined"
-                                onClick={() => removeFromList(entry.id)}
-                            >Hapus</Button>
-                            {
-                                entry.id === getLastId() ?
+        <>
+            <Container>
+                <AppBar position="sticky" sx={{padding: '10px 0'}}>
+                    <Typography
+                        variant='h4'
+                        sx={{
+                            ml: 5,
+                            display: { xs: 'none', md: 'flex' },
+                            letterSpacing: '.3rem',
+                            color: 'inherit',
+                            textDecoration: 'none',
+                        }}
+                    >Overtime Calculator</Typography>
+                </AppBar>
+                <Typography variant='overline' display='block' align='center'>🤑🤑 Sudahkah anda lembur hari ini?
+                    🤑🤑</Typography>
+                <Paper sx={{margin: '10px 0', padding: '20px'}}>
+                    <ul>
+                        <li style={{listStyle: 'none', margin: '20px 0'}}>
+                            <SalaryInput handleBaseSalaryChange={handleBaseSalaryChange}/>
+                        </li>
+                        {listEntry.map((entry) => {
+                            return (
+                                <div key={entry.id} style={{display: 'flex', gap: '10px', marginBottom: '10px'}}>
+                                    <li style={{listStyle: 'none'}} key={entry.id}>
+                                        <Entry
+                                            propId={entry.id}
+                                            propDate={entry.date}
+                                            propStart={entry.start}
+                                            propFinish={entry.finish}
+                                            handleEntryChange={handleEntryChange}
+                                        />
+                                    </li>
                                     <Button
+                                        disabled={removeDisabled}
                                         variant="outlined"
-                                        onClick={addToList}
-                                    >Tambah</Button>
-                                    : null
-                            }
-                        </div>
-                    )
-                })}
-            </ul>
-            <Result listEntry={listEntry} baseSalary={baseSalary}/>
-        </Container>
+                                        onClick={() => removeFromList(entry.id)}
+                                    ><RemoveCircleIcon /></Button>
+                                    {
+                                        entry.id === getLastId() ?
+                                            <Button
+                                                variant="outlined"
+                                                onClick={addToList}
+                                            ><AddCircleIcon /></Button>
+                                            : null
+                                    }
+                                </div>
+                            )
+                        })}
+                    </ul>
+                </Paper>
+                <Grid container columnSpacing='5px' sx={{mb: '20px'}}>
+                    <Grid item xs={6}>
+                        <Paper sx={{padding: '10px', minHeight: '100%'}}>
+                            <Result listEntry={listEntry} baseSalary={baseSalary}/>
+                        </Paper>
+                    </Grid>
+                    <Grid item xs={6}>
+                        <Paper sx={{padding: '10px', minHeight: '100%'}}>
+                            <Typography paragraph={true}>
+                                <ul>
+                                    <li>Disclaimer: keakuratan tidak terjamin</li>
+                                    <li>Sudah termasuk perhitungan lembur akhir pekan</li>
+                                    <li>Belum termasuk libur nasional (todo)</li>
+                                    <li>Belum termasuk versi 6 hari kerja (todo)</li>
+                                    <li>UI belum responsive (todo)</li>
+                                </ul>
+                            </Typography>
+                            <Typography paragraph={true} padding={'10px'} marginTop={'5px'}>
+                                <a href='https://gitlab.com/rosyidharyadi/overreact' target='_blank'>Source</a>
+                            </Typography>
+                            <Typography variant='overline' display='block' align='center' padding={'10px'} marginTop={'5px'}>
+                                Rosyid
+                            </Typography>
+                        </Paper>
+                    </Grid>
+                </Grid>
+            </Container>
+        </>
     )
 }