From d6cfd31a6ac9abdf34472f1b1309c8472b62599e Mon Sep 17 00:00:00 2001
From: MOHAN <mohan326856@gmail.com>
Date: Tue, 14 Apr 2026 13:35:59 +0530
Subject: [PATCH] refactor dashboard layout and styles for improved UI
 consistency

---
 app/routes/app._index.jsx           | 79 ++++++++++++++++-------------
 app/styles/app-dashboard.module.css | 60 +++++++++++++++++++---
 2 files changed, 96 insertions(+), 43 deletions(-)

diff --git a/app/routes/app._index.jsx b/app/routes/app._index.jsx
index ef52e68..66c4fb0 100644
--- a/app/routes/app._index.jsx
+++ b/app/routes/app._index.jsx
@@ -817,41 +817,44 @@ export default function Index() {
         </div>
       </div>
 
-      <div className={styles.grid}>
-        <div className={styles.primaryColumn}>
-          <s-section heading="Store Setup">
-            <div className={styles.panelBody}>
-              <div className={styles.inlineRow}>
-                <span className={styles.statLabel}>Connection</span>
-                <span
-                  className={`${styles.statusPill} ${
-                    connection?.status === 1 ? styles.success : styles.warning
-                  }`}
-                >
-                  {connectionState}
-                </span>
+      <div className={styles.dashboardShell}>
+        <div className={styles.controlRow}>
+          <div className={styles.controlCard}>
+            <div className={styles.controlHeader}>
+              <div>
+                <span className={styles.statLabel}>Store setup</span>
+                <h3 className={styles.controlTitle}>Connection status</h3>
               </div>
-              {connection?.status !== 1 ? (
-                <div className={`${styles.detailCard} ${styles.warningCard}`}>
-                  <p>{connectionMessage}</p>
-                  <div className={styles.actionRow}>
-                    <s-button variant="primary" onClick={openSetup}>
-                      Connect store
-                    </s-button>
-                  </div>
-                </div>
-              ) : (
-                <p>{connectionMessage}</p>
-              )}
+              <span
+                className={`${styles.statusPill} ${
+                  connection?.status === 1 ? styles.success : styles.warning
+                }`}
+              >
+                {connectionState}
+              </span>
             </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
-            heading="Start Product Import"
-            description="Start the full Race Nation product import for this store."
-          >
+          <div className={styles.controlCard}>
+            <div className={styles.controlHeader}>
+              <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">
-              <div className={styles.panelBody}>
+              <div className={styles.controlForm}>
                 <div className={styles.actionRow}>
                   <s-button
                     type="submit"
@@ -863,13 +866,17 @@ export default function Index() {
                 </div>
               </div>
             </fetcher.Form>
-          </s-section>
+          </div>
         </div>
 
-        <div className={styles.secondaryColumn}>
-          <s-section heading="Import Progress">
-            <JobSummary job={job} />
-          </s-section>
+        <div className={styles.mainPanel}>
+          <div className={styles.mainPanelHeader}>
+            <div>
+              <span className={styles.statLabel}>Live dashboard</span>
+              <h3 className={styles.controlTitle}>Import progress</h3>
+            </div>
+          </div>
+          <JobSummary job={job} />
         </div>
       </div>
     </s-page>
diff --git a/app/styles/app-dashboard.module.css b/app/styles/app-dashboard.module.css
index 0d79c16..8dcde78 100644
--- a/app/styles/app-dashboard.module.css
+++ b/app/styles/app-dashboard.module.css
@@ -84,16 +84,61 @@
   line-height: 1.35;
 }
 
-.grid {
+.dashboardShell {
   display: grid;
-  grid-template-columns: 1.15fr 0.85fr;
-  gap: 1.5rem;
+  gap: 1.25rem;
 }
 
-.primaryColumn,
-.secondaryColumn {
+.controlRow {
   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 {
@@ -496,6 +541,7 @@
 }
 
 @media (max-width: 900px) {
+  .controlRow,
   .analyticsGrid,
   .statGrid,
   .highlightGrid,
@@ -525,7 +571,7 @@
 
 @media (max-width: 960px) {
   .hero,
-  .grid {
+  .controlRow {
     grid-template-columns: 1fr;
   }