From 7b4c43ff8dd425e72694d05ebd8fd69c997d70ab Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Fri, 21 Oct 2022 16:33:39 -0700
Subject: [PATCH] Improve visibility of Eyedropper widget on dark backgrounds
 (closes #802)

---
 .../floating-menus/EyedropperPreview.vue      | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/floating-menus/EyedropperPreview.vue b/frontend/src/components/floating-menus/EyedropperPreview.vue
index 05c8fae1..3054b5f3 100644
--- a/frontend/src/components/floating-menus/EyedropperPreview.vue
+++ b/frontend/src/components/floating-menus/EyedropperPreview.vue
@@ -29,25 +29,39 @@
 		border-left-color: var(--ring-color-primary);
 		border-bottom-color: var(--ring-color-secondary);
 		border-right-color: var(--ring-color-secondary);
-		box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
+
+		&::after {
+			content: "";
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			top: -9px;
+			left: -9px;
+			padding: 8px;
+			border-radius: 50%;
+			border: 1px solid rgba(255, 255, 255, 0.25);
+			box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
+		}
 
 		.canvas-container {
 			transform: rotate(-45deg);
 
 			canvas {
+				display: block;
 				width: 110px;
 				height: 110px;
 				border-radius: 50%;
 				image-rendering: pixelated;
+				border: 1px solid rgba(255, 255, 255, 0.25);
 			}
 
 			&::after {
 				content: "";
 				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
+				top: 1px;
+				left: 1px;
+				width: calc(100% - 2px);
+				height: calc(100% - 2px);
 				border-radius: 50%;
 				box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25);
 			}