adapt pictures for EventCards

src/components/Header/Header.module.css

@@ -14,7 +14,11 @@
     position: relative;
     justify-content: space-between;
 }
-
+.profileImg{
+    width:40px;
+    height:40px;
+    border-radius: 50%;
+}
 
 
 .activeHeaderContent {

src/components/Header/Header.tsx

@@ -23,7 +23,9 @@ function Header() {
     const [mobileMenu, setMobileMenu] = useState<boolean>(false);
     const [notifications, setNotifications] = useState<Notification[]>([]);
     const notificationRef = useRef<HTMLDivElement>(null);
-
+    const profileImageUrl = user?.profile_photo_path
+        ? `${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`
+        : "/person.svg";
     useEffect(() => {
         if (!user) return;
 
@@ -140,7 +142,7 @@ function Header() {
                         <Link to="/profile" className={styles.profileLink}>
                             <img
                                 className={styles.profileImg}
-                                src={user?.profile_photo_path || "/person.svg"}
+                                src={profileImageUrl}
                                 alt="profile"
                             />
                         </Link>

src/pages/Events/components/Event/Event.module.css

@@ -24,23 +24,22 @@
 }
 
 .eventImageDiv {
-    display: flex;
+    width: 10rem;
-    align-items: center;
+    height: 7rem;
-    justify-content: center;
-    margin-right: 1rem;
-    width: auto;
-    height: 6rem;
     flex-shrink: 0;
+    overflow: hidden;
+    border-radius: 20px;
+    margin-right: 1rem;
 }
 
 .eventImage {
-    max-width: 100%;
+    width: 100%;
-    max-height: 100%;
+    height: 100%;
-    object-fit: contain;
+    object-fit: cover;
-    border-radius: 20px;
 }
 
 
+
 .eventContent {
     display: flex;
     width: 100%;