Fix publisher landing page UI

portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/Landing/Menus/DesignAssistantMenu.jsx

@@ -17,35 +17,37 @@
  * under the License.
  */
 import React from 'react';
-import { Box, Button, Typography, useTheme } from '@mui/material';
-import Paper from '@mui/material/Paper';
+import { Box, Button, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { app } from 'Settings';
 import { isRestricted } from 'AppData/AuthManager';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import { styled } from '@mui/material/styles';
+
+const PREFIX = 'DesignAssistantMenu';
+
+const classes = {
+    root: `${PREFIX}-root`,
+};
+
+const StyledBox = styled(Box)(({ theme }) => ({
+    [`&`]: {
+        display: 'flex',
+        justifyContent: 'center', 
+        alignItems: 'center',
+        border: '1px solid #e5e5e5',
+        backgroundColor: '#fff',
+        padding: theme.spacing(3),
+        borderRadius: theme.spacing(1),
+    },
+}));
 
 const DesignAssistantMenu = () => {
-    const theme = useTheme();    
-    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
-    const isMediumScreen = useMediaQuery(theme.breakpoints.between('md', 'lg'));
 
     return (
-        <Paper
-            square={false}
-            elevation={4}
-            sx={{
-                maxWidth: isSmallScreen ? 250 : isMediumScreen ? 400 : 500,
-                height: isSmallScreen ? 140 : isMediumScreen ? 150 : 140, 
-                display: 'flex',
-                justifyContent: 'center', alignItems: 'center',
-                transition: 'all 0.3s ease-in-out',
-                padding: isSmallScreen ? 1 : 2,
-                borderRadius: isSmallScreen ? 2 : 4,
-            }}
-        >
-            <Box p={1} border={0} borderRadius={1}
-                sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+        <StyledBox>
+            <Box
+                sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', }}>
                 <img
                     alt='API Design Assistant'
                     src={`${app.context}/site/public/images/ai/APIchatassistantImageWithColour.svg`}
@@ -77,7 +79,7 @@ const DesignAssistantMenu = () => {
                     </Button>
                 </Box>
             </Box>
-        </Paper>
+        </StyledBox>
     );
 };
 

portals/publisher/src/main/webapp/source/src/app/components/Apis/Listing/Landing/components/LandingMenu.jsx

@@ -6,7 +6,6 @@ import Configurations from 'Config';
 import Fade from '@mui/material/Fade';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
-import { blue } from '@mui/material/colors';
 
 const PREFIX = 'LandingMenu';
 
@@ -23,16 +22,20 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     },
 
     [`& .${classes.boxTransition}`]: {
-        transition: 'box-shadow 0.9s cubic-bezier(.25,.8,.25,1)',
+        transition: '0.5s',
         cursor: 'pointer',
+        border: '1px solid #e5e5e5',
+        '&:hover': {
+            border: '1px solid #ccc',
+        },
     },
 
     [`& .${classes.overlayBox}`]: {
         cursor: 'auto',
         outline: 'none',
-        'border-color': '#f9f9f9', // TODO: take from theme ~tmkb
-        'box-shadow': '0 0 6px 4px #f9f9f9',
-        'border-radius': '5px',
+        backgroundColor: 'rgba(255, 255, 255, 0.75)',
+        backdropFilter: 'blur(5px)',
+        borderRadius: theme.spacing(1),
     },
 
     [`& .${classes.overlayCloseButton}`]: {
@@ -44,17 +47,9 @@ const LandingMenu = (props) => {
     const {
         title, icon, children, id,
     } = props;
-    const [isHover, setIsHover] = useState(false);
     const [isCollapsed, setIsCollapsed] = useState(false);
     const [isFadeOut, setIsFadeOut] = useState(true);
 
-    const onMouseOver = () => {
-        setIsHover(true);
-    };
-    const onMouseOut = () => {
-        setIsHover(false);
-    };
-
     return (
         <StyledGrid
             className={classes.root}
@@ -67,19 +62,13 @@ const LandingMenu = (props) => {
             <Box
                 id={id}
                 className={classes.boxTransition}
-                onMouseOver={onMouseOver}
-                onMouseOut={onMouseOut}
                 bgcolor='background.paper'
                 justifyContent='center'
                 alignItems='center'
                 borderRadius='8px'
-                borderColor='grey.300'
                 display='flex'
-                border={1}
-                boxShadow={isHover ? 4 : 1}
                 minHeight={340}
                 p={1}
-                color={blue[900]}
                 fontSize='h4.fontSize'
                 fontFamily='fontFamily'
                 flexDirection='row'
@@ -103,10 +92,10 @@ const LandingMenu = (props) => {
                             <img
                                 style={{
                                     maxWidth: '100%',
-                                    height: 'auto',
                                     objectFit: 'contain',
-                                    minWidth: '150px',
-                                    minHeight: '150px',
+                                    width: '100px',
+                                    height: '100px',
+
                                 }}
                                 src={Configurations.app.context
                                     + icon}
@@ -122,7 +111,6 @@ const LandingMenu = (props) => {
                     top={5}
                     left={5}
                     height='97%'
-                    bgcolor='#f8f8fb'
                     textAlign='center'
                     width='97%'
                     className={classes.overlayBox}