Organizer style updates (#954)

Author: daveearley

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

@@ -4,6 +4,8 @@
   overflow: hidden;
   padding: 0;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  container-type: inline-size;
+  min-width: 280px;
 
   &:hover {
     border-color: var(--mantine-color-gray-4);
@@ -42,7 +44,7 @@
   color: inherit;
   min-height: 140px;
 
-  @include mixins.respond-below(md) {
+  @include mixins.respond-below(md, true) {
     flex-direction: column;
     min-height: auto;
     position: relative;
@@ -55,7 +57,7 @@
   min-width: 200px;
   overflow: hidden;
 
-  @include mixins.respond-below(md) {
+  @include mixins.respond-below(md, true) {
     width: 100%;
     min-width: 100%;
     height: 140px;
@@ -180,7 +182,7 @@
   gap: 20px;
   min-width: 0;
 
-  @include mixins.respond-below(md) {
+  @include mixins.respond-below(md, true) {
     flex-direction: column;
     align-items: stretch;
     padding: 14px;
@@ -203,7 +205,11 @@
   color: var(--mantine-color-text);
   line-height: 1.3;
   transition: color 0.15s ease;
-  @include mixins.ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .meta {
@@ -284,12 +290,12 @@
   border-radius: var(--hi-radius-md);
   flex-shrink: 0;
 
-  @include mixins.respond-below(lg) {
+  @include mixins.respond-below(lg, true) {
     gap: 18px;
     padding: 10px 14px;
   }
 
-  @include mixins.respond-below(md) {
+  @include mixins.respond-below(md, true) {
     justify-content: space-around;
     padding: 12px;
   }
@@ -303,7 +309,7 @@
   cursor: default;
   min-width: 75px;
 
-  @include mixins.respond-below(lg) {
+  @include mixins.respond-below(lg, true) {
     min-width: 65px;
   }
 }
@@ -314,7 +320,7 @@
   color: var(--mantine-color-text);
   line-height: 1;
 
-  @include mixins.respond-below(lg) {
+  @include mixins.respond-below(lg, true) {
     font-size: 16px;
   }
 }
@@ -325,7 +331,7 @@
   color: var(--mantine-color-green-7);
   line-height: 1;
 
-  @include mixins.respond-below(lg) {
+  @include mixins.respond-below(lg, true) {
     font-size: 16px;
   }
 }
@@ -341,7 +347,7 @@
 .menuButton {
   flex-shrink: 0;
 
-  @include mixins.respond-below(md) {
+  @include mixins.respond-below(md, true) {
     position: absolute;
     top: 10px;
     right: 10px;
@@ -351,7 +357,7 @@
 .actionButton {
   color: var(--mantine-color-dimmed);
 
-  @include mixins.respond-below(md) {
+  @include mixins.respond-below(md, true) {
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(4px);
 

frontend/src/components/layouts/OrganizerLayout/index.tsx

@@ -3,7 +3,7 @@ import {
     IconBrandStripe,
     IconCalendar,
     IconCalendarPlus,
-    IconChartBar,
+    IconChartPie,
     IconChevronRight,
     IconCreditCard,
     IconDashboard,
@@ -19,7 +19,7 @@ import {t} from "@lingui/macro";
 import {BreadcrumbItem, NavItem} from "../AppLayout/types.ts";
 import AppLayout from "../AppLayout";
 import {NavLink, useLocation, useParams} from "react-router";
-import {Button, Modal, Text, Stack} from "@mantine/core";
+import {Button, Modal, Stack, Text} from "@mantine/core";
 import {useGetOrganizer} from "../../../queries/useGetOrganizer.ts";
 import {useState} from "react";
 import {CreateEventModal} from "../../modals/CreateEventModal";
@@ -48,7 +48,10 @@ const OrganizerLayout = () => {
     const [createModalOpen, {open: openCreateModal, close: closeCreateModal}] = useDisclosure(false);
     const [switchOrganizerModalOpen, {open: openSwitchModal, close: closeSwitchModal}] = useDisclosure(false);
     const [shareModalOpen, {open: openShareModal, close: closeShareModal}] = useDisclosure(false);
-    const [emailVerificationModalOpen, {open: openEmailVerificationModal, close: closeEmailVerificationModal}] = useDisclosure(false);
+    const [emailVerificationModalOpen, {
+        open: openEmailVerificationModal,
+        close: closeEmailVerificationModal
+    }] = useDisclosure(false);
     const {data: organizerResposne} = useGetOrganizers();
     const organizers = organizerResposne?.data;
     const {data: account} = useGetAccount();
@@ -73,7 +76,7 @@ const OrganizerLayout = () => {
         {
             link: 'reports',
             label: t`Reports`,
-            icon: IconChartBar,
+            icon: IconChartPie,
             isActive: (isActive) => isActive || location.pathname.includes('/report/')
         },
 
@@ -146,7 +149,7 @@ const OrganizerLayout = () => {
                     className={classes.createEventBreadcrumb}
                     onClick={() => setShowCreateEventModal(true)}
                 >
-                    <IconCalendarPlus size={16} /> {t`Create Event`}
+                    <IconCalendarPlus size={16}/> {t`Create Event`}
                 </span>
             ),
         }
@@ -195,7 +198,8 @@ const OrganizerLayout = () => {
                             <TopBarButton
                                 onClick={handleStatusToggle}
                                 size="sm"
-                                leftSection={organizer?.status === 'DRAFT' ? <IconEyeOff size={16}/> : <IconEye size={16}/>}
+                                leftSection={organizer?.status === 'DRAFT' ? <IconEyeOff size={16}/> :
+                                    <IconEye size={16}/>}
                                 rightSection={<IconChevronRight size={14}/>}
                             >
                                 {organizer?.status === 'DRAFT'
@@ -276,10 +280,10 @@ const OrganizerLayout = () => {
                     <Text size="sm" c="dimmed">
                         {t`You must verify your email address before you can update the organizer status.`}
                     </Text>
-                    
+
                     {!emailConfirmationResent ? (
-                        <Button 
-                            variant="light" 
+                        <Button
+                            variant="light"
                             onClick={() => {
                                 handleEmailConfirmationResend();
                             }}

frontend/src/components/routes/event/EventDashboard/index.tsx

@@ -287,6 +287,8 @@ export const EventDashboard = () => {
 
                     <AreaChart
                         h={300}
+                        pl={40}
+                        pr={40}
                         data={eventStats?.daily_stats.map(stat => {
                             return ({
                                 date: formatDateWithLocale(stat.date, 'chartDate', event.timezone),

frontend/src/components/routes/organizer/OrganizerDashboard/OrganizerDashboard.module.scss

@@ -163,8 +163,8 @@
   grid-template-columns: 1fr;
   gap: 3rem;
 
-  @include mixins.respond-above(md) {
-    grid-template-columns: 1fr 2fr;
+  @include mixins.respond-above(lg) {
+    grid-template-columns: minmax(300px, 1fr) 2fr;
     gap: 1.5rem;
     align-items: stretch;
   }
@@ -186,7 +186,7 @@
   order: 2;
 }
 
-@include mixins.respond-above(md) {
+@include mixins.respond-above(lg) {
   .eventsSection {
     order: 2;
   }