From 790f0e4ba73f238ebab9c1365bb7f3129e06ed13 Mon Sep 17 00:00:00 2001
From: cdonohue <chad.donohue@gmail.com>
Date: Mon, 15 Jan 2024 10:29:25 -0600
Subject: [PATCH] Add outline rings for ArrowLight component to improve
 visibility

---
 components/TrafficLight.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/components/TrafficLight.tsx b/components/TrafficLight.tsx
index e357363..5f6da38 100644
--- a/components/TrafficLight.tsx
+++ b/components/TrafficLight.tsx
@@ -67,10 +67,23 @@ function ArrowLight({ state }: ArrowLightProps) {
       ? 'text-red-500'
       : state === 'yield'
       ? 'text-orange-500'
-      : 'text-zinc'
+      : 'text-zinc-600'
+
+  const ringColor =
+    state === 'go'
+      ? 'ring-green-500'
+      : state === 'caution'
+      ? 'ring-yellow-500'
+      : state === 'stop'
+      ? 'ring-red-500'
+      : state === 'yield'
+      ? 'ring-orange-500'
+      : 'ring-zinc-600'
 
   return (
-    <div className="w-8 h-8 rounded-full flex items-center justify-center bg-zinc-800">
+    <div
+      className={`w-8 h-8 rounded-full flex items-center justify-center bg-zinc-800 ring-2 ring-inset ${ringColor}`}
+    >
       <ArrowLeftIcon
         className={`w-6 h-6 ${color} ${
           state === 'yield' ? 'animation-blink' : ''