Merge pull request #1008 from julisod/pre-STAG-node-22

Make banner a single static image and update styles

Author: onnilinnala

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,