Overlay look-and-feel polish (#9230)

* dev overlay polish * increase size a bit
withastro · Nov 29, 2023 · 60cfa49 · 60cfa49
1 parent c495f1a
commit 60cfa49
Show file tree

Hide file tree

Showing 10 changed files with 318 additions and 442 deletions.
diff --git a/.changeset/mighty-rats-flow.md b/.changeset/mighty-rats-flow.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Update the look and feel of the dev overlay
diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
@@ -88,7 +88,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 				newState = evt.detail.state ?? true;
 			}
 
-			await overlay.togglePluginStatus(plugin, newState);
+			await overlay.setPluginStatus(plugin, newState);
 		});
 
 		return plugin;
@@ -113,9 +113,13 @@ document.addEventListener('DOMContentLoaded', async () => {
 						border: 1px solid rgba(52, 56, 65, 1);
 						border-radius: 12px;
 						box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01);
-						width: 180px;
+						width: 192px;
 						padding: 8px;
 						z-index: 9999999999;
+						transform: translate(-50%, 0%);
+						position: fixed;
+						bottom: 72px;
+						left: 50%;
 					}
 
 					.notification {
@@ -139,20 +143,19 @@ document.addEventListener('DOMContentLoaded', async () => {
 						background: transparent;
 						color: white;
 						font-family: system-ui, sans-serif;
-						font-size: 16px;
-						line-height: 1.2;
+						font-size: 14px;
 						white-space: nowrap;
 						text-decoration: none;
 						margin: 0;
 						display: flex;
-    				align-items: center;
+						align-items: center;
 						width: 100%;
 						padding: 8px;
 						border-radius: 8px;
 					}
 
 					#dropdown button:hover, #dropdown button:focus-visible {
-						background: rgba(27, 30, 36, 1);
+						background: #FFFFFF20;
 						cursor: pointer;
 					}
 
@@ -162,8 +165,9 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 					#dropdown .icon {
 						position: relative;
-						height: 24px;
-						width: 24px;
+						height: 20px;
+						width: 20px;
+						padding: 1px;
 						margin-right: 0.5em;
 					}
 
@@ -202,9 +206,6 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 					dropdown.append(buttonContainer);
 
-					eventTarget.addEventListener('plugin-toggled', positionDropdown);
-					window.addEventListener('resize', positionDropdown);
-
 					plugin.eventTarget.addEventListener('toggle-notification', (evt) => {
 						if (!(evt instanceof CustomEvent)) return;
 
@@ -231,21 +232,6 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 					return icon;
 				}
-
-				function positionDropdown() {
-					const moreButtonRect = overlay.shadowRoot
-						.querySelector('[data-plugin-id="astro:more"]')
-						?.getBoundingClientRect();
-					const dropdownRect = dropdown.getBoundingClientRect();
-
-					if (moreButtonRect && dropdownRect) {
-						dropdown.style.position = 'absolute';
-						dropdown.style.top = `${moreButtonRect.top - dropdownRect.height - 12}px`;
-						dropdown.style.left = `${
-							moreButtonRect.left + moreButtonRect.width - dropdownRect.width
-						}px`;
-					}
-				}
 			}
 		},
 	} satisfies DevOverlayPluginDefinition;