feat: use database logo as card bg on database page

Author: elainefan331

src/pages/DatabasePage.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography, Button, Container } from "@mui/material";
+import { Box, Typography, Button, Container, Avatar } from "@mui/material";
 import { Colors } from "design/theme";
 import { useAppDispatch } from "hooks/useAppDispatch";
 import { useAppSelector } from "hooks/useAppSelector";
@@ -12,6 +12,7 @@ const DatabasePage: React.FC = () => {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const { registry } = useAppSelector(NeurojsonSelector);
+  console.log("registry", registry);
 
   useEffect(() => {
     dispatch(fetchRegistry());
@@ -70,17 +71,23 @@ const DatabasePage: React.FC = () => {
                 key={db.id}
                 variant="outlined"
                 sx={{
+                  position: "relative", // for overlay positioning
                   padding: 3,
                   textTransform: "none",
                   fontWeight: 600,
                   borderColor: Colors.lightGray,
+                  backgroundImage: db.logo ? `url(${db.logo})` : "none",
+                  backgroundSize: "cover",
+                  backgroundPosition: "center",
                   color: Colors.lightGray,
                   borderRadius: 2,
                   transition: "all 0.3s ease",
-                  height: "100px",
+                  height: "150px",
                   display: "flex",
-                  flexDirection: "column",
+                  flexDirection: "row",
                   justifyContent: "center",
+                  overflow: "hidden", // clip overlay inside
+                  gap: 1,
                   "&:hover": {
                     borderColor: Colors.lightGray,
                     backgroundColor: Colors.secondaryPurple,
@@ -90,9 +97,41 @@ const DatabasePage: React.FC = () => {
                 }}
                 onClick={() => navigate(`${RoutesEnum.DATABASES}/${db.id}`)}
               >
-                <Typography variant="h6" component="span">
-                  {db.name || "Unnamed Database"}
-                </Typography>
+                {/* Overlay for fade/blur */}
+                <Box
+                  sx={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
+                    backgroundColor: "rgba(0,0,0,0.4)", // dark overlay
+                    backdropFilter: "blur(4px)",
+                    zIndex: 1,
+                  }}
+                />
+
+                {/* Text goes above overlay */}
+                <Box sx={{ zIndex: 2, textAlign: "center" }}>
+                  <Typography
+                    variant="h6"
+                    component="span"
+                    sx={{
+                      color: "white",
+                      display: "-webkit-box",
+                      WebkitBoxOrient: "vertical",
+                      WebkitLineClamp: 2, // only show 2 lines
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                    }}
+                    title={db.fullname} // tooltip full name
+                  >
+                    {db.fullname || "Unnamed Database"}
+                  </Typography>
+                  <Typography
+                    sx={{ color: "white" }}
+                  >{`(${db.name})`}</Typography>
+                </Box>
               </Button>
             );
           })}