design: double card sizes to 300px and lay out in a 2x2 grid

This commit is contained in:
2026-06-08 12:01:14 -07:00
parent 851690e5de
commit 9a9742b613

View File

@@ -240,15 +240,16 @@ function LayoutPreview({ styleId }: { styleId: string }) {
</div>
);
// Common high-fidelity dashboard body matching page-dashboard.jsx
// Common high-fidelity dashboard body matching page-dashboard.jsx
const renderDashboardMockup = () => (
<div
style={{
flex: 1,
padding: "8px 10px",
padding: "12px 14px",
display: "flex",
flexDirection: "column",
gap: 5,
gap: 8,
background: c.bg,
color: c.text,
overflow: "hidden",
@@ -261,19 +262,19 @@ function LayoutPreview({ styleId }: { styleId: string }) {
justifyContent: "space-between",
alignItems: "flex-end",
borderBottom: `1px solid ${c.border}`,
paddingBottom: 4,
paddingBottom: 6,
width: "100%",
}}
>
<div>
<span
style={{
fontSize: 3.5,
fontSize: 5,
textTransform: "uppercase",
color: c.muted,
letterSpacing: "0.04em",
display: "block",
marginBottom: 0.5,
marginBottom: 1,
fontWeight: 600,
}}
>
@@ -281,7 +282,7 @@ function LayoutPreview({ styleId }: { styleId: string }) {
</span>
<span
style={{
fontSize: 7.5,
fontSize: 11.5,
fontWeight: 700,
letterSpacing: "-0.01em",
display: "block",
@@ -292,46 +293,46 @@ function LayoutPreview({ styleId }: { styleId: string }) {
</span>
<span
style={{
fontSize: 4,
fontSize: 6,
color: c.subtext,
display: "block",
marginTop: 1,
marginTop: 2,
}}
>
3 deals moved stage today · 12 unread in Inbox · 1 task overdue
</span>
</div>
<div style={{ display: "flex", gap: 3, paddingBottom: 1 }}>
<div style={{ display: "flex", gap: 4, paddingBottom: 1 }}>
<div
style={{
width: 22,
height: 7,
borderRadius: 2,
width: 38,
height: 11,
borderRadius: 3,
background: c.panel,
border: `1px solid ${c.border}`,
display: "flex",
alignItems: "center",
paddingLeft: 2,
paddingLeft: 3,
}}
>
<div
style={{ height: 2, width: 12, background: c.text, opacity: 0.6 }}
style={{ height: 2, width: 22, background: c.text, opacity: 0.6 }}
/>
</div>
<div
style={{
width: 14,
height: 7,
borderRadius: 2,
width: 22,
height: 11,
borderRadius: 3,
background: c.panel,
border: `1px solid ${c.border}`,
}}
/>
<div
style={{
width: 18,
height: 7,
borderRadius: 2,
width: 28,
height: 11,
borderRadius: 3,
background: isDark ? "#ffffff" : "#1a1a1a",
}}
/>
@@ -2021,7 +2022,7 @@ function EntrepStyle({ productType, value, onChange }) {
}))}
value={value}
onChange={onChange}
columns={styles.length === 3 ? 3 : 2}
columns={2}
minimal
/>
</>