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/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">
-              <PublicIcon fontSize="small" />
+            <ToggleButton value="public" sx={{ width: "140px" }}>
+              <PublicIcon fontSize="small" sx={{ mr: 1 }} />
               {t("common.all")}
             </ToggleButton>
 
-            <ToggleButton value="private">
-              <LockIcon fontSize="small" />
+            <ToggleButton value="private" sx={{ width: "140px" }}>
+              <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}