feat: Improve schedule page layout and event visibility

- Enhance schedule page layout with multi-column grid display
  - Add responsive grid with up to 4 columns on large screens
  - Improve card layout and spacing utilization
  - Show event descriptions in cards

- Add prominent "Add your activity" button
  - Position button in page header
  - Update button text for clarity
  - Improve button visibility with white background

- Improve visual hierarchy of event information
  - Reorganize event meta information
  - Add subtle hover effects on cards
  - Style date chips consistently

- Add distinctive styling for spoken language chips
  - Add data-spoken-language attribute to identify language indicators
  - Style language chips with purple background (#9C27B0)
  - Add detection for language prefixes and common language names

Files changed:
- components/events-list/events-list.scss
- components/events-list/EventsList.jsx
- components/chip/chip.scss
- components/chip/Chip.jsx
- content/commons.json

Author: AndreaGriffiths11

README-next.md

@@ -1,30 +1,43 @@
 .button-link {
+  background: rgba(255, 255, 255, 0.1);
+  padding: spacing(1.5) spacing(3);
+  border-radius: 100px;
   display: inline-flex;
   align-items: center;
-  column-gap: 10px;
+  column-gap: spacing(1);
+  @extend %subtitle-1;
+  text-decoration: none;
+  color: $white;
+  transition: all 0.2s ease;
 
-  height: spacing(7);
-  padding: 0 spacing(3);
-
-  @extend %body-1;
-
-  @extend %background-filter-white;
-  border-radius: 131px;
-
-  transition: color $simple-fade, background $simple-fade;
+  &:hover {
+    background: $white;
+    color: $purple;
+    transform: translateY(-1px);
+  }
 
-  .icon-arrow-right path {
-    fill: $white;
+  svg path {
+    transition: fill 0.2s ease;
+  }
 
-    transition: fill $simple-fade;
+  &:hover svg path {
+    fill: $purple;
   }
 
-  &:hover {
+  // Special styling for the add event button
+  &.events-list__add-button {
     background: $white;
     color: $purple;
+    font-weight: 600;
 
-    .icon-arrow-right path {
+    svg path {
       fill: $purple;
     }
+
+    &:hover {
+      background: $white;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    }
   }
 }

README-old.md

@@ -5,10 +5,16 @@ const Chip = ({ label, icon, customColor }) => {
     'custom-color': customColor,
   })
 
+  // Check for spoken language indicators
+  const isSpokenLanguage = label.toLowerCase().startsWith('in ') || 
+                          ['english', 'spanish', 'portuguese', 'mandarin', 'french']
+                            .some(lang => label.toLowerCase().includes(lang));
+
   return (
     <div
       className={classes}
       data-location={label.toLowerCase().includes('virtual') ? true : undefined}
+      data-spoken-language={isSpokenLanguage ? true : undefined}
       style={{ backgroundColor: customColor }}
     >
       {icon ? <span className="chip__icon">{icon}</span> : null}

components/button-link/button-link.scss

@@ -1,9 +1,10 @@
 .chip {
   padding: spacing(1) spacing(1.5);
-
   display: inline-flex;
   align-items: center;
   column-gap: 6px;
+  flex-shrink: 0;
+  white-space: nowrap;
 
   background-color: $white;
   @extend %subtitle-1;
@@ -17,9 +18,15 @@
     color: white;
   }
 
+  &[data-spoken-language] {
+    background-color: #9C27B0; // Rich purple for language indicator
+    color: white;
+  }
+
   &__icon {
     height: 18px;
     width: 18px;
+    flex-shrink: 0;
 
     svg {
       height: 100%;

components/chip/Chip.jsx

@@ -1,32 +1,29 @@
 .datetime-chip {
   @extend %subtitle-1;
-
+  display: flex;
+  flex-direction: column;
+  gap: spacing(1);
 
   &__time {
-    position: relative;
-    display: flex;
+    display: inline-flex;
     align-items: center;
-
-    &:not(:last-child) {
-      margin-bottom: spacing(1)
-    }
-    
-    @media (min-width: $md) {
-      margin-bottom: spacing(1.5)
-    }
+    white-space: nowrap;
+    color: $white-80;
   }
 
   &__timezone {
     margin-left: spacing(1);
-
     font-weight: $medium;
     font-size: 12px;
     line-height: 1.6;
-
-    color: $white-80;
+    color: $white-50;
   }
 
   &__icon {
     margin-right: spacing(1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.8;
   }
 }

components/chip/chip.scss

@@ -2,17 +2,20 @@
   $self: &;
 
   @extend %grid;
-
   position: relative;
+  width: 100%;
+  min-width: 0;
 
   &__user {
     margin-bottom: spacing(2);
     display: block;
-
     font-family: $inter;
     font-weight: $regular;
     font-size: 1.25rem;
     line-height: 1.4;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     &:hover {
       text-decoration: underline;
@@ -21,6 +24,9 @@
 
   &__title {
     @extend %header-1;
+    margin-bottom: spacing(3);
+    width: 100%;
+    min-width: 0;
 
     &[href]::after {
       content: '';
@@ -42,17 +48,38 @@
     }
   }
 
+  &__chips {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin-bottom: spacing(3);
+    overflow-x: auto;
+    padding-bottom: spacing(1);
+    gap: spacing(2);
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    min-width: 0;
+    
+    /* Hide scrollbar for IE, Edge and Firefox */
+    -ms-overflow-style: none;
+    
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    > * {
+      flex-shrink: 0;
+    }
+  }
+
   &__info {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    justify-content: center;
-    row-gap: spacing(4);
-
     width: 100%;
-    height: auto;
+    min-width: 0;
     box-sizing: border-box;
-
     grid-column: 1 / 5;
 
     @media (min-width: $md) {