Homepage style tweaks (#928)

Author: daveearley

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

@@ -19,8 +19,8 @@ $transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 .card {
   width: 100%;
   max-width: 420px;
-  background: var(--content-bg-color, #FFFFFF);
-  border: 1px solid var(--border-color, #E5E7EB);
+  background: var(--content-bg-color, var(--checkout-surface, #FFFFFF));
+  border: 1px solid var(--border-color, var(--checkout-border, #E5E7EB));
   border-radius: $radius-lg;
   padding: 40px 32px;
   text-align: center;
@@ -39,7 +39,7 @@ $transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   align-items: center;
   justify-content: center;
   margin: 0 auto 24px;
-  background: var(--accent-soft, var(--mantine-primary-color-light));
+  background: var(--accent-soft, var(--checkout-accent-soft, var(--mantine-primary-color-light)));
 
   @include mixins.respond-below(sm) {
     width: 64px;
@@ -60,7 +60,7 @@ $transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   font-family: $font-display;
   font-size: 20px;
   font-weight: 600;
-  color: var(--primary-text-color, #111827);
+  color: var(--primary-text-color, var(--checkout-text-primary, #111827));
   margin: 0 0 8px 0;
   line-height: 1.4;
 
@@ -71,7 +71,7 @@ $transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 
 .subtitle {
   font-size: 15px;
-  color: var(--secondary-color, #6B7280);
+  color: var(--secondary-color, var(--checkout-text-secondary, #6B7280));
   margin: 0 0 24px 0;
   line-height: 1.5;
 }
@@ -84,25 +84,25 @@ $transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
   font-weight: 600 !important;
   font-size: 15px !important;
   margin-top: 16px;
-  background: var(--primary-color, var(--mantine-primary-color-filled)) !important;
-  color: var(--accent-contrast, #FFFFFF) !important;
+  background: var(--primary-color, var(--checkout-accent, var(--mantine-primary-color-filled))) !important;
+  color: var(--accent-contrast, var(--checkout-accent-contrast, #FFFFFF)) !important;
   transition: transform $transition-fast, box-shadow $transition-fast;
 
   &:hover {
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px var(--accent-soft, rgba(0, 0, 0, 0.15));
+    box-shadow: 0 4px 12px var(--accent-soft, var(--checkout-accent-soft, rgba(0, 0, 0, 0.15)));
     filter: brightness(1.05);
   }
 }
 
 .helpText {
   margin-top: 24px;
   font-size: 14px;
-  color: var(--secondary-color, #6B7280);
+  color: var(--secondary-color, var(--checkout-text-secondary, #6B7280));
 }
 
 .helpLink {
-  color: var(--primary-color, var(--mantine-primary-color-filled));
+  color: var(--primary-color, var(--checkout-accent, var(--mantine-primary-color-filled)));
   text-decoration: none;
 
   &:hover {

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

@@ -17,10 +17,10 @@
   padding: 16px 20px;
   cursor: pointer;
   user-select: none;
-  transition: background-color 0.15s ease;
+  transition: opacity 0.15s ease;
 
   &:hover {
-    background-color: var(--checkout-accent-soft, rgba(0, 0, 0, 0.02));
+    opacity: 0.8;
   }
 }
 

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

@@ -244,15 +244,16 @@ const Checkout = () => {
                 size="m"
             >
                 <div style={{textAlign: 'center', padding: '20px 0'}}>
-                    <h3>
+                    <h3 style={{color: 'var(--checkout-text-primary)', margin: '0 0 8px 0'}}>
                         {t`You have run out of time to complete your order.`}
                     </h3>
-                    <p>
+                    <p style={{color: 'var(--checkout-text-secondary)', margin: '0'}}>
                         {t`Please return to the event page to start over.`}
                     </p>
                     <Button
                         onClick={handleReturn}
                         variant="filled"
+                        mt="xl"
                     >
                         {t`Return to Event Page`}
                     </Button>
@@ -267,10 +268,10 @@ const Checkout = () => {
                 size="m"
             >
                 <div style={{textAlign: 'center', padding: '20px 0'}}>
-                    <h3>
+                    <h3 style={{color: 'var(--checkout-text-primary)', margin: '0 0 8px 0'}}>
                         {t`Are you sure you want to leave?`}
                     </h3>
-                    <p>
+                    <p style={{color: 'var(--checkout-text-secondary)', margin: '0'}}>
                         {t`Your current order will be lost.`}
                     </p>
                     <Group justify="center" gap="md" mt="xl">
@@ -282,8 +283,8 @@ const Checkout = () => {
                         </Button>
                         <Button
                             onClick={handleAbandonConfirm}
-                            variant="filled"
-                            color="red"
+                            variant="outline"
+                            color="gray"
                             loading={abandonOrderMutation.isPending}
                         >
                             {t`Yes, cancel my order`}

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

@@ -132,18 +132,18 @@ $transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 .coverWrapper {
   position: relative;
   width: 100%;
-  aspect-ratio: 2.2 / 1;
+  max-height: 560px;
   overflow: hidden;
 
   @include mixins.respond-below(md) {
-    aspect-ratio: 16 / 10;
+    max-height: 400px;
   }
 }
 
 .coverImage {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  height: auto;
+  display: block;
   transition: transform $transition-slow;
 
   .mainCard:hover & {
@@ -219,8 +219,7 @@ $transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
 
   &:hover {
-    background: var(--accent-muted);
-    transform: translateY(-1px);
+    transform: translateY(-1px) scale(1.02);
   }
 }
 
@@ -573,7 +572,7 @@ $transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   transition: all $transition-fast;
 
   @include mixins.respond-below(md) {
-    height: 140px;
+    display: none;
   }
 
   &:hover {