@alliance-droid/status-feedback-system 0.3.0 → 0.3.2

package/dist/components/DevFeedback.svelte

@@ -299,32 +299,24 @@
 {#if isEnabled}
 	<!-- Context menu -->
 	{#if menuOpen}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			class="fixed z-[99999]"
 			style="left: {adjustedX}px; top: {adjustedY}px;"
-			onmousedown|stopPropagation={() => {}}
+			onmousedown={(e) => e.stopPropagation()}
 		>
-			<div class="bg-surface-secondary border border-border rounded-lg shadow-xl overflow-hidden min-w-[180px]">
-				<button
-					class="flex items-center gap-2.5 w-full px-3 py-2.5 text-sm text-foreground hover:bg-surface-hover transition-colors text-left"
-					onclick={() => openForm('bug')}
-				>
+			<div class="sf-ctx-menu">
+				<button class="sf-ctx-item" onclick={() => openForm('bug')}>
 					<i class="fa-solid fa-bug text-red-400"></i>
 					Report Bug
 				</button>
-				<button
-					class="flex items-center gap-2.5 w-full px-3 py-2.5 text-sm text-foreground hover:bg-surface-hover transition-colors text-left"
-					onclick={() => openForm('feature')}
-				>
+				<button class="sf-ctx-item" onclick={() => openForm('feature')}>
 					<i class="fa-solid fa-lightbulb text-amber-400"></i>
 					Request Feature
 				</button>
-				<div class="border-t border-border">
-					<button
-						class="flex items-center gap-2.5 w-full px-3 py-2.5 text-sm text-foreground-secondary hover:bg-surface-hover transition-colors text-left"
-						onclick={openBoard}
-					>
+				<div class="sf-ctx-divider">
+					<button class="sf-ctx-item sf-ctx-item-secondary" onclick={openBoard}>
 						<i class="fa-solid fa-clipboard-list"></i>
 						View Open Issues
 					</button>
@@ -336,8 +328,10 @@
 	<!-- Form modal -->
 	{#if formOpen}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="fixed inset-0 z-[99998] flex items-center justify-center bg-black/50 backdrop-blur-sm" onmousedown|self={() => (formOpen = false)}>
-			<div class="w-full max-w-lg mx-4" onmousedown|stopPropagation={() => {}}>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="fixed inset-0 z-[99998] flex items-center justify-center bg-black/50 backdrop-blur-sm" onmousedown={(e) => { if (e.target === e.currentTarget) formOpen = false; }}>
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div class="w-full max-w-lg mx-4" onmousedown={(e) => e.stopPropagation()}>
 				<Card variant="elevated" padding="none">
 					<!-- Header -->
 					<div class="flex items-center justify-between px-5 py-4 border-b border-border">
@@ -472,16 +466,13 @@
 	<!-- Onboarding toast -->
 	{#if showToast}
 		<div class="fixed bottom-4 right-4 z-[99997] animate-fade-in">
-			<div class="bg-surface-secondary border border-border rounded-lg shadow-lg px-4 py-3 flex items-center gap-3 max-w-sm">
-				<i class="fa-solid fa-computer-mouse text-primary text-lg"></i>
+			<div class="sf-toast">
+				<i class="fa-solid fa-computer-mouse" style="color: var(--color-primary, #3b82f6); font-size: 1.125rem;"></i>
 				<div>
-					<p class="text-sm font-semibold">Middle-click anywhere</p>
-					<p class="text-xs text-foreground-secondary">to report bugs or request features</p>
+					<p style="font-size: 0.875rem; font-weight: 600; margin: 0;">Middle-click anywhere</p>
+					<p style="font-size: 0.75rem; color: #94a3b8; margin: 0;">to report bugs or request features</p>
 				</div>
-				<button
-					class="text-foreground-tertiary hover:text-foreground transition-colors bg-transparent border-none cursor-pointer ml-2"
-					onclick={() => (showToast = false)}
-				>
+				<button class="sf-toast-close" onclick={() => (showToast = false)}>
 					<i class="fa-solid fa-xmark"></i>
 				</button>
 			</div>
@@ -497,4 +488,68 @@
 	.animate-fade-in {
 		animation: fade-in 0.3s ease-out;
 	}
+
+	/* Context menu — hardcoded colors for guaranteed visibility */
+	.sf-ctx-menu {
+		background: #1e293b;
+		border: 1px solid #334155;
+		border-radius: 0.5rem;
+		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+		overflow: hidden;
+		min-width: 180px;
+	}
+
+	.sf-ctx-item {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		width: 100%;
+		padding: 0.625rem 0.75rem;
+		font-size: 0.875rem;
+		color: #e2e8f0;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.15s;
+	}
+
+	.sf-ctx-item:hover {
+		background: #334155;
+	}
+
+	.sf-ctx-item-secondary {
+		color: #94a3b8;
+	}
+
+	.sf-ctx-divider {
+		border-top: 1px solid #334155;
+	}
+
+	/* Toast */
+	.sf-toast {
+		background: #1e293b;
+		border: 1px solid #334155;
+		border-radius: 0.5rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+		padding: 0.75rem 1rem;
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		max-width: 20rem;
+		color: #e2e8f0;
+	}
+
+	.sf-toast-close {
+		color: #64748b;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		margin-left: 0.5rem;
+		transition: color 0.15s;
+	}
+
+	.sf-toast-close:hover {
+		color: #e2e8f0;
+	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alliance-droid/status-feedback-system",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
   "svelte": "./dist/index.js",