admin/Race-Nation-Shopify-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor dashboard layout and styles for improved UI consistency

Browse Source
This commit is contained in:
MOHAN 2026-04-14 13:35:59 +05:30
parent a96d8ad3b0
commit d6cfd31a6a
2 changed files with 96 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
app/routes/app._index.jsx
View File

@ -817,41 +817,44 @@ export default function Index() {
</div> </div>
</div> </div>
<div className={styles.grid}> <div className={styles.dashboardShell}>
<div className={styles.primaryColumn}> <div className={styles.controlRow}>
<s-section heading="Store Setup"> <div className={styles.controlCard}>
<div className={styles.panelBody}> <div className={styles.controlHeader}>
<div className={styles.inlineRow}> <div>
<span className={styles.statLabel}>Connection</span> <span className={styles.statLabel}>Store setup</span>
<span <h3 className={styles.controlTitle}>Connection status</h3>
className={`${styles.statusPill} ${
connection?.status === 1 ? styles.success : styles.warning
}`}
>
{connectionState}
</span>
</div> </div>
{connection?.status !== 1 ? ( <span
<div className={`${styles.detailCard} ${styles.warningCard}`}> className={`${styles.statusPill} ${
<p>{connectionMessage}</p> connection?.status === 1 ? styles.success : styles.warning
<div className={styles.actionRow}> }`}
<s-button variant="primary" onClick={openSetup}> >
Connect store {connectionState}
</s-button> </span>
</div>
</div>
) : (
<p>{connectionMessage}</p>
)}
</div> </div>
</s-section> <p className={styles.controlText}>{connectionMessage}</p>
{connection?.status !== 1 ? (
<div className={styles.actionRow}>
<s-button variant="primary" onClick={openSetup}>
Connect store
</s-button>
</div>
) : null}
</div>
<s-section <div className={styles.controlCard}>
heading="Start Product Import" <div className={styles.controlHeader}>
description="Start the full Race Nation product import for this store." <div>
> <span className={styles.statLabel}>Import action</span>
<h3 className={styles.controlTitle}>Start product import</h3>
</div>
</div>
<p className={styles.controlText}>
Launch the full Race Nation import for this store and track the live sync below.
</p>
<fetcher.Form method="post"> <fetcher.Form method="post">
<div className={styles.panelBody}> <div className={styles.controlForm}>
<div className={styles.actionRow}> <div className={styles.actionRow}>
<s-button <s-button
type="submit" type="submit"
@ -863,13 +866,17 @@ export default function Index() {
</div> </div>
</div> </div>
</fetcher.Form> </fetcher.Form>
</s-section> </div>
</div> </div>
<div className={styles.secondaryColumn}> <div className={styles.mainPanel}>
<s-section heading="Import Progress"> <div className={styles.mainPanelHeader}>
<JobSummary job={job} /> <div>
</s-section> <span className={styles.statLabel}>Live dashboard</span>
<h3 className={styles.controlTitle}>Import progress</h3>
</div>
</div>
<JobSummary job={job} />
</div> </div>
</div> </div>
</s-page> </s-page>

60
app/styles/app-dashboard.module.css
View File

@ -84,16 +84,61 @@
line-height: 1.35; line-height: 1.35;
} }
.grid { .dashboardShell {
display: grid; display: grid;
grid-template-columns: 1.15fr 0.85fr; gap: 1.25rem;
gap: 1.5rem;
} }
.primaryColumn, .controlRow {
.secondaryColumn {
display: grid; display: grid;
gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
align-items: stretch;
}
.controlCard,
.mainPanel {
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 24px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}
.controlCard {
padding: 1.1rem 1.2rem;
display: grid;
gap: 0.9rem;
min-height: 10.5rem;
}
.mainPanel {
padding: 1.15rem;
}
.mainPanelHeader,
.controlHeader {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
flex-wrap: wrap;
}
.controlTitle {
margin: 0.18rem 0 0;
font-size: 1.12rem;
color: #0f172a;
}
.controlText {
margin: 0;
color: #475569;
line-height: 1.5;
}
.controlForm {
display: grid;
gap: 0.75rem;
} }
.panelBody { .panelBody {
@ -496,6 +541,7 @@
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.controlRow,
.analyticsGrid, .analyticsGrid,
.statGrid, .statGrid,
.highlightGrid, .highlightGrid,
@ -525,7 +571,7 @@
@media (max-width: 960px) { @media (max-width: 960px) {
.hero, .hero,
.grid { .controlRow {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }