Tighten organizer page, theme contact modal

e2e/tests/organizers/organizer-public-page.spec.ts

@@ -33,13 +33,15 @@ test.describe('organizer public page', () => {
     });
     const [next] = [...event.occurrences].sort((a, b) => a.start_date.localeCompare(b.start_date));
     const nextDate = new Date(next.start_date);
-    const nextLabel = `${nextDate.toLocaleString('en-US', { month: 'short', timeZone: 'UTC' })} ${nextDate.getUTCDate()}`;
+    const nextMonth = nextDate.toLocaleString('en-US', { month: 'short', timeZone: 'UTC' });
+    const nextWeekday = nextDate.toLocaleString('en-US', { weekday: 'short', timeZone: 'UTC' });
 
     const publicPage = new OrganizerPublicPage(page);
     await publicPage.goto(organizer.id, organizer.slug);
 
     const card = publicPage.eventLink(event.title);
-    await expect(card.getByTestId('organizer-event-card-date')).toContainText(nextLabel);
+    await expect(card).toContainText(new RegExp(`${nextMonth}\\s*${nextDate.getUTCDate()}(?!\\d)`));
+    await expect(card.getByTestId('organizer-event-card-date')).toContainText(nextWeekday);
     await expect(card.getByTestId('organizer-event-card-date')).toContainText(/7:00\s?PM/);
     await expect(card.getByText('+2 more dates')).toBeVisible();
     await expect(card.getByText('Happening now')).toHaveCount(0);

frontend/src/components/common/ContactOrganizerModal/ContactOrganizerModal.module.scss

@@ -1,14 +1,56 @@
-.contactModal {
+.content {
+  --mantine-color-body: var(--event-content-bg-color, #ffffff);
+  --mantine-color-text: var(--event-primary-text-color, #1a1a1a);
+  --mantine-color-dimmed: var(--event-secondary-color, #525252);
+  --mantine-color-placeholder: var(--event-secondary-text-color, #737373);
+  --mantine-color-default-border: var(--event-border-color, rgba(0, 0, 0, 0.1));
+  --mantine-primary-color-filled: var(--event-primary-color, #7c3aed);
+  background: var(--mantine-color-body);
+  color: var(--mantine-color-text);
+  font-family: var(--theme-font-family, inherit);
+
+  :global(.mantine-InputWrapper-root .mantine-Input-input) {
+    --input-bg: var(--mantine-color-body);
+
+    &:not([data-error]) {
+      --input-color: var(--mantine-color-text);
+    }
+  }
+}
+
+.header {
+  background: var(--mantine-color-body);
+}
+
+.title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+}
+
+.close {
+  color: var(--mantine-color-dimmed);
+
+  &:hover {
+    background: color-mix(in srgb, var(--mantine-color-text) 8%, transparent);
+  }
 }
 
 .cancelButton {
+  color: var(--mantine-color-text);
+
+  &:hover {
+    background: color-mix(in srgb, var(--mantine-color-text) 8%, transparent);
+  }
 }
 
 .submitButton {
   border-radius: 10px;
+  background: var(--event-primary-color, var(--mantine-primary-color-filled));
+  color: var(--event-accent-contrast, #ffffff);
 
   &:hover {
-    opacity: 0.9;
-    transform: translateY(-1px);
+    background: var(--event-primary-color, var(--mantine-primary-color-filled));
+    filter: brightness(0.94);
   }
 }

frontend/src/components/common/ContactOrganizerModal/index.tsx

@@ -65,7 +65,10 @@ export const ContactOrganizerModal: React.FC<ContactOrganizerModalProps> = ({
             onClose={onClose}
             title={t`Contact ${organizer?.name || 'Organizer'}`}
             size="md"
-            className={classes.contactModal}
+            radius={18}
+            withinPortal={false}
+            overlayProps={{backgroundOpacity: 0.6, blur: 6}}
+            classNames={{content: classes.content, header: classes.header, title: classes.title, close: classes.close}}
         >
             <form onSubmit={contactForm.onSubmit(handleContactSubmit)}>
                 <InputGroup>

frontend/src/components/layouts/HomepageFrame/HomepageFrame.module.scss

@@ -144,10 +144,14 @@
   }
 
   &[data-variant="banner"][data-sized] {
-    max-height: min(36svh, 280px);
+    max-height: min(40svh, 300px);
 
     @include hp.tablet-up {
-      max-height: min(320px, 40vh);
+      max-height: min(420px, 50vh);
+    }
+
+    .coverImage {
+      object-fit: cover;
     }
   }
 
@@ -280,6 +284,7 @@
 }
 
 .footer {
+  isolation: isolate;
   display: flex;
   align-items: center;
   justify-content: space-between;

frontend/src/components/layouts/OrganizerHomepage/EventList/EventList.module.scss

@@ -167,7 +167,7 @@
 .thumb {
   position: relative;
   display: block;
-  width: 176px;
+  width: 160px;
   aspect-ratio: 16 / 10;
   overflow: hidden;
   border-radius: 14px;
@@ -180,56 +180,6 @@
   }
 }
 
-.spotlight {
-  display: grid;
-  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
-  gap: 8px;
-  margin-bottom: 36px;
-  padding: 10px;
-  border: 1px solid var(--hp-border);
-  border-radius: 28px;
-  background: var(--hp-fill);
-  color: inherit;
-  text-decoration: none;
-  transition: border-color 0.2s hp.$ease, box-shadow 0.2s hp.$ease;
-  @include hp.focus-ring;
-
-  &:hover {
-    border-color: var(--hp-border-strong);
-    box-shadow: var(--hp-shadow-md);
-
-    .artwork {
-      transform: scale(1.03);
-    }
-
-    .cta svg {
-      transform: translateX(3px);
-    }
-  }
-
-  @include hp.below-wide {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  @include hp.mobile {
-    margin-bottom: 24px;
-    border-radius: 24px;
-  }
-}
-
-.spotlightMedia {
-  position: relative;
-  display: block;
-  aspect-ratio: 16 / 10;
-  overflow: hidden;
-  border-radius: 20px;
-  background: var(--hp-fill-strong);
-
-  @include hp.mobile {
-    border-radius: 16px;
-  }
-}
-
 .artworkFill {
   position: absolute;
   inset: 0;
@@ -249,124 +199,15 @@
   transition: transform 0.6s hp.$ease;
 }
 
-.spotlightArt {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background:
-    radial-gradient(90% 80% at 15% 10%, color-mix(in srgb, var(--hp-accent) 45%, #fff), transparent 60%),
-    radial-gradient(70% 70% at 90% 100%, color-mix(in srgb, var(--hp-accent) 70%, #000), transparent 70%),
-    var(--hp-accent);
-  color: var(--hp-on-accent);
-
-  span {
-    font-size: 1rem;
-    font-weight: 700;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-    opacity: 0.85;
-  }
-
-  strong {
-    font-size: clamp(4rem, 9vw, 6.5rem);
-    font-weight: 700;
-    line-height: 1;
-    letter-spacing: -0.05em;
-  }
-}
-
-.spotlightBody {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 8px;
-  min-width: 0;
-  padding: 24px 28px;
-
-  @include hp.mobile {
-    padding: 16px 12px 12px;
-  }
-}
-
-.spotlightTop {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
-}
-
-.spotlightLabel {
-  display: inline-flex;
-  align-items: center;
-  height: 26px;
-  padding: 0 10px;
-  border-radius: 999px;
-  background: var(--hp-surface);
-  color: var(--hp-text);
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  box-shadow: var(--hp-shadow-sm);
-}
-
-.spotlightTitle {
-  margin: 0;
-  color: var(--hp-text);
-  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem);
-  font-weight: 700;
-  line-height: 1.1;
-  letter-spacing: -0.03em;
-  text-wrap: balance;
-  overflow-wrap: anywhere;
-}
-
 .description {
-  display: -webkit-box;
-  margin: 0;
-  overflow: hidden;
+  margin: 1px 0 0;
   color: var(--hp-muted);
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
-
-.spotlightFooter {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-top: 14px;
-}
-
-.cta {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  height: 44px;
-  margin-left: auto;
-  padding: 0 20px;
-  border-radius: 999px;
-  background: var(--hp-accent);
-  color: var(--hp-on-accent);
-  font-size: 0.9375rem;
-  font-weight: 700;
-  white-space: nowrap;
-
-  svg {
-    width: 18px;
-    height: 18px;
-    transition: transform 0.2s hp.$ease;
-  }
+  font-size: 0.875rem;
+  line-height: 1.5;
+  @include mixins.ellipsis;
 
-  @include hp.mobile {
-    width: 100%;
-    justify-content: center;
+  @include hp.narrow {
+    display: none;
   }
 }
+