From e2db5cf1fb034cc3db80a6935f54b76e2ce69b38 Mon Sep 17 00:00:00 2001
From: Magnus Brecke <magnbrec@stud.ntnu.no>
Date: Fri, 27 Sep 2024 12:16:00 +0200
Subject: [PATCH] Fix requested changes

---
 app/components/EventItem/index.tsx  | 13 +++----------
 app/components/EventItem/styles.css | 14 ++++++++------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/app/components/EventItem/index.tsx b/app/components/EventItem/index.tsx
index c5ebc05183..b2826ad1c8 100644
--- a/app/components/EventItem/index.tsx
+++ b/app/components/EventItem/index.tsx
@@ -1,5 +1,4 @@
-import { Button, Flex, Icon, Image, LinkButton } from '@webkom/lego-bricks';
-import cx from 'classnames';
+import { Flex, Icon, Image } from '@webkom/lego-bricks';
 import {
   AlarmClock,
   Calendar,
@@ -19,7 +18,6 @@ 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';
 
@@ -129,7 +127,6 @@ const EventItem = ({
   showTags = true,
   eventStyle,
 }: EventItemProps): ReactNode => {
-  const [hover, setHover] = useState(false);
   switch (eventStyle) {
     case 'extra-compact':
       return (
@@ -206,12 +203,10 @@ const EventItem = ({
       return (
         <Link
           to={`/events/${event.slug}`}
-          onMouseEnter={() => setHover(true)}
-          onMouseLeave={() => setHover(false)}
           style={{
             borderColor: colorForEventType(event.eventType),
           }}
-          className={cx(styles.eventItem, hover && styles.eventItemHover)}
+          className={styles.eventItem}
         >
           <div>
             <h3 className={styles.eventItemTitle}>{event.title}</h3>
@@ -226,9 +221,7 @@ const EventItem = ({
             )}
           </div>
 
-          <Flex
-            className={cx(styles.companyLogo, hover && styles.companyLogoHover)}
-          >
+          <Flex className={styles.companyLogo}>
             {event.cover && (
               <Image
                 alt="Forsidebilde"
diff --git a/app/components/EventItem/styles.css b/app/components/EventItem/styles.css
index 1dc9552538..75314c236e 100644
--- a/app/components/EventItem/styles.css
+++ b/app/components/EventItem/styles.css
@@ -1,5 +1,6 @@
 .eventItem {
   min-height: 50px;
+  padding: var(--spacing-xs);
   padding-left: var(--spacing-md);
   border-left: 4px solid transparent;
   margin-bottom: var(--spacing-md);
@@ -9,10 +10,11 @@
   transition: var(--easing-fast);
 }
 
-.eventItemHover {
+.eventItem:hover {
   background-color: var(--additive-background);
-  border-top-right-radius: 10px;
-  border-bottom-right-radius: 10px;
+  /* border-top-right-radius: var(--border-radius-sm);
+  border-bottom-right-radius: var(--border-radius-sm); */
+  border-radius: var(--border-radius-sm);
 }
 
 .eventItemCompact {
@@ -55,12 +57,12 @@
   max-height: 80px;
   object-fit: contain;
   background: white;
-  margin: 5px 10px 5px 0;
+  margin: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 0;
   transition: var(--easing-fast);
 }
 
-.companyLogoHover img {
-  border-radius: 10px;
+.eventItem:hover .companyLogo img {
+  border-radius: var(--border-radius-sm);
 }
 
 .companyLogoCompact img {