Merge pull request #28 from opengento/program

Program
opengento · Feb 4, 2025 · ee49198 · ee49198
2 parents a5c45fb + 48a552c
commit ee49198
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 29 deletions.
diff --git a/src/components/ContentMedia/ContentMedia.tsx b/src/components/ContentMedia/ContentMedia.tsx
@@ -12,15 +12,16 @@ interface ContentMediaProps {
 }
 
 const ContentMedia = ({
-                        children,
-                        imageUrl,
-                        imagePosition = "left",
-                        imageWidth = "50%",
-                        title,
-                        titleUnderlineColor,
-                      }: ContentMediaProps) => {
+  children,
+  imageUrl,
+  imagePosition = "left",
+  imageWidth = "50%",
+  title,
+  titleUnderlineColor,
+}: ContentMediaProps) => {
   return (
-    <div className="content-media relative rounded-xl overflow-hidden pt-2.5 bg-[url(/images/pattern_top.svg)]">
+    <div className="content-media relative rounded-xl overflow-hidden">
+      <div className="absolute inset-0 h-2.5 bg-[url(/images/pattern_top.svg)]" />
       <div className="flex flex-col gap-6 md:gap-12 bg-white py-6 px-4 md:p-12">
         {title && (
           <div className="content-media__title">
@@ -43,10 +44,12 @@ const ContentMedia = ({
         >
           {imageUrl && (
             <div
-              className="content-media__image rounded-xl overflow-hidden w-full"
-              style={{flex: `0 0 ${imageWidth}`}}
+              className="content-media__image w-full"
+              style={{
+                flex: `0 0 ${imageWidth}`,
+              }}
             >
-              <div className="relative w-full aspect-[4/3] md: aspect-none md:h-full">
+              <div className="relative w-full aspect-[4/3] rounded-xl overflow-hidden h-min">
                 <Image
                   src={imageUrl}
                   alt="Content Media"

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -47,7 +47,7 @@ const Modal = ({ isOpen, onClose, children }: ModalProps) => {
             isOpen ? "translate-x-0" : "translate-x-full"
           }`}
         >
-          <div className="relative h-full overflow-y-auto px-6 py-10 md:p-8 bg-camel ">
+          <div className="relative h-full overflow-y-auto px-6 py-14 md:px-8 bg-camel ">
             <button
               onClick={onClose}
               className="absolute top-4 right-4 p-2 rounded bg-purple"

diff --git a/src/components/Person/PersonPopInContent.tsx b/src/components/Person/PersonPopInContent.tsx
@@ -7,14 +7,14 @@ import Typography from "@/components/Typography/Typography";
 
 interface PersonPopInContentProps {
   person: PersonProps;
-  children?: ReactNode
+  children?: ReactNode;
 }
 
 const PersonPopInContent = ({ person, children }: PersonPopInContentProps) => {
   return (
     <div className="person-popin-content flex flex-col gap-6">
       {/* Person info section */}
-      <div className="flex gap-6">
+      <div className="flex flex-col md:flex-row gap-6">
         <div className="relative">
           <Image
             src={person.photo}
@@ -24,16 +24,16 @@ const PersonPopInContent = ({ person, children }: PersonPopInContentProps) => {
             height={235}
           />
           {person.linkedin && (
-          <div className="absolute bottom-2 left-2 flex gap-2 text-primary">
-            <Link
-              className="flex items-center justify-center w-10 h-10 bg-white rounded-full"
-              href={person.linkedin}
-              target="_blank"
-              rel="noopener"
-            >
-              <FaLinkedinIn size={16} />
-            </Link>
-          </div>
+            <div className="absolute bottom-2 left-2 flex gap-2 text-primary">
+              <Link
+                className="flex items-center justify-center w-10 h-10 bg-white rounded-full"
+                href={person.linkedin}
+                target="_blank"
+                rel="noopener"
+              >
+                <FaLinkedinIn size={16} />
+              </Link>
+            </div>
           )}
         </div>
         <div className="flex flex-col-reverse">

diff --git a/src/components/Speakers/Session/Session.tsx b/src/components/Speakers/Session/Session.tsx
@@ -15,10 +15,14 @@ interface Session {
   onPopInClick?: () => void;
 }
 
-const Session = ({ session, showAddToCalendar = true, onPopInClick }: Session) => {
+const Session = ({
+  session,
+  showAddToCalendar = true,
+  onPopInClick,
+}: Session) => {
   const { t } = useTranslation(["speakers"]);
   return (
-    <div className="flex flex-col md:flex-row justify-between">
+    <div className="flex flex-col md:flex-row justify-between gap-6">
       <div className="flex flex-col gap-6">
         <div className="flex flex-col gap-2">
           <Typography color="dark" variant="h4" weight="semibold">

diff --git a/src/components/Speakers/Session/SessionPopInContent.tsx b/src/components/Speakers/Session/SessionPopInContent.tsx
@@ -14,11 +14,11 @@ const SessionPopInContent = ({ session }: { session: SessionProps }) => {
     .filter((speaker) => session.speakers.includes(speaker.id));
   return (
     <div className="session-pop-in-content flex flex-col gap-6">
-      <Session session={session}/>
+      <Session session={session} showAddToCalendar={false} />
       <div className="flex flex-col rounded-xl bg-white p-6 gap-6">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {speakers.map((speaker) => (
-            <Person person={speaker} appearance="program" key={speaker.id}/>
+            <Person person={speaker} appearance="program" key={speaker.id} />
           ))}
         </div>
         <Typography variant="body1">{session.description}</Typography>

diff --git a/src/components/Speakers/Speakers.tsx b/src/components/Speakers/Speakers.tsx
@@ -11,7 +11,8 @@ const Speakers = ({ data }: { data: SpeakersProps }) => {
     <Container size="large">
       <div className="speakers flex flex-col py-8 md:py-12 gap-12">
         <SpeakersList speakers={data.speakers} />
-        <div className="flex flex-col md:flex-row bg-secondary pt-3 md:pl-3 md:pt-0 rounded-xl overflow-hidden">
+        <div className="flex flex-col md:flex-row rounded-xl overflow-hidden relative">
+          <div className="absolute inset-0 h-3 md:h-full md:w-3 bg-secondary" />
           <div className="bg-white flex-1 flex flex-col md:flex-row">
             <div className="flex flex-col gap-6 flex-1 py-8 px-6 md:py-12 md:px-16">
               <Typography