mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
mawkone
2026-06-08 12:01:14 -07:00
parent 42fa2594e3
commit db26a51ea3
1 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
vibn-frontend/_onboarding/onboarding-entrepreneur.tsx
View File

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