Add language

.github/ISSUE_TEMPLATE/add-to-calendar.yml

@@ -57,6 +57,14 @@ body:
     validations:
       required: true
 
+  - id: language
+    type: input
+    attributes:
+      label: Event Language
+      description: "Primary language of the event (e.g., English, Spanish, Mandarin)"
+    validations:
+      required: true
+
   - id: userName
     type: input
     attributes:

CONTRIBUTING.md

@@ -52,6 +52,7 @@ All fields included in the _frontmatter_ are mandatory:
 - `UTCStartTime`: start time in UTC, in `HH:MM` format.
 - `UTCStartTime`: end time in UTC, in `HH:MM` format.
 - `type`: one of the following `podcast`, `stream`, `talk`, `meetup`, `fundraising`, `conference`, `misc`.
+- `language`: primary language of the event (e.g., English, Spanish, Mandarin).
 - `userName`: user name or organization organizing the event.
 - `userLink`: link to user or organization profile.
 - `linkUrl`: Button link with external link to the event.

components/button-link/button-link.scss

@@ -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);
+    }
   }
 }

components/chip/Chip.jsx

@@ -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', 'chinese']
+                            .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/chip/chip.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/date-time-chip/date-time-chip.scss

@@ -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/event-detail/EventDetail.jsx

@@ -33,6 +33,7 @@ const EventDetail = ({ event, reverseColumns, isFullPage }) => {
           <div className="event-detail__column">
             <Chip label={event.formattedDate.date} />
             <EventTypeChip type={event.type} />
+            {event.language && <Chip label={event.language} />}
             {event.location && <Chip label={event.location} />}
           </div>
           <DateTimeChip

components/event-detail/event-detail.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) {