From b05894efc7df762a911c15d3b6371cae632811ca Mon Sep 17 00:00:00 2001
From: Avi <avi@aiolabs.com>
Date: Tue, 1 Sep 2026 11:17:20 -0500
Subject: [PATCH] fix(layout): redesign first-run guide with visual step
 indicators

- Replace plain numbered list with icon circles (primary-soft bg)
- Each step uses flex layout: indicator + content
- Step titles and body text have clear hierarchy
- Remove legacy padding-left on ol, use gap-based spacing
- Consistent 14px font size for step content
---
 frontend/src/screens/HomeScreen.tsx | 22 +++++++++-----
 frontend/src/styles.css             | 45 ++++++++++++++++++++++++-----
 2 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/frontend/src/screens/HomeScreen.tsx b/frontend/src/screens/HomeScreen.tsx
index be8caad..5908e36 100644
--- a/frontend/src/screens/HomeScreen.tsx
+++ b/frontend/src/screens/HomeScreen.tsx
@@ -296,17 +296,20 @@ function PublicationResult({
 }
 
 function FirstRunGuide() {
-  const steps: { title: string; body: string }[] = [
+  const steps: { icon: string; title: string; body: string }[] = [
     {
-      title: '1 · Create a profile',
+      icon: 'users',
+      title: 'Create a profile',
       body: 'The app generates a public npub address and a private key for you. They are stored only on this computer.',
     },
     {
-      title: '2 · Share your npub',
+      icon: 'copy',
+      title: 'Share your npub',
       body: 'Your npub is public and safe to share. Never share your private key with anyone.',
     },
     {
-      title: '3 · Publish a note',
+      icon: 'edit',
+      title: 'Publish a note',
       body: 'Write a note in Compose and publish it. Your note is signed locally and sent to the enabled relays.',
     },
   ];
@@ -315,9 +318,14 @@ function FirstRunGuide() {
       <h2>How it works</h2>
       <ol>
         {steps.map((step) => (
-          <li key={step.title}>
-            <strong>{step.title}</strong>
-            <p>{step.body}</p>
+          <li key={step.title} className="first-run-step">
+            <span className="first-run-step-indicator" aria-hidden="true">
+              <Icon name={step.icon as any} size={16} />
+            </span>
+            <div className="first-run-step-content">
+              <strong>{step.title}</strong>
+              <p>{step.body}</p>
+            </div>
           </li>
         ))}
       </ol>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 2463abd..b861c4a 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1674,16 +1674,45 @@ select {
   text-align: left;
 }
 
-.first-run-guide ol {
-  margin: 12px 0 0;
-  padding-left: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+.first-run-guide h2 {
+  margin-bottom: 4px;
 }
 
-.first-run-guide p {
-  margin: 2px 0 0;
+.first-run-guide ol {
+  margin: 12px 0 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.first-run-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+}
+
+.first-run-step-indicator {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--primary-soft);
+  color: var(--primary);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.first-run-step-content strong {
+  display: block;
+  font-size: 14px;
+  margin-bottom: 2px;
+}
+
+.first-run-step-content p {
+  margin: 0;
   color: var(--text-muted);
   font-size: 14px;
 }