Make banner a single static image and update style

The banner used to be able to have multiple images along with buttons
you could swipe through. Since the banner seemed to only ever include
one image and no buttons, making it a static image allows to simplify
the code by removing EventImage component and containedEventImage button
variants, since they weren't used anywhere else.

Author: julisod

frontend/src/components/generic/BannerCarousel/index.js

@@ -1,48 +1,37 @@
-import { Box } from '@mui/material'
-import EventImage from 'components/generic/EventImage'
 import React, { useState, useEffect } from 'react'
-import { SwipeableViews } from 'components/animated/SwipeableViews'
+
+import { Box } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+import Image from 'components/generic/Image'
 import BannerService from 'services/banner'
 
-const BannerCarousel = (event = null) => {
+const Banner = styled(Box)({
+    maxHeight: '465px',
+    display: 'flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+})
+
+// This used to have SwipeableViews, that's why it's called a carousel
+const BannerCarousel = () => {
     const [pictures, setPictures] = useState([])
-    const [index, setIndex] = useState(0)
 
     useEffect(() => {
         BannerService.getAllBanners().then(banners => {
             if (banners) setPictures(banners)
         })
     }, [])
     return (
-        <>
-            <Box className="relative mt-0">
-                <SwipeableViews
-                    enableMouseEvents
-                    index={index}
-                    onChangeIndex={setIndex}
-                    interval={5000}
-                    disabled
-                >
-                    {pictures?.map(picture => (
-                        <Box
-                            key={picture._id}
-                            className="bg-black flex flex-col items-center justify-center h-full max-h-[465px]"
-                        >
-                            <EventImage
-                                className="w-full h-full max-h-[465px] object-contain max-w-[1440px]"
-                                publicId={picture.icon}
-                                defaultImage={require('assets/images/default_cover_image.png')}
-                                transformation={{
-                                    width: 1440,
-                                    height: 465,
-                                }}
-                                buttons={picture.buttons}
-                            />
-                        </Box>
-                    ))}
-                </SwipeableViews>
-            </Box>
-        </>
+        <Banner>
+            {pictures?.map(picture => (
+                <Image
+                    publicId={picture.icon}
+                    defaultImage={require('assets/images/default_cover_image.png')}
+                    key={picture._id}
+                />
+            ))}
+        </Banner>
     )
 }
 

frontend/src/components/generic/Button/index.js

@@ -99,20 +99,6 @@ const getButton = (color, variant, strong) => {
                     },
                 }
             }
-            case 'containedEventImage': {
-                return {
-                    backgroundColor: colorPalette.main,
-                    color: colorPalette.contrastText,
-                    border: `2px solid ${colorPalette.main}`,
-                    height: '2.6em',
-                    borderRadius: '28px',
-                    fontSize: '1.3em',
-                    margin: theme.spacing(2),
-                    '&:hover': {
-                        backgroundColor: colorPalette.main,
-                    },
-                }
-            }
             case 'outlined': {
                 return {
                     backgroundColor: 'white',

frontend/src/components/generic/EventImage/index.js

@@ -54,13 +54,6 @@ const variantStyles = (variant, color) => {
                 'disabled:bg-current disabled:text-white disabled:opacity-50': true,
                 [`disabled:bg-${color}-700`]: true,
             }
-        case 'containedEventImage':
-            return {
-                'bg-current text-white border-2 border-current h-10 rounded-full text-lg mt-2': true,
-                [`bg-${color}-600 border-${color}-600 hover:bg-${color}-700`]: true,
-                'disabled:bg-current disabled:text-white disabled:opacity-50': true,
-                [`disabled:bg-${color}-700`]: true,
-            }
         case 'jOutlined':
             return {
                 'bg-transparent text-current border-2 rounded-full px-4 py-1': true,