feat: implement new icons

packages/astro/src/runtime/client/dev-toolbar/entrypoint.ts

@@ -62,6 +62,15 @@ document.addEventListener('DOMContentLoaded', async () => {
 
  overlay = document.createElement('astro-dev-toolbar');
 
+ const notificationLevels = ['error', 'warning', 'info'] as const;
+ const notificationSVGs: Record<(typeof notificationLevels)[number], string> = {
+ error:
+ '<svg viewBox="0 0 10 10"><rect width="9" height="9" x=".5" y=".5" fill="#B33E66" stroke="#13151A" rx="4.5"/></svg>',
+ warning:
+ '<svg viewBox="0 0 12 10"><path width="8" height="8" fill="#B58A2D" stroke="#13151A" d="m10.76 7.25-3.46-6c-.58-1-2.02-1-2.6 0l-3.46 6a1.5 1.5 0 0 0 1.3 2.25h6.92a1.5 1.5 0 0 0 1.3-2.25Z"/></svg>',
+ info: '<svg viewBox="0 0 10 10"><rect width="9" height="9" x=".5" y=".5" fill="#3645D9" stroke="#13151A" rx="1.5"/></svg>',
+ } as const;
+
  const prepareApp = (appDefinition: DevToolbarAppDefinition, builtIn: boolean): DevToolbarApp => {
  const eventTarget = new EventTarget();
  const app: DevToolbarApp = {
@@ -82,14 +91,17 @@ document.addEventListener('DOMContentLoaded', async () => {
  if (!target || !notificationElement) return;
 
  let newState = evt.detail.state ?? true;
- let level = evt.detail.level ?? 'error';
+ let level = notificationLevels.includes(evt?.detail?.level)
+ ? (evt.detail.level as (typeof notificationLevels)[number])
+ : 'error';
 
  app.notification.state = newState;
  if (newState) app.notification.level = level;
 
  notificationElement.toggleAttribute('data-active', newState);
  if (newState) {
  notificationElement.setAttribute('data-level', level);
+ notificationElement.innerHTML = notificationSVGs[level];
  }
  });
 
@@ -239,12 +251,15 @@ document.addEventListener('DOMContentLoaded', async () => {
  if (!(evt instanceof CustomEvent)) return;
 
  let newState = evt.detail.state ?? true;
- let level = evt.detail.level ?? 'error';
+ let level = notificationLevels.includes(evt?.detail?.level)
+ ? (evt.detail.level as (typeof notificationLevels)[number])
+ : 'error';
 
  notification.toggleAttribute('data-active', newState);
 
  if (newState) {
  notification.setAttribute('data-level', level);
+ notification.innerHTML = notificationSVGs[level];
  }
 
  app.notification.state = newState;

packages/astro/src/runtime/client/dev-toolbar/toolbar.ts

@@ -119,6 +119,7 @@ export class AstroDevToolbar extends HTMLElement {
  margin: 0;
  overflow: hidden;
  transition: opacity 0.2s ease-out 0s;
+ position: relative;
  }
 
  #dev-bar #bar-container .item:hover, #dev-bar #bar-container .item:focus-visible {
@@ -188,8 +189,8 @@ export class AstroDevToolbar extends HTMLElement {
  }
  }
 
- #dev-bar #bar-container .item.active .notification {
- border-color: rgba(71, 78, 94, 1);
+ #dev-bar #bar-container .item.active .notification rect, #dev-bar #bar-container .item.active .notification path {
+ stroke: rgba(71, 78, 94, 1);
  }
 
  #dev-bar .item .icon {
@@ -199,7 +200,7 @@ export class AstroDevToolbar extends HTMLElement {
  user-select: none;
  }
 
- #dev-bar .item svg {
+ #dev-bar .item .icon>svg {
  width: 20px;
  height: 20px;
  display: block;
@@ -215,24 +216,10 @@ export class AstroDevToolbar extends HTMLElement {
  #dev-bar .item .notification {
  display: none;
  position: absolute;
- top: -4px;
- right: -6px;
- width: 8px;
- height: 8px;
- border-radius: 9999px;
- border: 1px solid rgba(19, 21, 26, 1);
- }
-
- #dev-bar .item .notification[data-level="error"] {
- background: #B33E66;
- }
-
- #dev-bar .item .notification[data-level="warning"] {
- background: #b58a2d;
- }
-
- #dev-bar .item .notification[data-level="info"] {
- background: #9198ad;
+ top: 0;
+ right: 7px;
+ width: 9px;
+ height: 9px;
  }
 
  #dev-toolbar-root:not([data-no-notification]) #dev-bar .item .notification[data-active] {
@@ -407,8 +394,9 @@ export class AstroDevToolbar extends HTMLElement {
 
  getAppTemplate(app: DevToolbarApp) {
  return `<button class="item" data-app-id="${app.id}">
- <div class="icon">${app.icon ? getAppIcon(app.icon) : '?'}<div class="notification"></div></div>
+ <div class="icon">${app.icon ? getAppIcon(app.icon) : '?'}</div>
  <span class="item-tooltip">${app.name}</span>
+ <div class="notification"></div>
  </button>`;
  }