From 03db8c827eaca6bb1939bb604874a4328cd431c9 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 30 Jul 2022 10:56:42 +0300
Subject: [PATCH] Time zone info in list view

---
 TODO.md                       |  5 +++--
 app/routes/calendar/index.tsx | 24 ++++++++++++++++++------
 app/styles/calendar.css       |  7 +++++++
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/TODO.md b/TODO.md
index 4ab0e17a5..08d30b7e3 100644
--- a/TODO.md
+++ b/TODO.md
@@ -11,8 +11,8 @@ Calendar
 - [x] Add tags to the seed
 - [ ] Tags should be clickable and apply a filter (also many tags)
 - [ ] Page to add a new event
-  - [ ] Different fields to submit depending on if future date or past date
-- [ ] Edit page (add winners this way)
+- [ ] Edit page
+- [ ] Add winners page
 - [ ] Winners on the event info page
 - [ ] There should be a banner on the list page if you have past tournaments to report
 - [ ] On the user page tab showing past results
@@ -22,6 +22,7 @@ Calendar
 
 - [ ] Maybe make bracket URL mandatory?
 - [ ] components render twice on state change?
+- [ ] If week has no events show some text + don't show time zone text
 - [x] flatMap -> React.fragment
 - [x] Event page layout shift with time not taking space before mount (only if one day)
 - [x] WeekLinks make opaque blocks not take space on mobile
diff --git a/app/routes/calendar/index.tsx b/app/routes/calendar/index.tsx
index 835dd0e4b..6f14536cf 100644
--- a/app/routes/calendar/index.tsx
+++ b/app/routes/calendar/index.tsx
@@ -125,12 +125,24 @@ export default function CalendarPage() {
   return (
     <main className="stack lg">
       <WeekLinks />
-      {user && (
-        <LinkButton to="new" className="calendar__add-new-button">
-          Add new
-        </LinkButton>
-      )}
-      {isMounted ? <EventsList /> : <div className="calendar__placeholder" />}
+      <div className="stack">
+        {user && (
+          <LinkButton to="new" className="calendar__add-new-button" tiny>
+            Add new
+          </LinkButton>
+        )}
+        {isMounted ? (
+          <>
+            <EventsList />
+            <div className="calendar__time-zone-info">
+              All times in your local time zone:{" "}
+              {Intl.DateTimeFormat().resolvedOptions().timeZone}
+            </div>
+          </>
+        ) : (
+          <div className="calendar__placeholder" />
+        )}
+      </div>
     </main>
   );
 }
diff --git a/app/styles/calendar.css b/app/styles/calendar.css
index 94c748aa3..721ca949a 100644
--- a/app/styles/calendar.css
+++ b/app/styles/calendar.css
@@ -145,3 +145,10 @@
   width: 50rem;
   margin: 0 auto;
 }
+
+.calendar__time-zone-info {
+  color: var(--text-lighter);
+  font-size: var(--fonts-xs);
+  padding-block-end: var(--s-2);
+  text-align: center;
+}