Add hover animation to eventList

webkom · Sep 25, 2024 · 1435ca0 · 1435ca0
1 parent e219524
commit 1435ca0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/app/components/EventItem/index.tsx b/app/components/EventItem/index.tsx
@@ -1,4 +1,5 @@
-import { Flex, Icon, Image } from '@webkom/lego-bricks';
+import { Button, Flex, Icon, Image, LinkButton } from '@webkom/lego-bricks';
+import cx from 'classnames';
 import {
   AlarmClock,
   Calendar,
@@ -18,6 +19,7 @@ import { eventAttendanceAbsolute } from 'app/utils/eventStatus';
 import styles from './styles.css';
 import type { ListEvent } from 'app/store/models/Event';
 import type { ReactNode } from 'react';
+import { useState } from 'react';
 
 export type EventStyle = 'default' | 'extra-compact' | 'compact';
 
@@ -127,6 +129,7 @@ const EventItem = ({
   showTags = true,
   eventStyle,
 }: EventItemProps): ReactNode => {
+  const [hover, setHover] = useState(false);
   switch (eventStyle) {
     case 'extra-compact':
       return (
@@ -201,17 +204,18 @@ const EventItem = ({
     case 'default':
     default:
       return (
-        <div
+        <Link
+          to={`/events/${event.slug}`}
+          onMouseEnter={() => setHover(true)}
+          onMouseLeave={() => setHover(false)}
           style={{
             borderColor: colorForEventType(event.eventType),
           }}
-          className={styles.eventItem}
+          className={cx(styles.eventItem, hover && styles.eventItemHover)}
         >
           <div>
-            <Link to={`/events/${event.slug}`}>
-              <h3 className={styles.eventItemTitle}>{event.title}</h3>
-              {event.totalCapacity > 0 && <Attendance event={event} />}
-            </Link>
+            <h3 className={styles.eventItemTitle}>{event.title}</h3>
+            {event.totalCapacity > 0 && <Attendance event={event} />}
             <TimeStartAndRegistration event={event} />
             {showTags && (
               <Flex wrap>
@@ -222,7 +226,9 @@ const EventItem = ({
             )}
           </div>
 
-          <Flex className={styles.companyLogo}>
+          <Flex
+            className={cx(styles.companyLogo, hover && styles.companyLogoHover)}
+          >
             {event.cover && (
               <Image
                 alt="Forsidebilde"
@@ -231,7 +237,7 @@ const EventItem = ({
               />
             )}
           </Flex>
-        </div>
+        </Link>
       );
   }
 };

diff --git a/app/components/EventItem/styles.css b/app/components/EventItem/styles.css
@@ -6,6 +6,13 @@
   display: flex;
   justify-content: space-between;
   line-height: 1.3;
+  transition: var(--easing-fast);
+}
+
+.eventItemHover {
+  background-color: var(--additive-background);
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
 }
 
 .eventItemCompact {
@@ -48,6 +55,12 @@
   max-height: 80px;
   object-fit: contain;
   background: white;
+  margin: 5px 10px 5px 0;
+  transition: var(--easing-fast);
+}
+
+.companyLogoHover img {
+  border-radius: 10px;
 }
 
 .companyLogoCompact img {