Tweak calendar colors and support transparency in import

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 || ''}

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 || ''}

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 || ''}

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;

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 {