restyle current date state

src/components/Calendar/Calendar.styl

@@ -117,7 +117,7 @@
   margin-top 2px
   width 6px
   height 6px
-  background-color #d93025
+  background-color #1D192B1F
   border-radius 50%
   margin-left auto
   margin-right auto

src/components/Calendar/CustomCalendar.styl

@@ -73,7 +73,7 @@ span.fc-daygrid-day-number.current-date
   color #fff
 
 span.fc-daygrid-day-number.current-date:after
-  background-color #f67e35
+  background-color #FB9E3A
 
 td.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink,
 td.fc-timegrid-slot.fc-timegrid-slot-label.fc-timegrid-slot-minor

src/components/Calendar/SettingsTab.tsx

@@ -50,21 +50,26 @@ export function SettingsTab({
     <>
       {/* 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,
-            },
-          }}
-        />
+        <Typography variant="h6" sx={{ margin: 0 }}>
+          {t("calendarPopover.settings.calendarName")}
+        </Typography>
+        <Box sx={{ marginTop: "6px" }}>
+          <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>
       </Box>
 
       {/* Form group 2: Description */}