eduvia/workavia-calendar-front
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI/update global UI (#459)

Browse Source 
* Update loading screen to use Lottie animation

- Replace simple logo with Lottie animation from loadercalendar.lottie
- Center animation on screen with full viewport coverage
- Set animation width to 175px
- Install @lottiefiles/dotlottie-react package

* update spacing event modal

* add twake workplace logo to loading screen

* update spacing create calendar modal

* fix evenchip description color

* using variant instead of sx
This commit is contained in:
lenhanphung
2026-01-20 15:14:03 +07:00
committed by GitHub
parent 00c3c0d6f0
commit aeb8670895
21 changed files with 326 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Calendar/SettingsTab.tsx
+64 -47
View File
@@ -49,62 +49,79 @@ export function SettingsTab({
}, [description]);
return (
<Box mt={2}>
<TextField
fullWidth
label=""
inputProps={{ "aria-label": t("common.name") }}
placeholder={t("common.name")}
value={name}
onChange={(e) => setName(e.target.value)}
size="small"
margin="dense"
/>
<AddDescButton
showDescription={toggleDesc}
setShowDescription={setToggleDesc}
showMore={false}
description={description}
setDescription={setDescription}
buttonVariant="contained"
buttonColor="secondary"
/>
<Box mt={2}>
<Typography variant="body2" gutterBottom>
{t("calendar.color")}
</Typography>
<ColorPicker
onChange={(color) => setColor(color)}
selectedColor={color}
<>
{/* Form group 1: Name field - first group, margin top 0 */}
<Box mt={0}>
<TextField
fullWidth
label=""
inputProps={{ "aria-label": t("common.name") }}
placeholder={t("common.name")}
value={name}
onChange={(e) => setName(e.target.value)}
size="small"
sx={{
"&.MuiFormControl-root": {
marginTop: 0,
marginBottom: 0,
},
}}
/>
</Box>
{/* Form group 2: Description */}
<Box mt={2}>
<AddDescButton
showDescription={toggleDesc}
setShowDescription={setToggleDesc}
showMore={false}
description={description}
setDescription={setDescription}
buttonVariant="contained"
buttonColor="secondary"
/>
</Box>
{/* Form group 3: Color */}
<Box mt={2}>
<Typography variant="h6" sx={{ margin: 0 }}>
{t("calendar.color")}
</Typography>
<Box sx={{ marginTop: "6px" }}>
<ColorPicker
onChange={(color) => setColor(color)}
selectedColor={color}
/>
</Box>
</Box>
{/* Form group 4: New events visibility */}
{isOwn && (
<Box mt={2}>
<Typography variant="body2" gutterBottom>
<Typography variant="h6" sx={{ margin: 0 }}>
{t("calendar.newEventsVisibility")}
</Typography>
<ToggleButtonGroup
value={visibility}
exclusive
onChange={(e, val) => val && setVisibility(val)}
size="medium"
sx={{ borderRadius: "12px" }}
>
<ToggleButton value="public" sx={{ width: "140px" }}>
<PublicIcon fontSize="small" sx={{ mr: 1 }} />
{t("common.all")}
</ToggleButton>
<Box sx={{ marginTop: "6px" }}>
<ToggleButtonGroup
value={visibility}
exclusive
onChange={(e, val) => val && setVisibility(val)}
size="medium"
sx={{ borderRadius: "12px" }}
>
<ToggleButton value="public" sx={{ width: "140px" }}>
<PublicIcon fontSize="small" sx={{ mr: 1 }} />
{t("common.all")}
</ToggleButton>
<ToggleButton value="private" sx={{ width: "140px" }}>
<LockOutlineIcon fontSize="small" sx={{ mr: 1 }} />
{t("common.you")}
</ToggleButton>
</ToggleButtonGroup>
<ToggleButton value="private" sx={{ width: "140px" }}>
<LockOutlineIcon fontSize="small" sx={{ mr: 1 }} />
{t("common.you")}
</ToggleButton>
</ToggleButtonGroup>
</Box>
</Box>
)}
</Box>
</>
);
}