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() {
How it works
{steps.map((step) => (
- -
- {step.title}
-
{step.body}
+ -
+
+
+
+
+
{step.title}
+
{step.body}
+
))}
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;
}