Merge pull request #726 from lexicongovernance/main

723 multiple fixes (#724)
lexicongovernance · Aug 2, 2024 · 349737c · 349737c
2 parents a46c5d0 + 056fa37
commit 349737c
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 32 deletions.
diff --git a/packages/berlin/src/components/cycles/Cycles.tsx b/packages/berlin/src/components/cycles/Cycles.tsx
@@ -25,7 +25,7 @@ function Cycles({ cycles, errorMessage, eventId }: CyclesProps) {
       {cycles?.length ? (
         cycles.map((cycle) => (
           <article
-            className="border-secondary flex w-full flex-col gap-4 border p-4"
+            className="border-secondary flex w-full cursor-pointer flex-col gap-4 border p-4"
             key={cycle.id}
             onClick={() => handleCycleClick(cycle.id)}
           >

diff --git a/packages/berlin/src/components/events/Events.tsx b/packages/berlin/src/components/events/Events.tsx
@@ -1,11 +1,12 @@
-import Markdown from 'react-markdown';
+// React and third-party libraries
+import { useNavigate } from 'react-router-dom';
 
+// API
 import { GetEventResponse } from 'api';
 
+// Components
 import { Body } from '../typography/Body.styled';
 import { Subtitle } from '../typography/Subtitle.styled';
-import Link from '../link';
-import { useNavigate } from 'react-router-dom';
 
 type EventsProps = {
   events: GetEventResponse[] | undefined;
@@ -29,20 +30,6 @@ export default function Events({ events, errorMessage }: EventsProps) {
         >
           <section className="flex flex-col gap-4 p-4">
             <Subtitle>{event.name}</Subtitle>
-            {event.description && (
-              <Markdown
-                components={{
-                  a: ({ node, ...props }) => <Link to={props.href ?? ''}>{props.children}</Link>,
-                  p: ({ node, ...props }) => (
-                    <Body className="truncate" style={{ whiteSpace: 'nowrap' }}>
-                      {props.children}
-                    </Body>
-                  ),
-                }}
-              >
-                {event.description}
-              </Markdown>
-            )}
           </section>
           {event.imageUrl && (
             <section className="h-40 w-full">

diff --git a/packages/berlin/src/components/header/Header.tsx b/packages/berlin/src/components/header/Header.tsx
@@ -121,7 +121,7 @@ const HeaderLinks = ({ user }: { user: GetUserResponse }) => {
 
       const eventBaseLinks = [
         {
-          title: 'My Proposals',
+          title: 'Registration',
           link: `/events/${eventId}/register`,
         },
         {

diff --git a/packages/berlin/src/pages/Event.tsx b/packages/berlin/src/pages/Event.tsx
@@ -56,18 +56,31 @@ function Event() {
     <>
       <Onboarding steps={eventSteps} type="event" />
       <FlexColumn $gap="2rem" className="event">
-        <BackButton />
-        <section className="flex flex-col gap-4">
-          <Subtitle>{event?.name}</Subtitle>
-          {event?.description && (
-            <Markdown
-              components={{
-                a: ({ node, ...props }) => <Link to={props.href ?? ''}>{props.children}</Link>,
-                p: ({ node, ...props }) => <Body>{props.children}</Body>,
-              }}
-            >
-              {event.description}
-            </Markdown>
+        <section className="grid grid-cols-3 gap-x-4">
+          <div className={`${event?.imageUrl ? 'col-span-2' : 'col-span-3'} flex flex-col gap-4`}>
+            <BackButton />
+            <Subtitle>{event?.name}</Subtitle>
+            {event?.description && (
+              <div>
+                <Markdown
+                  components={{
+                    a: ({ node, ...props }) => <Link to={props.href ?? ''}>{props.children}</Link>,
+                    p: ({ node, ...props }) => <Body>{props.children}</Body>,
+                  }}
+                >
+                  {event.description}
+                </Markdown>
+              </div>
+            )}
+          </div>
+          {event?.imageUrl && (
+            <div className="col-span-1">
+              <img
+                src={event?.imageUrl}
+                alt={`${event.name} image`}
+                className="h-full w-full object-cover object-center"
+              />
+            </div>
           )}
         </section>
         <section className="flex w-full flex-col justify-between gap-2 md:flex-row md:items-center">

diff --git a/packages/berlin/src/pages/Events.tsx b/packages/berlin/src/pages/Events.tsx
@@ -41,7 +41,7 @@ function Events() {
         <Title>Events</Title>
         <Tabs.TabsHeader className="tabs" tabNames={tabNames} onTabChange={setActiveTab} />
       </section>
-      <section className="grid w-full grid-cols-2 gap-4">
+      <section className="grid w-full gap-4 md:grid-cols-2">
         <Tabs.TabsManager tabs={tabs} tab={activeTab} fallback={'Tab not found'} />
       </section>
     </FlexColumn>