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/Attendees/PeopleSearch.tsx

@@ -141,46 +141,50 @@ export function PeopleSearch({
           onChange(event, mapped);
         }}
         renderInput={(params) => (
-          <TextField
+          <>
-            {...params}
+            <label htmlFor={params.id} className="visually-hidden">
-            error={!!inputError}
+              {t("peopleSearch.label")}
-            helperText={inputError}
+            </label>
-            placeholder={t("peopleSearch.placeholder")}
+            <TextField
-            label={t("peopleSearch.label")}
+              {...params}
-            autoComplete="off"
+              error={!!inputError}
-            onKeyDown={(e) => {
+              helperText={inputError}
-              if (e.key === "Enter" && onToggleEventPreview) {
+              placeholder={t("peopleSearch.placeholder")}
-                e.preventDefault();
+              label=""
-                onToggleEventPreview();
+              inputProps={{
-              }
+                ...params.inputProps,
-            }}
-            slotProps={{
-              input: {
-                ...params.InputProps,
                 autoComplete: "off",
-                startAdornment: (
+              }}
-                  <>
+              onKeyDown={(e) => {
-                    <PeopleOutlineOutlinedIcon
+                if (e.key === "Enter" && onToggleEventPreview) {
-                      style={{ marginRight: 8, color: "rgba(0, 0, 0, 0.54)" }}
+                  e.preventDefault();
-                    />
+                  onToggleEventPreview();
-                    {params.InputProps.startAdornment}
+                }
-                  </>
+              }}
-                ),
+              slotProps={{
-                endAdornment: (
+                input: {
-                  <>
+                  ...params.InputProps,
-                    {loading ? (
+                  autoComplete: "off",
-                      <CircularProgress color="inherit" size={20} />
+                  startAdornment: (
-                    ) : null}
+                    <>
-                    {params.InputProps.endAdornment}
+                      <PeopleOutlineOutlinedIcon
-                  </>
+                        style={{ marginRight: 8, color: "rgba(0, 0, 0, 0.54)" }}
-                ),
+                      />
-              },
+                      {params.InputProps.startAdornment}
-            }}
+                    </>
-            inputProps={{
+                  ),
-              ...params.inputProps,
+                  endAdornment: (
-              autoComplete: "off",
+                    <>
-            }}
+                      {loading ? (
-          />
+                        <CircularProgress color="inherit" size={20} />
+                      ) : null}
+                      {params.InputProps.endAdornment}
+                    </>
+                  ),
+                },
+              }}
+            />
+          </>
         )}
         renderOption={(props, option) => {
           if (selectedUsers.find((u) => u.email === option.email)) return null;

src/components/Calendar/CustomCalendar.styl

@@ -342,3 +342,20 @@ tbody > tr.fc-scrollgrid-section:first-of-type .fc-scroller
 
 .fc-timegrid-event-harness-inset .fc-timegrid-event
   box-shadow none
+
+/* Hide 00:00 time slot label */
+.fc-timegrid-slot-label[data-time="00:00:00"] .fc-timegrid-slot-label-cushion,
+.fc-timegrid-slot-label[data-time="00:00:00"] .fc-scrollgrid-shrink-cushion,
+.fc-timegrid-slot-label[data-time="00:00:00"] .fc-timegrid-slot-label-frame::after
+  opacity 0
+
+.visually-hidden
+  border 0
+  clip rect(0 0 0 0)
+  height 1px
+  margin -1px
+  overflow hidden
+  padding 0
+  position absolute
+  width 1px
+  whiteSpace nowrap

src/components/Calendar/SettingsTab.tsx

@@ -51,7 +51,9 @@ export function SettingsTab({
     <Box mt={2}>
       <TextField
         fullWidth
-        label={t("common.name")}
+        label=""
+        inputProps={{ "aria-label": t("common.name") }}
+        placeholder={t("common.name")}
         value={name}
         onChange={(e) => setName(e.target.value)}
         size="small"
@@ -87,13 +89,13 @@ export function SettingsTab({
             onChange={(e, val) => val && setVisibility(val)}
             size="small"
           >
-            <ToggleButton value="public">
+            <ToggleButton value="public" sx={{ width: "140px" }}>
-              <PublicIcon fontSize="small" />
+              <PublicIcon fontSize="small" sx={{ mr: 1 }} />
               {t("common.all")}
             </ToggleButton>
 
-            <ToggleButton value="private">
+            <ToggleButton value="private" sx={{ width: "140px" }}>
-              <LockIcon fontSize="small" />
+              <LockIcon fontSize="small" sx={{ mr: 1 }} />
               {t("common.you")}
             </ToggleButton>
           </ToggleButtonGroup>

src/components/Calendar/TimezoneSelector.tsx

@@ -86,7 +86,7 @@ export function TimezoneSelector({
             getTimezoneOffset(tzName, referenceDate)
           }
           autoFocus={true}
-          showIcon={true}
+          showIcon={false}
           inputFontSize="14px"
           inputPadding="2px 4px"
           onClose={handleClose}

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",

src/components/Menubar/Menubar.tsx

@@ -144,7 +144,17 @@ export function Menubar({
           </div>
           <div className="menu-items">
             <div className="navigation-controls">
-              <ButtonGroup variant="outlined" size="small">
+              <ButtonGroup
+                variant="outlined"
+                size="small"
+                sx={{
+                  height: "43px",
+                  "& .MuiButton-root": {
+                    color: "#525256",
+                    borderColor: "#AEAEC0",
+                  },
+                }}
+              >
                 <Button onClick={() => handleNavigation("prev")}>
                   <ChevronLeftIcon />
                 </Button>
@@ -187,6 +197,7 @@ export function Menubar({
                 onChange={(e) => handleViewChange(e.target.value)}
                 variant="outlined"
                 aria-label={t("menubar.viewSelector")}
+                sx={{ height: "43px" }}
               >
                 <MenuItem value="dayGridMonth">
                   {t("menubar.views.month")}