Skip to content

Commit 12f567e

Browse files
Copilotmikebarkmin
Copilot
and
mikebarkmin
committed
Redesign Learn page header to mimic EditorToolbar
Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>
1 parent 31c70ac commit 12f567e

3 files changed

Lines changed: 253 additions & 80 deletions

File tree

‎platforms/web/src/Learn.css‎

Lines changed: 51 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,61 @@
66
font-family: "Concert One", sans-serif;
77
}
88

9-
.learn-header {
10-
padding: 1rem 2rem;
11-
background: #f8f9fa;
12-
border-bottom: 1px solid #dee2e6;
9+
/* Toolbar matching EditorToolbar design */
10+
.learn-toolbar {
11+
width: 100%;
12+
background: #ffffff;
13+
border-bottom: 1px solid #e5e7eb;
14+
padding: 12px 24px;
1315
display: flex;
16+
justify-content: space-between;
1417
align-items: center;
15-
gap: 1rem;
18+
z-index: 10;
19+
box-sizing: border-box;
20+
}
21+
22+
.toolbar-left {
23+
display: flex;
24+
align-items: center;
25+
gap: 12px;
26+
}
27+
28+
.toolbar-logo {
29+
height: 32px;
30+
width: 32px;
1631
}
1732

18-
.learn-header h1 {
33+
.toolbar-title {
1934
margin: 0;
20-
font-size: 1.5rem;
35+
font-size: 1.25rem;
2136
font-weight: 400;
37+
color: #1f2937;
2238
}
2339

24-
.back-button {
25-
padding: 0.5rem 1rem;
26-
background: #fff;
27-
border: 1px solid #dee2e6;
28-
border-radius: 4px;
40+
.toolbar-right {
41+
display: flex;
42+
gap: 8px;
43+
}
44+
45+
.toolbar-button {
46+
padding: 8px 16px;
47+
border: 1px solid #d1d5db;
48+
border-radius: 6px;
49+
background: white;
50+
color: #1f2937;
51+
font-size: 14px;
52+
font-weight: 400;
2953
cursor: pointer;
30-
font-size: 0.9rem;
54+
display: flex;
55+
align-items: center;
56+
gap: 6px;
3157
transition: all 0.2s;
3258
font-family: "Concert One", sans-serif;
3359
}
3460

35-
.back-button:hover {
36-
background: #e9ecef;
61+
.toolbar-button:hover {
62+
background: #f3f4f6;
63+
border-color: #3b82f6;
3764
}
3865

3966
.learn-loading,
@@ -83,40 +110,19 @@
83110

84111
/* List view styles */
85112
.learn-list-container {
86-
max-width: 1200px;
87-
margin: 0 auto;
88-
padding: 2rem;
89-
font-family: "Concert One", sans-serif;
90-
}
91-
92-
.learn-list-header {
113+
width: 100%;
114+
min-height: 100vh;
93115
display: flex;
94-
justify-content: space-between;
95-
align-items: center;
96-
margin-bottom: 2rem;
97-
}
98-
99-
.learn-list-header h1 {
100-
margin: 0;
101-
font-size: 2rem;
102-
font-weight: 400;
103-
}
104-
105-
.editor-link {
106-
padding: 0.75rem 1.5rem;
107-
background: #28a745;
108-
color: white;
109-
border: none;
110-
border-radius: 4px;
111-
cursor: pointer;
112-
font-size: 1rem;
113-
font-weight: 400;
114-
transition: background 0.2s;
116+
flex-direction: column;
115117
font-family: "Concert One", sans-serif;
116118
}
117119

118-
.editor-link:hover {
119-
background: #218838;
120+
.learn-list-content {
121+
max-width: 1200px;
122+
width: 100%;
123+
margin: 0 auto;
124+
padding: 2rem;
125+
flex: 1;
120126
}
121127

122128
.add-map-section {

‎platforms/web/src/Learn.tsx‎

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { RoadmapState } from '@learningmap/learningmap';
55
import '@learningmap/learningmap/index.css';
66
import { useLearnerStore } from './learnerStore';
77
import './Learn.css';
8+
import logo from './logo.svg';
89

910
function Learn() {
1011
const navigate = useNavigate();
@@ -130,11 +131,16 @@ function Learn() {
130131

131132
return (
132133
<div className="learn-container">
133-
<div className="learn-header">
134-
<button onClick={() => navigate('/learn')} className="back-button">
135-
← Back to Learning Maps
136-
</button>
137-
<h1>{learningMap.roadmapData.settings?.title || 'Learning Map'}</h1>
134+
<div className="learn-toolbar">
135+
<div className="toolbar-left">
136+
<img src={logo} alt="Logo" className="toolbar-logo" />
137+
<h1 className="toolbar-title">Learningmap</h1>
138+
</div>
139+
<div className="toolbar-right">
140+
<button onClick={() => navigate('/learn')} className="toolbar-button">
141+
My Learningmaps
142+
</button>
143+
</div>
138144
</div>
139145
<LearningMap
140146
key={jsonId}
@@ -151,40 +157,41 @@ function Learn() {
151157

152158
return (
153159
<div className="learn-list-container">
154-
<div className="learn-list-header">
155-
<h1>My Learning Maps</h1>
156-
<button onClick={() => navigate('/')} className="editor-link">
157-
Go to Editor
158-
</button>
159-
</div>
160-
161-
<div className="add-map-section">
162-
<h2>Add a New Learning Map</h2>
163-
<div className="add-map-form">
164-
<input
165-
type="text"
166-
placeholder="Paste learning map URL (e.g., https://learningmap.app/learn/#json=...)"
167-
value={newMapUrl}
168-
onChange={(e) => setNewMapUrl(e.target.value)}
169-
onKeyPress={(e) => {
170-
if (e.key === 'Enter') {
171-
handleAddMap();
172-
}
173-
}}
174-
/>
175-
<button onClick={handleAddMap}>Add Map</button>
160+
<div className="learn-toolbar">
161+
<div className="toolbar-left">
162+
<img src={logo} alt="Logo" className="toolbar-logo" />
163+
<h1 className="toolbar-title">Learningmap</h1>
176164
</div>
177-
{error && <p className="error-message">{error}</p>}
178165
</div>
179166

180-
{allMaps.length === 0 ? (
181-
<div className="empty-state">
182-
<p>You haven't added any learning maps yet.</p>
183-
<p>Paste a learning map URL above to get started!</p>
167+
<div className="learn-list-content">
168+
<div className="add-map-section">
169+
<h2>Add a New Learning Map</h2>
170+
<div className="add-map-form">
171+
<input
172+
type="text"
173+
placeholder="Paste learning map URL (e.g., https://learningmap.app/learn/#json=...)"
174+
value={newMapUrl}
175+
onChange={(e) => setNewMapUrl(e.target.value)}
176+
onKeyPress={(e) => {
177+
if (e.key === 'Enter') {
178+
handleAddMap();
179+
}
180+
}}
181+
/>
182+
<button onClick={handleAddMap}>Add Map</button>
183+
</div>
184+
{error && <p className="error-message">{error}</p>}
184185
</div>
185-
) : (
186-
<div className="maps-grid">
187-
{allMaps.map((map) => {
186+
187+
{allMaps.length === 0 ? (
188+
<div className="empty-state">
189+
<p>You haven't added any learning maps yet.</p>
190+
<p>Paste a learning map URL above to get started!</p>
191+
</div>
192+
) : (
193+
<div className="maps-grid">
194+
{allMaps.map((map) => {
188195
const completed = Object.values(map.state?.nodes || {}).filter(
189196
(node) => node.state === 'completed' || node.state === 'mastered'
190197
).length;
@@ -237,6 +244,7 @@ function Learn() {
237244
})}
238245
</div>
239246
)}
247+
</div>
240248
</div>
241249
);
242250
}

‎platforms/web/src/logo.svg‎

Lines changed: 159 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)