Updated Design of Device Details and List

This commit is contained in:
2025-11-07 16:42:59 -07:00
parent be0a03ab61
commit d0cd69c540
2 changed files with 8 additions and 12 deletions

View File

@@ -900,9 +900,9 @@ export default function DeviceDetails({ device, onBack }) {
px: compact ? 1.5 : 2.4, px: compact ? 1.5 : 2.4,
py: compact ? 1.4 : 2, py: compact ? 1.4 : 2,
borderRadius: compact ? 2 : 3, borderRadius: compact ? 2 : 3,
border: "1px solid rgba(255,255,255,0.08)", border: 'none',
background: MAGIC_UI.panelBg, background: 'transparent',
boxShadow: "0 20px 45px rgba(2,6,23,0.5)", boxShadow: 'none',
minWidth: compact ? 170 : 220, minWidth: compact ? 170 : 220,
minHeight: compact ? 110 : 140, minHeight: compact ? 110 : 140,
display: "flex", display: "flex",
@@ -959,7 +959,7 @@ export default function DeviceDetails({ device, onBack }) {
p: 2, p: 2,
borderRadius: 3, borderRadius: 3,
border: `1px solid ${MAGIC_UI.panelBorder}`, border: `1px solid ${MAGIC_UI.panelBorder}`,
background: MAGIC_UI.panelBg, background: 'transparent',
boxShadow: "0 18px 40px rgba(2,6,23,0.55)", boxShadow: "0 18px 40px rgba(2,6,23,0.55)",
mb: 1.5, mb: 1.5,
display: "flex", display: "flex",
@@ -1061,7 +1061,7 @@ export default function DeviceDetails({ device, onBack }) {
sx={{ sx={{
borderRadius: 3, borderRadius: 3,
border: `1px solid ${MAGIC_UI.panelBorder}`, border: `1px solid ${MAGIC_UI.panelBorder}`,
background: MAGIC_UI.panelBg, background: 'transparent',
boxShadow: MAGIC_UI.glow, boxShadow: MAGIC_UI.glow,
p: { xs: 2, md: 3 }, p: { xs: 2, md: 3 },
display: "flex", display: "flex",
@@ -1577,6 +1577,7 @@ export default function DeviceDetails({ device, onBack }) {
flexWrap: "wrap", flexWrap: "wrap",
gap: 1.2, gap: 1.2,
justifyContent: { xs: "flex-start", lg: "center" }, justifyContent: { xs: "flex-start", lg: "center" },
"& > *": { background: "transparent !important", border: "none !important", boxShadow: "none !important", borderRadius: 0 },
}} }}
> >
<MetricCard <MetricCard
@@ -1620,7 +1621,7 @@ export default function DeviceDetails({ device, onBack }) {
borderRadius: 2, borderRadius: 2,
width: 38, width: 38,
height: 38, height: 38,
backgroundColor: "rgba(4,7,17,0.6)", backgroundColor: "transparent",
}} }}
> >
<MoreHorizIcon fontSize="small" /> <MoreHorizIcon fontSize="small" />

View File

@@ -1561,12 +1561,7 @@ export default function DeviceList({
elevation={0} elevation={0}
> >
<Box sx={{ position: "relative", zIndex: 1, p: { xs: 2, md: 3 }, pb: 2 }}> <Box sx={{ position: "relative", zIndex: 1, p: { xs: 2, md: 3 }, pb: 2 }}>
<Box <Box sx={{ borderRadius: 0, border: 'none', background: 'transparent', boxShadow: 'none',
sx={{
borderRadius: 4,
border: `1px solid ${MAGIC_UI.panelBorder}`,
background: MAGIC_UI.panelBg,
boxShadow: MAGIC_UI.glow,
p: { xs: 2, md: 3 }, p: { xs: 2, md: 3 },
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",