|
1 | 1 | --- |
2 | | -import { Play, ChevronDown, Check } from '@lucide/astro'; |
| 2 | +import { ChevronDown, Check } from '@lucide/astro'; |
3 | 3 |
|
4 | 4 | interface Props { |
5 | 5 | replitUrl?: string; |
@@ -55,7 +55,15 @@ const initialLabel = isDefaultCodespaces |
55 | 55 | id="run-icon-replit" |
56 | 56 | style={isDefaultCodespaces ? 'display: none;' : 'display: inline-flex;'} |
57 | 57 | > |
58 | | - <Play size={14} fill="currentColor" /> |
| 58 | + <svg |
| 59 | + width="14" |
| 60 | + height="14" |
| 61 | + viewBox="-12.5 0 75 75" |
| 62 | + fill="currentColor" |
| 63 | + aria-hidden="true" |
| 64 | + > |
| 65 | + <path d="M25 19.995C25 20.0375 25 20.0575 25 20.085C25.015 21.34 25.5475 22.6275 26.425 23.525C26.445 23.545 26.4475 23.5475 26.45 23.55C26.485 23.585 26.5025 23.6025 26.54 23.6375C27.4225 24.485 28.6775 25.005 29.9025 25.03C29.9525 25.03 29.9975 25.03 30.0825 25.03H42C44.8 25.03 46.2 25.03 47.27 25.575C48.21 26.055 48.975 26.82 49.455 27.76C50 28.83 50 30.23 50 33.03V42.03C50 44.83 50 46.23 49.455 47.3C48.975 48.24 48.21 49.005 47.27 49.485C46.2 50.03 44.8 50.03 42 50.03H29.9275C28.6425 50.0325 27.3225 50.58 26.4125 51.485C26.4075 51.49 26.4775 51.42 26.45 51.4475C26.445 51.4525 26.4425 51.4525 26.4225 51.475C25.545 52.3725 25.0125 53.6575 24.9975 54.9125C24.9975 54.94 24.9975 54.9625 24.9975 55.0025V67.0575C24.9975 69.8575 24.9975 71.2575 24.4525 72.3275C23.9725 73.2675 23.2075 74.0325 22.2675 74.5125C21.1975 75.0575 19.7975 75.0575 16.9975 75.0575H7.9975C5.1975 75.0575 3.7975 75.0575 2.7275 74.5125C1.7875 74.0325 1.0225 73.2675 0.542498 72.3275C-0.00250244 71.2575 -0.00250244 69.8575 -0.00250244 67.0575V58.0575C-0.00250244 55.2575 -0.00250244 53.8575 0.542498 52.7875C1.0225 51.8475 1.7875 51.0825 2.7275 50.6025C3.7975 50.0575 5.1975 50.0575 7.9975 50.0575H19.7225C19.9 50.0575 19.9875 50.0575 20.08 50.055C21.2475 50.0125 22.4375 49.52 23.295 48.7225C23.3625 48.66 23.4125 48.61 23.5125 48.51C23.55 48.4725 23.5675 48.455 23.6025 48.42C24.455 47.5325 24.9725 46.2825 24.9975 45.0525C24.9975 45.0025 24.9975 44.96 24.9975 44.875V30.12C24.9975 30.0325 24.9975 29.99 24.9975 29.94C24.9725 28.71 24.455 27.46 23.6025 26.575C23.5675 26.54 23.55 26.52 23.5125 26.4825C23.475 26.445 23.4575 26.4275 23.42 26.3925C22.5325 25.54 21.2825 25.0225 20.0525 24.9975C20.0025 24.9975 19.96 24.9975 19.875 24.9975H7.9975C5.1975 24.9975 3.7975 24.9975 2.7275 24.4525C1.7875 23.9725 1.0225 23.2075 0.542498 22.2675C-0.00250244 21.1975 -0.00250244 19.7975 -0.00250244 16.9975V7.9975C-2.44146e-06 5.2 -2.44379e-06 3.8 0.544998 2.73C1.025 1.79 1.79 1.025 2.73 0.545C3.8 0 5.2 0 8 0H17C19.8 0 21.2 0 22.27 0.545C23.21 1.025 23.975 1.79 24.455 2.73C25 3.8 25 5.2 25 8V19.995Z"></path> |
| 66 | + </svg> |
59 | 67 | </span> |
60 | 68 | <span class="btn-text-full" id="run-text-full"> |
61 | 69 | {isDefaultCodespaces ? 'Open in Codespaces' : 'Run on Replit'} |
@@ -122,7 +130,15 @@ const initialLabel = isDefaultCodespaces |
122 | 130 | aria-selected={!isDefaultCodespaces ? 'true' : 'false'} |
123 | 131 | > |
124 | 132 | <span class="item-icon"> |
125 | | - <Play size={14} fill="currentColor" /> |
| 133 | + <svg |
| 134 | + width="14" |
| 135 | + height="14" |
| 136 | + viewBox="-12.5 0 75 75" |
| 137 | + fill="currentColor" |
| 138 | + aria-hidden="true" |
| 139 | + > |
| 140 | + <path d="M25 19.995C25 20.0375 25 20.0575 25 20.085C25.015 21.34 25.5475 22.6275 26.425 23.525C26.445 23.545 26.4475 23.5475 26.45 23.55C26.485 23.585 26.5025 23.6025 26.54 23.6375C27.4225 24.485 28.6775 25.005 29.9025 25.03C29.9525 25.03 29.9975 25.03 30.0825 25.03H42C44.8 25.03 46.2 25.03 47.27 25.575C48.21 26.055 48.975 26.82 49.455 27.76C50 28.83 50 30.23 50 33.03V42.03C50 44.83 50 46.23 49.455 47.3C48.975 48.24 48.21 49.005 47.27 49.485C46.2 50.03 44.8 50.03 42 50.03H29.9275C28.6425 50.0325 27.3225 50.58 26.4125 51.485C26.4075 51.49 26.4775 51.42 26.45 51.4475C26.445 51.4525 26.4425 51.4525 26.4225 51.475C25.545 52.3725 25.0125 53.6575 24.9975 54.9125C24.9975 54.94 24.9975 54.9625 24.9975 55.0025V67.0575C24.9975 69.8575 24.9975 71.2575 24.4525 72.3275C23.9725 73.2675 23.2075 74.0325 22.2675 74.5125C21.1975 75.0575 19.7975 75.0575 16.9975 75.0575H7.9975C5.1975 75.0575 3.7975 75.0575 2.7275 74.5125C1.7875 74.0325 1.0225 73.2675 0.542498 72.3275C-0.00250244 71.2575 -0.00250244 69.8575 -0.00250244 67.0575V58.0575C-0.00250244 55.2575 -0.00250244 53.8575 0.542498 52.7875C1.0225 51.8475 1.7875 51.0825 2.7275 50.6025C3.7975 50.0575 5.1975 50.0575 7.9975 50.0575H19.7225C19.9 50.0575 19.9875 50.0575 20.08 50.055C21.2475 50.0125 22.4375 49.52 23.295 48.7225C23.3625 48.66 23.4125 48.61 23.5125 48.51C23.55 48.4725 23.5675 48.455 23.6025 48.42C24.455 47.5325 24.9725 46.2825 24.9975 45.0525C24.9975 45.0025 24.9975 44.96 24.9975 44.875V30.12C24.9975 30.0325 24.9975 29.99 24.9975 29.94C24.9725 28.71 24.455 27.46 23.6025 26.575C23.5675 26.54 23.55 26.52 23.5125 26.4825C23.475 26.445 23.4575 26.4275 23.42 26.3925C22.5325 25.54 21.2825 25.0225 20.0525 24.9975C20.0025 24.9975 19.96 24.9975 19.875 24.9975H7.9975C5.1975 24.9975 3.7975 24.9975 2.7275 24.4525C1.7875 23.9725 1.0225 23.2075 0.542498 22.2675C-0.00250244 21.1975 -0.00250244 19.7975 -0.00250244 16.9975V7.9975C-2.44146e-06 5.2 -2.44379e-06 3.8 0.544998 2.73C1.025 1.79 1.79 1.025 2.73 0.545C3.8 0 5.2 0 8 0H17C19.8 0 21.2 0 22.27 0.545C23.21 1.025 23.975 1.79 24.455 2.73C25 3.8 25 5.2 25 8V19.995Z"></path> |
| 141 | + </svg> |
126 | 142 | </span> |
127 | 143 | <span class="item-label">Replit</span> |
128 | 144 | <span class="item-check"> |
@@ -370,10 +386,13 @@ const initialLabel = isDefaultCodespaces |
370 | 386 | // Storage access blocked or unavailable |
371 | 387 | } |
372 | 388 |
|
373 | | - function closeDropdown() { |
| 389 | + function closeDropdown(restoreFocus = false) { |
374 | 390 | container!.classList.remove('open'); |
375 | 391 | toggleBtn!.setAttribute('aria-expanded', 'false'); |
376 | 392 | menu!.setAttribute('aria-hidden', 'true'); |
| 393 | + if (restoreFocus) { |
| 394 | + toggleBtn!.focus(); |
| 395 | + } |
377 | 396 | } |
378 | 397 |
|
379 | 398 | function toggleDropdown(e: Event) { |
@@ -401,20 +420,20 @@ const initialLabel = isDefaultCodespaces |
401 | 420 | // Ignore storage errors |
402 | 421 | } |
403 | 422 | setEnvironment(selectedEnv); |
404 | | - closeDropdown(); |
| 423 | + closeDropdown(true); |
405 | 424 | } |
406 | 425 | }); |
407 | 426 | }); |
408 | 427 |
|
409 | 428 | document.addEventListener('click', (e) => { |
410 | 429 | if (!container.contains(e.target as Node)) { |
411 | | - closeDropdown(); |
| 430 | + closeDropdown(false); |
412 | 431 | } |
413 | 432 | }); |
414 | 433 |
|
415 | 434 | document.addEventListener('keydown', (e) => { |
416 | | - if (e.key === 'Escape') { |
417 | | - closeDropdown(); |
| 435 | + if (e.key === 'Escape' && container.classList.contains('open')) { |
| 436 | + closeDropdown(true); |
418 | 437 | } |
419 | 438 | }); |
420 | 439 | } |
|
0 commit comments