From 595059df68564df0c8d799bb1053607273d79110 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Wed, 28 Jan 2026 17:48:47 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(front)=20add=20DynamicCalendarLogo=20?=
 =?UTF-8?q?component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Create a React component that displays the calendar logo with
the current day number overlaid dynamically.

Features:
- Two variants: "header" (full logo) and "icon" (icon only)
- Day number positioned with CSS overlay
- Client-side rendering to avoid SSR hydration issues
- Translated alt text using i18n

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/logo/DynamicCalendarLogo.scss  | 50 +++++++++++++++++++
 .../components/logo/DynamicCalendarLogo.tsx   | 47 +++++++++++++++++
 .../src/features/ui/components/logo/index.ts  |  1 +
 .../apps/calendars/src/styles/globals.scss    |  1 +
 4 files changed, 99 insertions(+)
 create mode 100644 src/frontend/apps/calendars/src/features/ui/components/logo/DynamicCalendarLogo.scss
 create mode 100644 src/frontend/apps/calendars/src/features/ui/components/logo/DynamicCalendarLogo.tsx
 create mode 100644 src/frontend/apps/calendars/src/features/ui/components/logo/index.ts

diff --git a/src/frontend/apps/calendars/src/features/ui/components/logo/DynamicCalendarLogo.scss b/src/frontend/apps/calendars/src/features/ui/components/logo/DynamicCalendarLogo.scss
new file mode 100644
index 0000000..5674b37
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/ui/components/logo/DynamicCalendarLogo.scss
@@ -0,0 +1,50 @@
+.calendars__dynamic-logo {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  &__img {
+    display: block;
+    height: 100%;
+    width: auto;
+  }
+
+  &__day {
+    position: absolute;
+    color: #f7f8f8;
+    font-weight: 700;
+    font-family:
+      system-ui,
+      -apple-system,
+      sans-serif;
+    text-align: center;
+    opacity: 0.95;
+    pointer-events: none;
+    font-size: 11px;
+
+    &--small {
+      font-size: 12px;
+    }
+  }
+
+  &--header {
+    height: 40px;
+
+    .calendars__dynamic-logo__day {
+      left: 20px;
+      top: 35%;
+      transform: translate(-50%, 15%);
+    }
+  }
+
+  &--icon {
+    height: 40px;
+    width: 40px;
+
+    .calendars__dynamic-logo__day {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, 15%);
+    }
+  }
+}
diff --git a/src/frontend/apps/calendars/src/features/ui/components/logo/DynamicCalendarLogo.tsx b/src/frontend/apps/calendars/src/features/ui/components/logo/DynamicCalendarLogo.tsx
new file mode 100644
index 0000000..9b3cca0
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/ui/components/logo/DynamicCalendarLogo.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+interface DynamicCalendarLogoProps {
+  variant?: "header" | "icon";
+  className?: string;
+}
+
+export const DynamicCalendarLogo = ({
+  variant = "header",
+  className,
+}: DynamicCalendarLogoProps) => {
+  const { t } = useTranslation();
+  const [day, setDay] = useState<number | null>(null);
+
+  useEffect(() => {
+    setDay(new Date().getDate());
+  }, []);
+
+  const isIcon = variant === "icon";
+  const isDoubleDigit = day !== null && day >= 10;
+
+  return (
+    <div
+      className={`calendars__dynamic-logo ${isIcon ? "calendars__dynamic-logo--icon" : "calendars__dynamic-logo--header"} ${className ?? ""}`}
+    >
+      <img
+        src={
+          isIcon
+            ? "/assets/cal_icon_no_number.svg"
+            : "/assets/cal_logotype_text_no_number.svg"
+        }
+        alt={t("app_title")}
+        className="calendars__dynamic-logo__img"
+      />
+      {day !== null && (
+        <span
+          className={`calendars__dynamic-logo__day ${isDoubleDigit ? "calendars__dynamic-logo__day--small" : ""}`}
+        >
+          {day}
+        </span>
+      )}
+    </div>
+  );
+};
diff --git a/src/frontend/apps/calendars/src/features/ui/components/logo/index.ts b/src/frontend/apps/calendars/src/features/ui/components/logo/index.ts
new file mode 100644
index 0000000..8c8d7f1
--- /dev/null
+++ b/src/frontend/apps/calendars/src/features/ui/components/logo/index.ts
@@ -0,0 +1 @@
+export { DynamicCalendarLogo } from "./DynamicCalendarLogo";
diff --git a/src/frontend/apps/calendars/src/styles/globals.scss b/src/frontend/apps/calendars/src/styles/globals.scss
index e8c5fc3..0575d14 100644
--- a/src/frontend/apps/calendars/src/styles/globals.scss
+++ b/src/frontend/apps/calendars/src/styles/globals.scss
@@ -7,6 +7,7 @@
 @use "./../features/ui/components/toaster";
 @use "./../features/ui/components/generic-disclaimer/GenericDisclaimer.scss";
 @use "./../features/ui/components/spinner/SpinnerPage.scss";
+@use "./../features/ui/components/logo/DynamicCalendarLogo.scss";
 @use "./../features/layouts/components/left-panel/LeftPanelMobile.scss";
 @use "./../features/calendar/components/left-panel/MiniCalendar.scss";
 @use "./../features/calendar/components/calendar-list/CalendarList.scss";