Skip to content

Commit b5c203d

Browse files
mikebarkminmikebarkmin
committed
make styling more consistent
1 parent f601776 commit b5c203d

4 files changed

Lines changed: 365 additions & 114 deletions

File tree

‎platforms/web/src/Learn.css‎

Lines changed: 161 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -132,17 +132,96 @@
132132
box-sizing: border-box;
133133
}
134134

135-
.add-map-section {
136-
background: var(--learningmap-color-whitesmoke, #f5f5f5);
137-
padding: 2rem;
135+
/* Page Header - Simple heading with emoji */
136+
.page-header {
137+
margin-bottom: 2.5rem;
138+
}
139+
140+
.page-header h2 {
141+
margin: 0 0 0.5rem 0;
142+
font-size: 2rem;
143+
font-weight: 600;
144+
color: #1f2937;
145+
display: flex;
146+
align-items: center;
147+
gap: 0.5rem;
148+
}
149+
150+
.page-emoji {
151+
font-size: 2rem;
152+
line-height: 1;
153+
}
154+
155+
.page-subheading {
156+
margin: 0;
157+
color: var(--learningmap-color-quicksilver, #a4a4a4);
158+
font-size: 1.1rem;
159+
line-height: 1.5;
160+
}
161+
162+
/* Dialog styles */
163+
.dialog-overlay {
164+
position: fixed;
165+
top: 0;
166+
left: 0;
167+
right: 0;
168+
bottom: 0;
169+
background: rgba(0, 0, 0, 0.5);
170+
display: flex;
171+
align-items: center;
172+
justify-content: center;
173+
z-index: 1000;
174+
}
175+
176+
.dialog-content {
177+
background: white;
138178
border-radius: 8px;
139-
margin-bottom: 2rem;
179+
padding: 0;
180+
max-width: 600px;
181+
width: 90%;
182+
max-height: 90vh;
183+
overflow-y: auto;
184+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
140185
}
141186

142-
.add-map-section h2 {
143-
margin: 0 0 1rem 0;
144-
font-size: 1.25rem;
145-
font-weight: 400;
187+
.dialog-header {
188+
padding: 1.5rem 2rem;
189+
border-bottom: 1px solid #dee2e6;
190+
display: flex;
191+
justify-content: space-between;
192+
align-items: center;
193+
}
194+
195+
.dialog-header h2 {
196+
margin: 0;
197+
font-size: 1.5rem;
198+
font-weight: 600;
199+
color: #1f2937;
200+
}
201+
202+
.dialog-close {
203+
background: none;
204+
border: none;
205+
font-size: 2rem;
206+
color: var(--learningmap-color-quicksilver, #a4a4a4);
207+
cursor: pointer;
208+
padding: 0;
209+
width: 32px;
210+
height: 32px;
211+
display: flex;
212+
align-items: center;
213+
justify-content: center;
214+
border-radius: 4px;
215+
transition: all 0.2s;
216+
}
217+
218+
.dialog-close:hover {
219+
background: var(--learningmap-color-whitesmoke, #f5f5f5);
220+
color: #1f2937;
221+
}
222+
223+
.dialog-body {
224+
padding: 2rem;
146225
}
147226

148227
.add-map-form {
@@ -160,7 +239,7 @@
160239

161240
.add-map-form button {
162241
padding: 0.75rem 1.5rem;
163-
background: var(--learningmap-color-openpatch, #007864);
242+
background: #4a90e2;
164243
color: white;
165244
border: none;
166245
border-radius: 4px;
@@ -171,7 +250,7 @@
171250
}
172251

173252
.add-map-form button:hover {
174-
background: var(--learningmap-color-dark-forest, #004c45);
253+
background: #357abd;
175254
}
176255

177256
.error-message {
@@ -208,8 +287,8 @@
208287
.upload-button {
209288
padding: 0.75rem 1.5rem;
210289
background: white;
211-
color: var(--learningmap-color-openpatch, #007864);
212-
border: 2px solid var(--learningmap-color-openpatch, #007864);
290+
color: #4a90e2;
291+
border: 2px solid #4a90e2;
213292
border-radius: 4px;
214293
cursor: pointer;
215294
font-size: 1rem;
@@ -219,25 +298,56 @@
219298
}
220299

221300
.upload-button:hover {
222-
background: var(--learningmap-color-freshmint, #b5e3d8);
223-
border-color: var(--learningmap-color-dark-forest, #004c45);
224-
color: var(--learningmap-color-dark-forest, #004c45);
301+
background: #f0f7ff;
302+
border-color: #357abd;
303+
color: #357abd;
225304
}
226305

227306
.upload-button:focus {
228-
outline: 2px solid var(--learningmap-color-openpatch, #007864);
307+
outline: 2px solid #4a90e2;
229308
outline-offset: 2px;
230309
}
231310

311+
/* Empty state - student version */
232312
.empty-state {
233313
text-align: center;
234-
padding: 3rem;
235-
color: var(--learningmap-color-quicksilver, #a4a4a4);
314+
padding: 4rem 2rem;
315+
background: #f0f7ff;
316+
border-radius: 8px;
317+
}
318+
319+
.empty-icon {
320+
font-size: 4rem;
321+
margin-bottom: 1rem;
322+
}
323+
324+
.empty-state h3 {
325+
margin: 0 0 0.5rem 0;
326+
font-size: 1.25rem;
327+
font-weight: 600;
328+
color: #1f2937;
236329
}
237330

238331
.empty-state p {
239-
margin: 0.5rem 0;
240-
font-size: 1.1rem;
332+
margin: 0 0 1.5rem 0;
333+
color: var(--learningmap-color-quicksilver, #a4a4a4);
334+
font-size: 1rem;
335+
}
336+
337+
.empty-action-button {
338+
padding: 0.75rem 1.5rem;
339+
background: #4a90e2;
340+
color: white;
341+
border: none;
342+
border-radius: 4px;
343+
cursor: pointer;
344+
font-size: 1rem;
345+
font-weight: 500;
346+
transition: background 0.2s;
347+
}
348+
349+
.empty-action-button:hover {
350+
background: #357abd;
241351
}
242352

243353
.maps-grid {
@@ -252,11 +362,12 @@
252362
border: 1px solid #dee2e6;
253363
border-radius: 8px;
254364
overflow: hidden;
255-
transition: box-shadow 0.2s;
365+
transition: all 0.2s;
256366
}
257367

258368
.map-card:hover {
259369
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
370+
transform: translateY(-2px);
260371
}
261372

262373
.map-card-header {
@@ -271,9 +382,10 @@
271382
.map-card-header h3 {
272383
margin: 0;
273384
font-size: 1.1rem;
274-
font-weight: 400;
385+
font-weight: 600;
275386
flex: 1;
276387
word-break: break-word;
388+
color: #1f2937;
277389
}
278390

279391
.remove-button {
@@ -301,6 +413,18 @@
301413
padding: 1rem;
302414
}
303415

416+
.map-stats {
417+
display: flex;
418+
gap: 1rem;
419+
margin-bottom: 0.75rem;
420+
}
421+
422+
.stat {
423+
font-size: 0.9rem;
424+
color: #1f2937;
425+
font-weight: 500;
426+
}
427+
304428
.progress-section {
305429
margin-bottom: 1rem;
306430
}
@@ -316,7 +440,7 @@
316440

317441
.progress-fill {
318442
height: 100%;
319-
background: linear-gradient(90deg, var(--learningmap-color-openpatch, #007864) 0%, var(--learningmap-color-freshmint, #b5e3d8) 100%);
443+
background: linear-gradient(90deg, #4a90e2 0%, #6eb3ff 100%);
320444
transition: width 0.3s ease;
321445
}
322446

@@ -336,19 +460,25 @@
336460
border-top: 1px solid #dee2e6;
337461
}
338462

339-
.continue-button {
463+
/* Action buttons - student version with blue accent */
464+
.action-button {
340465
width: 100%;
341466
padding: 0.75rem;
342-
background: var(--learningmap-color-openpatch, #007864);
343-
color: white;
344-
border: none;
345467
border-radius: 4px;
346468
cursor: pointer;
347469
font-size: 1rem;
348-
font-weight: 400;
349-
transition: background 0.2s;
470+
font-weight: 500;
471+
transition: all 0.2s;
472+
text-align: center;
473+
border: none;
350474
}
351475

352-
.continue-button:hover {
353-
background: var(--learningmap-color-dark-forest, #004c45);
476+
.primary-button {
477+
background: #4a90e2;
478+
color: white;
479+
}
480+
481+
.primary-button:hover {
482+
background: #357abd;
483+
transform: translateY(-1px);
354484
}

0 commit comments

Comments
 (0)