From 308a4a6037a9095103d726da5d36096066c198e3 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Tue, 30 Jan 2024 21:34:49 +0900
Subject: [PATCH] style: update styles for responsive events page

---
 .../{events.mdx => events/index.mdx}          |  6 +++-
 .../root-pages/events/test.mdx                | 19 ++++++++-----
 .../components/mdx/EventAbout/EventAbout.scss |  5 ++++
 .../mdx/EventCTASection/EventCTASection.scss  | 22 +++++++--------
 .../components/mdx/EventCard/EventCard.scss   |  8 ++++++
 .../components/mdx/EventCard/EventCard.tsx    |  8 ++++--
 .../mdx/EventHeader/EventHeader.scss          | 26 +++++++++++++++++
 .../mdx/EventHeader/EventHeader.tsx           | 28 +++++++++++++++++++
 .../components/mdx/EventHeader/index.ts       |  1 +
 .../components/mdx/EventInfo/EventInfo.scss   |  5 +++-
 .../EventProfileList/EventProfileList.scss    |  8 ++++++
 .../mdx/EventProfileList/EventProfileList.tsx |  2 +-
 .../src/client/components/mdx/index.ts        |  1 +
 .../src/client/css/custom.scss                |  6 ++++
 14 files changed, 121 insertions(+), 24 deletions(-)
 rename packages/docusaurus-playground/root-pages/{events.mdx => events/index.mdx} (97%)
 create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/EventHeader/EventHeader.scss
 create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/EventHeader/EventHeader.tsx
 create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/EventHeader/index.ts

diff --git a/packages/docusaurus-playground/root-pages/events.mdx b/packages/docusaurus-playground/root-pages/events/index.mdx
similarity index 97%
rename from packages/docusaurus-playground/root-pages/events.mdx
rename to packages/docusaurus-playground/root-pages/events/index.mdx
index 2a392d9..2b38c27 100644
--- a/packages/docusaurus-playground/root-pages/events.mdx
+++ b/packages/docusaurus-playground/root-pages/events/index.mdx
@@ -82,7 +82,11 @@ List of all Waku events
 />
 
 <Box top={{ xs: 152 }}>
-  <Grid xs={{ cols: 1, gap: '1rem' }} md={{ cols: 2 }}>
+  <Grid
+    xs={{ cols: 1, gap: '1rem' }}
+    md={{ cols: 2 }}
+    className="events-cta-sections"
+  >
     <Grid.Item xs={1}>
       <EventCTASection
         title="Logos Network State"
diff --git a/packages/docusaurus-playground/root-pages/events/test.mdx b/packages/docusaurus-playground/root-pages/events/test.mdx
index a51b913..77f6219 100644
--- a/packages/docusaurus-playground/root-pages/events/test.mdx
+++ b/packages/docusaurus-playground/root-pages/events/test.mdx
@@ -13,6 +13,7 @@ import {
   EventProfileList,
   EventCTA,
   EventCTASection,
+  EventHeader,
   Grid,
 } from '@site/src/components/mdx'
 
