fix: cancelled styling

src/components/EventRow/EventRow.tsx

@@ -73,11 +73,11 @@ export const EventRow = ({date, end, title, location, cancelled, href, color = "
           [styles.lineWhite]: color === "white",
         })}></div>
 
-        <div className={classNames({
-          [styles.details]: true,
-          [styles.cancelled]: cancelled
-        })}>
-          {title} <br />
+        <div className={styles.details}>
+          <span className={classNames({ [styles.cancelled]: cancelled })}>{title}</span>
+          {cancelled && <span className={styles.cancelledLabel}>Abgesagt</span>}
+          <br />
+          <span className={classNames({ [styles.cancelled]: cancelled })}>
             { showDate &&
               <>
                 {dateObj.toLocaleDateString("de-DE", { weekday: "long" })}
@@ -88,6 +88,7 @@ export const EventRow = ({date, end, title, location, cancelled, href, color = "
               </>
             }
             {location}
+          </span>
         </div>
       </div>
     </Link>

src/components/EventRow/styles.module.scss

@@ -52,7 +52,19 @@
 }
 
 .cancelled {
-  text-decoration: line-through;
+  color: #757575;
+  // line-through can't be repositioned, so draw an underline and pull it
+  // up into the text; a less negative offset moves the line further down
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+  text-underline-offset: -0.25em;
+}
+
+.cancelledLabel {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #b3261e;
 }
 
 .container:hover .dayBase {

src/components/MassTable/MassTableRow.stories.ts

@@ -61,3 +61,12 @@ export const Cancelled: Story = {
     cancelled: true,
   },
 }
+
+export const CancelledLongDayName: Story = {
+  args: {
+    id: '1',
+    date: '2024-08-22T15:00:00.000Z',
+    type: 'WORD',
+    cancelled: true,
+  },
+}

src/components/MassTable/MassTableRow.tsx

@@ -32,30 +32,34 @@ export const MassTableRow = ({
   return (
     <Link
       href={`/gottesdienst/${id}`}
-      className={classNames({ [styles.cancelled]: cancelled }, styles.link)}
+      className={styles.link}
     >
       <div
         className={styles.row}
         onMouseEnter={() => setSymbol('†')}
         onMouseLeave={() => setSymbol('')}
       >
-        <div className={styles.day}>{day}</div>
-        <div className={styles.symbol}>{symbol}</div>
+        <div className={classNames({ [styles.cancelled]: cancelled }, styles.day)}>{day}</div>
+        <div className={styles.symbol}>{!cancelled && symbol}</div>
         <div className={styles.time}>
+          <span className={classNames({ [styles.cancelled]: cancelled })}>
             {time}
+          </span>
 
-          {type === 'FAMILY' && (
+          {!cancelled && type === 'FAMILY' && (
             <Image src={family} width={18} height={18} alt={'Familien Messe'} />
           )}
 
-          {type === 'WORD' && (
+          {!cancelled && type === 'WORD' && (
             <Image src={bible} width={18} height={18} alt={'Wortgottesfeier'} />
           )}
 
-          {type === 'LANGUAGE' && (
+          {!cancelled && type === 'LANGUAGE' && (
             <Image src={language} width={18} height={18} alt={'Fremdsprache'} />
           )}
         </div>
+
+        {cancelled && <span className={styles.cancelledLabel}>Abgesagt</span>}
       </div>
     </Link>
   )

src/components/MassTable/styles.module.scss

@@ -6,7 +6,7 @@
   height: 24px;
   cursor: pointer;
   font-size: 18px;
-  align-items: flex-start;
+  align-items: baseline;
   margin-bottom: 3px;
 }
 
@@ -27,7 +27,16 @@
 }
 
 .cancelled {
-  text-decoration: line-through;
+  color: #757575;
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+  text-underline-offset: -0.25em;
+}
+
+.cancelledLabel {
+  font-size: 12px;
+  font-weight: 600;
+  color: #b3261e;
 }
 
 .symbol {
@@ -39,6 +48,7 @@
 .day {
   flex-shrink: 0;
   width: 90px;
+  line-height: 1.2em;
 }
 
 .time {