event svg corners fix on mobile and cleaned up date utils

Author: Tony Qiu

backend/apps/core/views.py

@@ -274,7 +274,7 @@ def confirm_email(request, token):
         # Redirect to frontend login page
         from django.http import HttpResponseRedirect
 
-        return HttpResponseRedirect("http://localhost:5173/auth")
+        return HttpResponseRedirect(settings.FRONTEND_URL + "/auth")
     except User.DoesNotExist:
         return Response(
             {"error": "Invalid confirmation token"}, status=status.HTTP_400_BAD_REQUEST

backend/config/settings/base.py

@@ -75,6 +75,8 @@
 # CSRF settings for development
 CSRF_TRUSTED_ORIGINS = [
     "http://localhost:5173",
+    "https://wat2do.ca",
+    "https://www.wat2do.ca",
 ]
 
 # CSRF settings for SPA frontend
@@ -188,7 +190,8 @@
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 
 # Email confirmation settings
-BASE_URL = os.getenv("BASE_URL", "http://localhost:8000")
+BASE_URL = "https://wat2do.ca" if os.getenv("PRODUCTION") == "1" else "http://localhost:8000"
+FRONTEND_URL = "https://wat2do.ca" if os.getenv("PRODUCTION") == "1" else "http://localhost:5173"
 
 # Global rate limiting settings
 RATELIMIT_VIEW = "ratelimit.views.ratelimited"

backend/utils/encryption_utils.py

@@ -6,7 +6,6 @@
 
 import base64
 import hashlib
-import hmac
 import os
 
 from cryptography.fernet import Fernet

frontend/src/features/events/components/EventsCalendar.tsx

@@ -20,7 +20,7 @@ import {
   DollarSign,
 } from "lucide-react";
 import "@/shared/styles/calendar.css";
-import { formatEventDate, formatEventTimeRange, removeTimezoneInfo } from "@/shared/lib/dateUtils";
+import { formatEventTimeRange, removeTimezoneInfo, formatPrettyDate } from "@/shared/lib/dateUtils";
 import { getClubTypeColor } from "@/shared/lib/clubTypeColors";
 import { Event } from "@/features/events/types/events";
 import { Tabs, TabsList, TabsTrigger } from "@/shared/components/ui/tabs";
@@ -105,7 +105,7 @@ const EventPopup: React.FC<{
     <div className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
       <div className="flex items-center gap-2">
         <CalendarIcon className="h-4 w-4 flex-shrink-0" />
-        <span>{formatEventDate(event.dtstart)}</span>
+        <span>{formatPrettyDate(event.dtstart)}</span>
       </div>
 
       <div className="flex items-center gap-2">

frontend/src/features/events/components/EventsGrid.tsx

@@ -28,7 +28,7 @@ import {
 } from "lucide-react";
 import { Event } from "@/features/events/types/events";
 import { memo, useState, useMemo, useEffect } from "react";
-import { formatEventDate, formatEventTimeRange } from "@/shared/lib/dateUtils";
+import { formatEventTimeRange, formatPrettyDate } from "@/shared/lib/dateUtils";
 import { getEventStatus, isEventNew } from "@/shared/lib/eventUtils";
 import { EVENTS_PER_PAGE } from "@/features/events/constants/events";
 import BadgeMask from "@/shared/components/ui/badge-mask";
@@ -198,7 +198,7 @@ const EventsGrid = memo(
                     <div className="flex items-center space-x-2 text-xs text-gray-600 dark:text-gray-400">
                       <Calendar className="h-3.5 w-3.5 flex-shrink-0" />
                       <span className="truncate">
-                        {formatEventDate(event.dtstart)}
+                        {formatPrettyDate(event.dtstart)}
                       </span>
                     </div>
 

frontend/src/shared/components/ui/badge-mask.tsx

@@ -15,39 +15,39 @@ function BadgeMask({ variant, children }: BadgeMaskProps) {
         <div className="absolute top-0 left-0 flex flex-col">
           <div className="flex">
             <div className="pb-1 pr-1 bg-white dark:bg-gray-900 rounded-br-xl">{children}</div>
-            <EventBadgeMaskTopLeft className="h-2 w-fit text-white dark:text-gray-900" />
+            <EventBadgeMaskTopLeft className="h-2 w-fit text-white inline-block dark:text-gray-900" />
           </div>
-          <EventBadgeMaskTopLeft className="h-2 w-fit text-white dark:text-gray-900" />
+          <EventBadgeMaskTopLeft className="h-2 w-fit text-white inline-block dark:text-gray-900" />
         </div>
       );
     case "top-right":
       return (
         <div className="absolute top-0 right-0 flex flex-col">
           <div className="flex">
-            <EventBadgeMaskTopRight className="h-2 w-fit text-white dark:text-gray-900" />
+            <EventBadgeMaskTopRight className="h-2 w-fit text-white inline-block dark:text-gray-900" />
             <div className="pb-1 pl-1 bg-white dark:bg-gray-900 rounded-bl-xl">{children}</div>
           </div>
-          <EventBadgeMaskTopRight className="h-2 w-fit ml-auto text-white dark:text-gray-900" />
+          <EventBadgeMaskTopRight className="h-2 w-fit ml-auto text-white inline-block dark:text-gray-900" />
         </div>
       );
     case "bottom-left":
       return (
         <div className="absolute bottom-0 left-0 flex flex-col">
-          <EventBadgeMaskBottomLeft className="h-2 w-fit text-white dark:text-gray-900" />
+          <EventBadgeMaskBottomLeft className="h-2 w-fit text-white inline-block dark:text-gray-900" />
           <div className="flex">
             <div className="pt-1 pr-1 bg-white dark:bg-gray-900 rounded-tr-xl">{children}</div>
-            <EventBadgeMaskBottomLeft className="h-2 w-fit mt-auto text-white dark:text-gray-900" />
+            <EventBadgeMaskBottomLeft className="h-2 w-fit mt-auto text-white inline-block dark:text-gray-900" />
           </div>
         </div>
       );
     case "bottom-right":
       return (
         <div className="absolute bottom-0 right-0 flex flex-col">
           <div className="flex">
-            <EventBadgeMaskBottomRight className="h-2 w-fit text-white dark:text-gray-900" />
+            <EventBadgeMaskBottomRight className="h-2 w-fit text-white inline-block dark:text-gray-900" />
             <div className="pb-1 pr-1 bg-white dark:bg-gray-900 rounded-br-xl">{children}</div>
           </div>
-          <EventBadgeMaskBottomRight className="h-2 w-fit ml-auto text-white dark:text-gray-900" />
+          <EventBadgeMaskBottomRight className="h-2 w-fit ml-auto text-white inline-block dark:text-gray-900" />
         </div>
       );
     default:

frontend/src/shared/lib/dateUtils.ts

@@ -3,7 +3,7 @@
  */
 
 
-import { toZonedTime, format } from "date-fns-tz";
+import { format } from "date-fns-tz";
 
 /**
  * Remove timezone info from ISO datetime string to treat as local time
@@ -19,8 +19,7 @@ export const removeTimezoneInfo = (dateTimeString: string): string => {
  */
 export const formatPrettyDate = (dateString: string): string => {
   try {
-    const tz = "America/New_York";
-    const date = toZonedTime(dateString, tz);
+    const date = new Date(removeTimezoneInfo(dateString));
     return format(date, "MMMM d, yyyy");
   } catch {
     return dateString // Return original string if parsing fails
@@ -76,26 +75,12 @@ export const getTodayString = (): string => {
   );
 };
 
-/**
- * Format an ISO datetime string to a prettier date format (e.g., "August 10, 2025")
- */
-export const formatEventDate = (isoDateTime: string): string => {
-  return formatPrettyDate(isoDateTime);
-};
-
-/**
- * Format an ISO datetime string to a prettier time format (e.g., "3pm" or "3:30pm")
- */
-export const formatEventTime = (isoDateTime: string): string => {
-  return formatPrettyTime(isoDateTime);
-};
-
 /**
  * Format a time range from ISO datetime strings (e.g., "3pm - 8pm")
  */
 export const formatEventTimeRange = (startDateTime: string, endDateTime: string | null): string => {
-  const start = formatEventTime(startDateTime);
-  const end = endDateTime ? formatEventTime(endDateTime) : null;
+  const start = formatPrettyTime(startDateTime);
+  const end = endDateTime ? formatPrettyTime(endDateTime) : null;
   return end ? `${start} - ${end}` : start;
 };