some improvements to destino devconnect table, misc.

Author: lassejaco

devconnect/src/common/components/ba/destino/event-table.module.scss

@@ -1,3 +1,12 @@
 .team-col {
   background: yellow;
 }
+
+.event-table {
+  --table-row-background: none;
+  --table-row-hover-background: #232334;
+  --table-header-background: none;
+  --icon-color: white;
+  --table-header-color: #f3a24a;
+  --table-row-background-even: #36364c;
+}

devconnect/src/common/components/ba/destino/event-table.tsx

@@ -67,7 +67,7 @@ const tableColumns: Array<TableColumn> = [
       // if (item.link) {
       return (
         <Link
-          className="bold"
+          className="bolda"
           href={`/destino/${encodeURIComponent(item.name).replace(/%20/g, '-')}-${encodeURIComponent(item.event_id)}`}
           indicateExternal
         >
@@ -175,13 +175,13 @@ const EventsTable = React.memo(({ events, pages }: any) => {
   })
 
   return (
-    <div className="w-full">
+    <div className={`w-full ${styles['event-table']}`}>
       <div className="flex justify-between items-center mb-4 gap-2">
         {/* <div className="font-bold">Destino Devconnect Events</div> */}
 
         <div className="flex">
           <p
-            className={`no-select cursor-pointer translate-y-[1px] hover:font-bold px-2 md:px-4 py-2 ${
+            className={`no-select cursor-pointer translate-y-[1px] hover:font-bold px-2 md:px-0 py-2 ${
               !includePastEvents ? 'font-bold' : ''
             }`}
             onClick={() => {
@@ -204,7 +204,7 @@ const EventsTable = React.memo(({ events, pages }: any) => {
         </div>
 
         <input
-          className={`rounded-lg p-1.5 text-base lg:text-sm px-4 border-solid text-black border border-slate-300 outline-none`}
+          className={`p-1.5 text-base lg:text-sm px-3 border-solid text-black outline-none`}
           type="text"
           value={search}
           onChange={e => setSearch(e.target.value)}
@@ -214,7 +214,7 @@ const EventsTable = React.memo(({ events, pages }: any) => {
 
       <div className="mb-4">{/* <RichText content={pages.events_table}></RichText> */}</div>
 
-      <div className="text-sm text-black rounded-xl overflow-hidden">
+      <div className="text-sm overflow-hidden text-white">
         <Table itemKey="_key" items={filteredEvents} columns={tableColumns} initialSort={0} />
       </div>
     </div>

devconnect/src/common/components/link/Link.tsx

@@ -103,7 +103,7 @@ const WrappedLink = React.forwardRef(
         <span className={css['link']} data-type="link-text">
           {children}
         </span>
-        {indicateExternal && (
+        {isExternal && indicateExternal && (
           <span className={css['external-indicator']} data-type="external-indicator">
             &nbsp;
             <LinkIndicator className={`${css['icon']} icon`} />

devconnect/src/pages/destino/[event].tsx

@@ -35,7 +35,7 @@ ${currentUrl}`
     'MMMM D, YYYY'
   )} as part of the Destino Devconnect series.%0A%0A${encodeURIComponent(
     currentUrl
-  )}&channelKey=devcon&embeds[]=${encodeURIComponent(currentUrl)}`
+  )}&channelKey=devconnect&embeds[]=${encodeURIComponent(currentUrl)}`
 
   const hasLink = eventData.link && eventData.link.startsWith('http')
 
@@ -61,7 +61,12 @@ ${currentUrl}`
             {(globalThis as any).translations.this_is_a_destino_devconnect_event}
           </Link>
         </div>
-        <Tilty className="max-w-full relative contents md:block" style={{ transformStyle: 'preserve-3d' }} speed={5000}>
+        <Tilty
+          className="max-w-full relative contents md:block"
+          style={{ transformStyle: 'preserve-3d' }}
+          speed={5000}
+          reverse
+        >
           <div className="flex flex-col bg-white rounded-2xl overflow-hidden w-full max-w-[800px] shadow-lg border border-gray-600 border-solid mt-4 mb-0 sm:mt-0 ">
             <div className="w-full aspect-[7/2] relative">
               <Image
@@ -74,9 +79,6 @@ ${currentUrl}`
             <div className="py-4 px-6 flex flex-col">
               <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-3">
                 <h1 className="text-xl md:text-2xl font-extrabold text-gray-900 leading-tight">{eventData?.name}</h1>
-                {/* <span className="inline-block bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xs font-semibold px-3 py-1 rounded-full shadow">
-                {eventData.name}
-              </span> */}
                 <span className="inline-flex items-center gap-1 text-gray-500 text-xs font-medium">
                   <svg
                     className="w-4 h-4 text-gray-400"
@@ -94,7 +96,6 @@ ${currentUrl}`
                   {eventData?.location}
                 </span>
               </div>
-              {/* <h1 className="text-xl md:text-2xl font-extrabold text-gray-900 leading-tight mb-2">{eventData?.name}</h1> */}
               <p className="mb-4 text-xs md:text-base">{eventData?.content}</p>
               <div className="flex flex-col sm:flex-row gap-4 text-sm justify-between">
                 <div className="flex gap-4">
@@ -128,11 +129,7 @@ ${currentUrl}`
               </Button>
             </Link>
           )}
-          {/* <Image
-            src={DestinoLogo}
-            alt="Destino Logo"
-            className="object-cover w-[250px] max-w-[70vw] absolute bottom-0 translate-y-[calc(100%+24px)] left-1/2 -translate-x-1/2"
-          /> */}
+
           <div>
             {(globalThis as any).translations.destino_ai_generated}
             {hasLink && ' - ' + (globalThis as any).translations.destino_ai_generated_2}
@@ -180,8 +177,6 @@ export const getStaticPaths = async ({ locales }: { locales: string[] }) => {
 
   const events = await eventsResponse.json()
 
-  console.log(events, 'EVENTS')
-
   const paths = locales.flatMap(locale =>
     events.map((event: any) => ({
       params: { event: `${encodeURIComponent(event.name).replace(/%20/g, '-')}-${encodeURIComponent(event.event_id)}` },

lib/components/table/table.module.scss

@@ -28,12 +28,14 @@
   .header {
     align-self: flex-start;
     border-bottom: 1px solid #b9b9b9;
-    background: white;
+    background: var(--table-header-background, white);
+    color: var(--icon-color, black);
     @extend .distribute-items;
 
     .column-header {
+      color: var(--table-header-color, inherit);
       text-transform: uppercase;
-      font-weight: 600;
+      // font-weight: 600;
       display: flex;
       align-items: center;
 
@@ -55,21 +57,24 @@
 
     $bg-color: white;
 
-    background: $bg-color;
+    background: var(--table-row-background, $bg-color);
 
     @media not all and (hover: none) {
       &:hover {
         outline: 1px solid rgba(121, 128, 135, 1);
-        background: darken($bg-color, 5%);
+        background: var(--table-row-hover-background, darken($bg-color, 5%));
       }
     }
 
     &:nth-child(even) {
       $even-bg-color: #f8f8f8;
-      background: $even-bg-color;
+      background: var(--table-row-background-even, $even-bg-color);
 
       &:hover {
-        background: darken($even-bg-color, 5%);
+        background: var(
+          --table-row-hover-background,
+          darken($even-bg-color, 5%)
+        );
       }
     }
   }