From 4a58a4082b3e47b86b776c19ee20bc2101273770 Mon Sep 17 00:00:00 2001
From: trashtemp <96388163+trashtemp@users.noreply.github.com>
Date: Sat, 15 Jan 2022 12:55:23 +0100
Subject: [PATCH] fix(msgbar): added support for keyboard focus

---
 .../common/messaging/bars/MessageOverlayBar.tsx     | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/common/messaging/bars/MessageOverlayBar.tsx b/src/components/common/messaging/bars/MessageOverlayBar.tsx
index 8ee78a23..6ac17916 100644
--- a/src/components/common/messaging/bars/MessageOverlayBar.tsx
+++ b/src/components/common/messaging/bars/MessageOverlayBar.tsx
@@ -42,12 +42,12 @@ const OverlayBar = styled.div`
     right: 0;
     top: -18px;
     z-index: 0;
-    overflow: hidden;
+    //overflow: hidden;
     transition: box-shadow 0.1s ease-out;
 
     border-radius: 5px;
     background: var(--primary-header);
-    //border: 1px solid var(--background);
+    border: 1px solid var(--background);
 
     &:hover {
         box-shadow: rgb(0 0 0 / 20%) 0px 2px 10px;
@@ -55,19 +55,24 @@ const OverlayBar = styled.div`
 `;
 
 const Entry = styled.div`
-    height: 30px;
-    width: 30px;
+    height: 32px;
+    width: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     cursor: pointer;
     transition: 0.2s ease background-color;
+    border-radius: var(--border-radius);
 
     &:hover {
         background: var(--secondary-header);
     }
 
+    &:focus {
+        box-shadow: 0 0 0 2.5pt var(--accent);
+    }
+
     &:active {
         svg {
             transform: translateY(1px);