design: double card sizes to 300px and lay out in a 2x2 grid
This commit is contained in:
@@ -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
|
||||
/>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user