From a1d2088c5c611e94d9c3b1166d975228f8bcf157 Mon Sep 17 00:00:00 2001
From: Bruno Bernardino <me@brunobernardino.com>
Date: Fri, 29 Mar 2024 20:55:54 +0000
Subject: [PATCH] Tweak calendar colors and support transparency in import

---
 components/calendar/AddEventModal.tsx     |  2 +-
 components/calendar/ImportEventsModal.tsx |  2 +-
 islands/calendar/Calendars.tsx            |  2 +-
 lib/utils/calendar.ts                     | 29 +++++++++++++++++++++--
 static/styles.css                         | 12 +++++-----
 5 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/components/calendar/AddEventModal.tsx b/components/calendar/AddEventModal.tsx
index 7502646..9bf1e27 100644
--- a/components/calendar/AddEventModal.tsx
+++ b/components/calendar/AddEventModal.tsx
@@ -81,7 +81,7 @@ export default function AddEventModal(
             <label class='text-slate-300 block pb-1' for='event_calendar'>Calendar</label>
             <section class='flex items-center justify-between'>
               <select
-                class='input-field mr-2'
+                class='input-field mr-2 !w-5/6'
                 name='event_calendar'
                 id='event_calendar'
                 value={newEvent.value?.calendar_id || ''}
diff --git a/components/calendar/ImportEventsModal.tsx b/components/calendar/ImportEventsModal.tsx
index a686187..db6947e 100644
--- a/components/calendar/ImportEventsModal.tsx
+++ b/components/calendar/ImportEventsModal.tsx
@@ -41,7 +41,7 @@ export default function ImportEventsModal(
             <label class='text-slate-300 block pb-1' for='event_calendar'>Calendar</label>
             <section class='flex items-center justify-between'>
               <select
-                class='input-field mr-2'
+                class='input-field mr-2 !w-5/6'
                 name='event_calendar'
                 id='event_calendar'
                 value={newCalendarId.value || ''}
diff --git a/islands/calendar/Calendars.tsx b/islands/calendar/Calendars.tsx
index e716771..8b2c97f 100644
--- a/islands/calendar/Calendars.tsx
+++ b/islands/calendar/Calendars.tsx
@@ -254,7 +254,7 @@ export default function Calendars({ initialCalendars }: CalendarsProps) {
             <label class='text-slate-300 block pb-1' for='calendar_color'>Color</label>
             <section class='flex items-center justify-between'>
               <select
-                class='input-field mr-2'
+                class='input-field mr-2 !w-5/6'
                 name='calendar_color'
                 id='calendar_color'
                 value={openCalendar.value?.color || ''}
diff --git a/lib/utils/calendar.ts b/lib/utils/calendar.ts
index 034ca9b..3ec0c49 100644
--- a/lib/utils/calendar.ts
+++ b/lib/utils/calendar.ts
@@ -145,7 +145,7 @@ export function parseVCalendarFromTextContents(text: string): Partial<CalendarEv
       continue;
     }
 
-    if (line.startsWith('DTSTART')) {
+    if (line.startsWith('DTSTART:') || line.startsWith('DTSTART;')) {
       const startDateInfo = line.split(':')[1] || '';
       const [dateInfo, hourInfo] = startDateInfo.split('T');
 
@@ -164,7 +164,7 @@ export function parseVCalendarFromTextContents(text: string): Partial<CalendarEv
       continue;
     }
 
-    if (line.startsWith('DTEND')) {
+    if (line.startsWith('DTEND:') || line.startsWith('DTEND;')) {
       const endDateInfo = line.split(':')[1] || '';
       const [dateInfo, hourInfo] = endDateInfo.split('T');
 
@@ -182,6 +182,31 @@ export function parseVCalendarFromTextContents(text: string): Partial<CalendarEv
 
       continue;
     }
+
+    if (line.startsWith('ORGANIZER;')) {
+      const organizerInfo = line.split(':');
+      const organizerEmail = organizerInfo.slice(-1)[0] || '';
+
+      if (!organizerEmail) {
+        continue;
+      }
+
+      partialCalendarEvent.extra = {
+        ...(partialCalendarEvent.extra! || {}),
+        organizer_email: organizerEmail,
+      };
+    }
+
+    if (line.startsWith('TRANSP:')) {
+      const transparency = (line.split('TRANSP:')[1] as CalendarEvent['extra']['transparency']) || 'default';
+
+      partialCalendarEvent.extra = {
+        ...(partialCalendarEvent.extra! || {}),
+        transparency,
+      };
+
+      continue;
+    }
   }
 
   return partialCalendarEvents;
diff --git a/static/styles.css b/static/styles.css
index e0c1051..1a86199 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -19,27 +19,27 @@ form {
 }
 
 .button {
-  @apply inline-block rounded text-white bg-[#51A4FB] hover:bg-sky-400 hover:shadow-sm px-4 py-2 !important;
+  @apply inline-block rounded text-white bg-[#51A4FB] hover:bg-sky-400 hover:shadow-sm px-4 py-2;
 }
 
 .button-secondary {
-  @apply inline-block rounded text-white bg-slate-600 hover:text-slate-900 hover:bg-slate-400 hover:shadow-sm px-4 py-2 !important;
+  @apply inline-block rounded text-white bg-slate-600 hover:text-slate-900 hover:bg-slate-400 hover:shadow-sm px-4 py-2;
 }
 
 .button-danger {
-  @apply inline-block rounded text-slate-50 bg-red-600 hover:text-slate-900 hover:bg-red-400 hover:shadow-md px-4 py-2 !important;
+  @apply inline-block rounded text-slate-50 bg-red-600 hover:text-slate-900 hover:bg-red-400 hover:shadow-md px-4 py-2;
 }
 
 .input-field {
-  @apply block w-full p-2 rounded-md text-white bg-slate-700 border-transparent border focus:border-[#51A4FB] focus:bg-slate-700 outline-none focus:ring-0 shadow-sm !important;
+  @apply block w-full p-2 rounded-md text-white bg-slate-700 border-transparent border focus:border-[#51A4FB] focus:bg-slate-700 outline-none focus:ring-0 shadow-sm;
 }
 
 .input-field[type="range"] {
-  @apply w-auto !important;
+  @apply w-auto;
 }
 
 .input-field:required:invalid:not(:placeholder-shown) {
-  @apply bg-red-400 !important;
+  @apply bg-red-400;
 }
 
 .notification-error {