ENH: UI: paper material for cards (#1261)

xorbitsai · Apr 11, 2024 · a7f0c3b · a7f0c3b
1 parent ace5428
commit a7f0c3b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/xinference/web/ui/src/scenes/launch_model/modelCard.js b/xinference/web/ui/src/scenes/launch_model/modelCard.js
@@ -28,6 +28,7 @@ import {
   Stack,
   TextField,
 } from '@mui/material'
+import Paper from '@mui/material/Paper'
 import React, { useContext, useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
@@ -327,7 +328,7 @@ const ModelCard = ({
 
   // Set two different states based on mouse hover
   return (
-    <Box
+    <Paper
       style={hover ? styles.containerSelected : styles.container}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
@@ -336,6 +337,7 @@ const ModelCard = ({
           setSelected(true)
         }
       }}
+      elevation={hover ? 24 : 4}
     >
       {modelType === 'LLM' ? (
         <Box style={styles.descriptionCard}>
@@ -951,7 +953,7 @@ const ModelCard = ({
         message="Please fill in the added custom parameters completely!"
         key={'top' + 'center'}
       />
-    </Box>
+    </Paper>
   )
 }
 

diff --git a/xinference/web/ui/src/scenes/launch_model/styles/modelCardStyle.js b/xinference/web/ui/src/scenes/launch_model/styles/modelCardStyle.js
@@ -4,7 +4,6 @@ const styles = {
     position: 'relative',
     width: '300px',
     height: '300px',
-    border: '1px solid #ddd',
     borderRadius: '20px',
   },
   containerSelected: {
@@ -13,17 +12,14 @@ const styles = {
     position: 'relative',
     width: '300px',
     height: '300px',
-    border: '1px solid #ddd',
     borderRadius: '20px',
-    boxShadow: '0 0 10px #ccc',
   },
   descriptionCard: {
     position: 'relative',
     top: '-1px',
     left: '-1px',
     width: '300px',
     height: '300px',
-    border: '1px solid #ddd',
     padding: '20px',
     borderRadius: '20px',
   },