@@ -22,13 +23,13 @@ import {
 
 <Box top={{ xs: 8 }}>
   <EventBanner src="/img/event-banner.png" />
+  <EventHeader 
+    title="Meet Waku: Uncompromising Web3 Communication at Scale"
+    description="We are a family of robust, censorship-resistant communication protocols designed to enable privacy-focused messaging for web3 apps."
+  />
 
-# Meet Waku: Uncompromising Web3 Communication at Scale
-
-We are a family of robust, censorship-resistant communication protocols designed to enable privacy-focused messaging for web3 apps.
-
-<Box top={{ xs: 32 }}>
-  <Grid xs={{ cols: 1, gap: '1rem' }} md={{ cols: 2 }}>
+  <Box top={{ xs: 32 }}>
+  <Grid xs={{ cols: 2, gap: '1rem' }} md={{ cols: 2 }}>
     <Grid.Item xs={1}>
       <EventInfo 
         label="Date"
@@ -109,7 +110,11 @@ Yet, it doesn't have to be this way. Advances in cryptography, peer-to-peer netw
 </Box>
 
 <Box top={{ xs: 120 }}>
-  <Grid xs={{ cols: 1, gap: '1rem' }} md={{ cols: 2 }}>
+  <Grid
+    xs={{ cols: 1, gap: '1rem' }}
+    md={{ cols: 2 }}
+    className="events-cta-sections"
+  >
     <Grid.Item xs={1}>
       <EventCTASection
         title="Logos Network State"
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventAbout/EventAbout.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventAbout/EventAbout.scss
index d3625ae..c2344ca 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/EventAbout/EventAbout.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventAbout/EventAbout.scss
@@ -21,5 +21,10 @@
     display: flex;
     flex-direction: column;
     gap: 32px;
+
+    span {
+      font-size: 14px !important;
+      line-height: 20px !important;
+    }
   }
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.scss
index 67c1dfc..e9013b9 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCTASection/EventCTASection.scss
@@ -49,19 +49,17 @@
 }
 
 @include utils.responsive('sm', 'down') {
-  .mdx-event-cta-section__input-fields {
-    margin-bottom: 16px;
-  }
+  .mdx-event-cta-section__container {
+    .mdx-event-cta-section__input-fields {
+      margin-bottom: 16px;
+    }
 
-  .mdx-event-cta-section__cta {
-    margin-top: 8px;
-  }
+    .mdx-event-cta-section__cta {
+      margin-top: 8px;
+    }
 
-  .mdx-grid__content {
-    gap: 64px !important;
-  }
-
-  .mdx-event-cta-section__form {
-    margin-bottom: -24px;
+    .mdx-event-cta-section__form {
+      margin-bottom: -24px;
+    }
   }
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.scss
index ded9567..97df31c 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.scss
@@ -21,6 +21,10 @@
   border: 1px solid rgba(var(--lsd-border-primary), 0.2);
 }
 
+.mdx-event-card__label {
+  opacity: 0.6;
+}
+
 .mdx-event-card__title {
   &:hover {
     text-decoration: underline !important;
@@ -34,4 +38,8 @@
   border-top: 1px solid rgba(var(--lsd-border-primary), 0.2);
   padding: 16px 16px 16px 0;
   width: 100%;
+
+  * {
+    white-space: pre-wrap;
+  }
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.tsx
index 7b01927..62d0e21 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventCard/EventCard.tsx
@@ -37,11 +37,15 @@ export const EventCard: React.FC<EventCardProps> = ({
       </Typography>
       <div className="mdx-event-card__row">
         <div className="mdx-event-card__info">
-          <Typography variant="body2">Date</Typography>
+          <Typography className="mdx-event-card__label" variant="body2">
+            Date
+          </Typography>
           <Typography variant="body2">{date}</Typography>
         </div>
         <div className="mdx-event-card__info">
-          <Typography variant="body2">Location</Typography>
+          <Typography className="mdx-event-card__label" variant="body2">
+            Location
+          </Typography>
           <Typography variant="body2">{location}</Typography>
         </div>
       </div>
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventHeader/EventHeader.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventHeader/EventHeader.scss
new file mode 100644
index 0000000..6c433be
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventHeader/EventHeader.scss
@@ -0,0 +1,26 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-event-header__container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  h1 {
+    margin-bottom: 0 !important;
+  }
+}
+
+@include utils.responsive('sm', 'down') {
+  .mdx-event-header__container {
+    h1 {
+      font-size: 24px !important;
+      line-height: 32px !important;
+    }
+
+    p {
+      font-size: 14px !important;
+      line-height: 20px !important;
+    }
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventHeader/EventHeader.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventHeader/EventHeader.tsx
new file mode 100644
index 0000000..ec4d40d
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventHeader/EventHeader.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import './EventHeader.scss'
+import { Typography } from '@acid-info/lsd-react'
+
+export type EventHeaderProps = React.HTMLProps<HTMLAnchorElement> & {
+  title: string
+  description: string
+}
+
+export const EventHeader: React.FC<EventHeaderProps> = ({
+  title,
+  description,
+}) => {
+  return (
+    <div className="mdx-event-header__container">
+      <Typography
+        variant="h1"
+        component="h1"
+        className="mdx-event-header__label"
+      >
+        {title}
+      </Typography>
+      <Typography variant="subtitle1" className="mdx-event-header__content">
+        {description}
+      </Typography>
+    </div>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventHeader/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/EventHeader/index.ts
new file mode 100644
index 0000000..b654b3b
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventHeader/index.ts
@@ -0,0 +1 @@
+export * from './EventHeader'
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/EventInfo.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/EventInfo.scss
index e7f8ccb..7470b1d 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/EventInfo.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventInfo/EventInfo.scss
@@ -4,7 +4,6 @@
 .mdx-event-info__container {
   display: flex;
   flex-direction: column;
-  gap: 16px;
   padding: 16px;
   gap: 16px;
   flex: 1 0 0;
@@ -15,3 +14,7 @@
   border-top: 1px solid rgba(var(--lsd-border-primary));
   background: rgba(var(--lsd-theme-primary), 0.05);
 }
+
+.mdx-event-info__label {
+  opacity: 0.6;
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.scss
index cdd8105..b4b6732 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.scss
@@ -6,3 +6,11 @@
     margin-bottom: 16px;
   }
 }
+
+@include utils.responsive('sm', 'down') {
+  .mdx-event-profile-list__container {
+    .mdx-grid > .mdx-grid__content {
+      gap: 24px !important;
+    }
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.tsx
index ad3a454..62446ce 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/EventProfileList/EventProfileList.tsx
@@ -29,7 +29,7 @@ export const EventProfileList: React.FC<EventProfileListProps> = ({
         <Typography variant="subtitle1">{description}</Typography>
       )}
       <Box top={40}>
-        <Grid xs={{ cols: 1, gap: '80px 16px' }} md={{ cols: 3 }}>
+        <Grid xs={{ cols: 1, gap: '16px' }} md={{ cols: 3 }}>
           {data.map((event, index) => (
             <Grid.Item xs={1} key={index}>
               <EventProfile {...event} />
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
index ed3ccff..b65712d 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
@@ -38,3 +38,4 @@ export * from './EventProfile'
 export * from './EventProfileList'
 export * from './EventCTA'
 export * from './EventCTASection'
+export * from './EventHeader'
diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss
index a457d9e..aec18c3 100644
--- a/packages/logos-docusaurus-theme/src/client/css/custom.scss
+++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss
@@ -851,6 +851,12 @@ main[itemtype*='Blog'] {
   .navbar__left {
     display: flex;
   }
+
+  .events-cta-sections {
+    .mdx-grid__content {
+      gap: 64px !important;
+    }
+  }
 }
 
 @include utils.responsive('lg', 'up') {