refactor dashboard layout and styles for improved UI consistency

app/routes/app._index.jsx

@@ -817,12 +817,14 @@ 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>
+      <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>
               <span
                 className={`${styles.statusPill} ${
                   connection?.status === 1 ? styles.success : styles.warning
@@ -831,27 +833,28 @@ export default function Index() {
                 {connectionState}
               </span>
             </div>
+            <p className={styles.controlText}>{connectionMessage}</p>
             {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>
+            ) : null}
           </div>
-              ) : (
-                <p>{connectionMessage}</p>
-              )}
-            </div>
-          </s-section>
 
-          <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">
+        <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} />
-          </s-section>
         </div>
       </div>
     </s-page>

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;
   }