UI/update global UI (#459)

* 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

src/components/Event/AddDescButton.tsx

@@ -32,7 +32,7 @@ export function AddDescButton({
     <>
       {!showDescription && (
         <FieldWithLabel label=" " isExpanded={showMore}>
-          <Box display="flex" gap={1} mb={1}>
+          <Box display="flex" gap={1}>
             <Button
               startIcon={<DescriptionIcon />}
               onClick={() => setShowDescription(true)}

src/components/Event/EventChip/EventChip.tsx

@@ -245,6 +245,7 @@ export function EventChip({
                       whiteSpace: "normal",
                       flex: 1,
                       maxWidth: "75%",
+                      color: titleStyle.color,
                     }}
                   >
                     {event._def.extendedProps.description}

src/components/Event/EventFormFields.tsx

@@ -13,6 +13,7 @@ import {
   TextField,
   ToggleButtonGroup,
   ToggleButton,
+  Typography,
 } from "@linagora/twake-mui";
 import {
   Description as DescriptionIcon,
@@ -481,7 +482,9 @@ export default function EventFormFields({
             control={
               <Checkbox checked={allday} onChange={handleAllDayToggle} />
             }
-            label={t("event.form.allDay")}
+            label={
+              <Typography variant="h6">{t("event.form.allDay")}</Typography>
+            }
           />
           <FormControlLabel
             control={
@@ -513,7 +516,9 @@ export default function EventFormFields({
                 }}
               />
             }
-            label={t("event.form.repeat")}
+            label={
+              <Typography variant="h6">{t("event.form.repeat")}</Typography>
+            }
           />
           <TimezoneAutocomplete
             value={timezone}

src/components/Event/EventRepeat.tsx

@@ -80,7 +80,7 @@ export default function RepeatEvent({
       <Stack>
         {/* Interval */}
         <Box display="flex" alignItems="center" gap={2} mb={2}>
-          <Typography>{t("event.repeat.repeatEvery")}</Typography>
+          <Typography variant="h6">{t("event.repeat.repeatEvery")}</Typography>
           <TextField
             type="number"
             value={repetition.interval ?? 1}
@@ -161,7 +161,7 @@ export default function RepeatEvent({
 
         {/* End options */}
         <Box>
-          <Typography variant="body2" gutterBottom>
+          <Typography variant="h6" gutterBottom>
             {t("event.repeat.end.label")}
           </Typography>
           <RadioGroup
@@ -193,7 +193,11 @@ export default function RepeatEvent({
               disabled={!isOwn}
               value="never"
               control={<Radio />}
-              label={t("event.repeat.end.never")}
+              label={
+                <Typography variant="h6">
+                  {t("event.repeat.end.never")}
+                </Typography>
+              }
             />
 
             <FormControlLabel
@@ -202,7 +206,9 @@ export default function RepeatEvent({
               control={<Radio />}
               label={
                 <Box display="flex" alignItems="center" gap={1}>
-                  {t("event.repeat.end.after")}
+                  <Typography variant="h6">
+                    {t("event.repeat.end.after")}
+                  </Typography>
                   <TextField
                     type="number"
                     size="small"
@@ -218,7 +224,9 @@ export default function RepeatEvent({
                     inputProps={{ min: 1, "data-testid": "occurrences-input" }}
                     disabled={!isOwn || endOption !== "after"}
                   />
-                  {t("event.repeat.end.occurrences")}
+                  <Typography variant="h6">
+                    {t("event.repeat.end.occurrences")}
+                  </Typography>
                 </Box>
               }
             />
@@ -229,7 +237,9 @@ export default function RepeatEvent({
               control={<Radio />}
               label={
                 <Box display="flex" alignItems="center" gap={1}>
-                  {t("event.repeat.end.on")}
+                  <Typography variant="h6">
+                    {t("event.repeat.end.on")}
+                  </Typography>
                   <TextField
                     type="date"
                     inputProps={{ "data-testid": "end-date" }}

src/components/Event/components/DateTimeFields.tsx

@@ -342,6 +342,9 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
       <Box
         display="flex"
         flexDirection="column"
+        className={`date-time-group ${
+          isExpanded || shouldShowFullFieldsInNormal ? "show-full-field" : ""
+        }`.trim()}
         sx={{ maxWidth: showMore ? "calc(100% - 145px)" : "100%" }}
       >
         {isExpanded || shouldShowFullFieldsInNormal ? (

src/components/Event/components/FieldWithLabel.tsx

@@ -19,19 +19,52 @@ export const FieldWithLabel = React.memo(
   }) => {
     if (!isExpanded) {
       // Normal mode: label on top
+      const isEmptyLabel =
+        label === null ||
+        label === undefined ||
+        (typeof label === "string" && label.trim() === "");
+
       return (
-        <Box sx={sx}>
-          <Typography
-            component="div"
-            sx={{
-              display: "block",
-              marginBottom: "4px",
-              fontSize: "0.875rem",
-              fontWeight: 500,
-            }}
-          >
-            {label}
-          </Typography>
+        <Box
+          sx={[
+            {
+              "& > *:not(:first-of-type)": {
+                marginTop: isEmptyLabel ? 0 : "6px",
+              },
+              // Only apply margin to direct child MuiTextField-root
+              "& > .MuiFormControl-root": {
+                marginTop: "6px",
+                marginBottom: 0,
+              },
+              "& > .MuiTextField-root": {
+                marginTop: "6px",
+                marginBottom: 0,
+              },
+              // Reset margin for nested MuiTextField-root
+              "& .MuiFormControl-root .MuiTextField-root": {
+                marginTop: 0,
+                marginBottom: 0,
+              },
+              "& .MuiTextField-root .MuiTextField-root": {
+                marginTop: 0,
+                marginBottom: 0,
+              },
+              // Reset margin for nested Box children (DateTimeFields structure)
+              "& > .MuiBox-root > .MuiBox-root": {
+                marginTop: 0,
+              },
+              "& > .MuiBox-root > .MuiBox-root > .MuiBox-root": {
+                marginTop: 0,
+              },
+            },
+            ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
+          ]}
+        >
+          {!isEmptyLabel && (
+            <Typography component="div" variant="h6" sx={{ display: "block" }}>
+              {label}
+            </Typography>
+          )}
           {children}
         </Box>
       );
@@ -42,17 +75,35 @@ export const FieldWithLabel = React.memo(
       <Box display="flex" alignItems="center" sx={sx}>
         <Typography
           component="div"
+          variant="h6"
           sx={{
             minWidth: "115px",
             marginRight: "12px",
             flexShrink: 0,
-            fontSize: "0.875rem",
-            fontWeight: 500,
           }}
         >
           {label}
         </Typography>
-        <Box flexGrow={1}>{children}</Box>
+        <Box
+          flexGrow={1}
+          sx={{
+            // Set margin-top: 8px for second row in DateTimeFields (4 fields layout)
+            "& > .MuiBox-root > .MuiBox-root:nth-of-type(2)": {
+              marginTop: "8px",
+            },
+            // Remove margin from MuiFormControl-root MuiFormControl-marginDense in extended mode
+            "& .MuiFormControl-root.MuiFormControl-marginDense": {
+              marginTop: 0,
+              marginBottom: 0,
+            },
+            "& .MuiTextField-root.MuiFormControl-marginDense": {
+              marginTop: 0,
+              marginBottom: 0,
+            },
+          }}
+        >
+          {children}
+        </Box>
       </Box>
     );
   }