Enhance UI: #355 Remove labels, update buttons, icons, and styles (#356)

Co-authored-by: Lê Nhân Phụng <lenhanphung@Phung-Mac-M4.local>

src/components/Event/AddDescButton.tsx

@@ -43,7 +43,8 @@ export function AddDescButton({
         >
           <TextField
             fullWidth
-            label={!showMore ? t("event.form.description") : ""}
+            label=""
+            inputProps={{ "aria-label": t("event.form.description") }}
             placeholder={t("event.form.descriptionPlaceholder")}
             value={description}
             onChange={(e) => setDescription(e.target.value)}

src/components/Event/EventFormFields.tsx

@@ -414,7 +414,8 @@ export default function EventFormFields({
       <FieldWithLabel label={t("event.form.title")} isExpanded={showMore}>
         <TextField
           fullWidth
-          label={!showMore ? t("event.form.title") : ""}
+          label=""
+          inputProps={{ "aria-label": t("event.form.title") }}
           placeholder={t("event.form.titlePlaceholder")}
           value={title}
           onChange={(e) => {
@@ -500,7 +501,7 @@ export default function EventFormFields({
             getTimezoneOffset={(tzName: string) =>
               timezoneList.getTimezoneOffset(tzName, new Date(start))
             }
-            showIcon={true}
+            showIcon={false}
             width={240}
             size="small"
             placeholder={t("event.form.timezonePlaceholder")}
@@ -584,7 +585,8 @@ export default function EventFormFields({
       <FieldWithLabel label={t("event.form.location")} isExpanded={showMore}>
         <TextField
           fullWidth
-          label={!showMore ? t("event.form.location") : ""}
+          label=""
+          inputProps={{ "aria-label": t("event.form.location") }}
           placeholder={t("event.form.locationPlaceholder")}
           value={location}
           onChange={(e) => setLocation(e.target.value)}
@@ -595,15 +597,10 @@ export default function EventFormFields({
 
       <FieldWithLabel label={t("event.form.calendar")} isExpanded={showMore}>
         <FormControl fullWidth margin="dense" size="small">
-          {!showMore && (
-            <InputLabel id="calendar-select-label">
-              {t("event.form.calendar")}
-            </InputLabel>
-          )}
           <Select
-            labelId="calendar-select-label"
             value={calendarid ?? ""}
-            label={!showMore ? t("event.form.calendar") : ""}
+            label=""
+            SelectDisplayProps={{ "aria-label": t("event.form.calendar") }}
             displayEmpty
             onChange={(e: SelectChangeEvent) =>
               handleCalendarChange(e.target.value)

src/components/Event/components/FieldWithLabel.tsx

@@ -20,7 +20,7 @@ export const FieldWithLabel = React.memo(
       return (
         <Box>
           <Typography
-            component="label"
+            component="div"
             sx={{
               display: "block",
               marginBottom: "4px",
@@ -39,7 +39,7 @@ export const FieldWithLabel = React.memo(
     return (
       <Box display="flex" alignItems="center">
         <Typography
-          component="label"
+          component="div"
           sx={{
             minWidth: "115px",
             marginRight: "12px",