From 1083885de492d0c9a6e6a26217f2402cbdd39fdc Mon Sep 17 00:00:00 2001
From: ItshMoh <mohan.kumar.min22@itbhu.ac.in>
Date: Thu, 3 Oct 2024 14:00:21 +0530
Subject: [PATCH 1/2] added visible focus to the button

---
 library/src/components/CollapseButton.tsx          | 2 +-
 library/src/containers/Messages/MessageExample.tsx | 2 +-
 library/src/containers/Operations/Operation.tsx    | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/library/src/components/CollapseButton.tsx b/library/src/components/CollapseButton.tsx
index bea5a7a00..70a4040d6 100644
--- a/library/src/components/CollapseButton.tsx
+++ b/library/src/components/CollapseButton.tsx
@@ -33,7 +33,7 @@ export const CollapseButton: React.FunctionComponent<Props> = ({
 }) => (
   <button
     {...rest}
-    className={`focus:outline-none ${rest.className}`}
+    className={`focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${rest.className}`}
     type="button"
   >
     <div className="inline-block">{children}</div>
diff --git a/library/src/containers/Messages/MessageExample.tsx b/library/src/containers/Messages/MessageExample.tsx
index d2fcb7c63..6d66dcb2b 100644
--- a/library/src/containers/Messages/MessageExample.tsx
+++ b/library/src/containers/Messages/MessageExample.tsx
@@ -70,7 +70,7 @@ export const Example: React.FunctionComponent<ExampleProps> = ({
             className: 'fill-current text-gray-200',
           }}
         >
-          <span className="inline-block w-20 py-0.5 mr-1 text-gray-200 text-sm border text-center rounded focus:outline-none">
+          <span className="inline-block w-20 py-0.5 mr-1 text-gray-200 text-sm border text-center rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
             {type}
           </span>
         </CollapseButton>
diff --git a/library/src/containers/Operations/Operation.tsx b/library/src/containers/Operations/Operation.tsx
index 26dc958d7..9243b7c10 100644
--- a/library/src/containers/Operations/Operation.tsx
+++ b/library/src/containers/Operations/Operation.tsx
@@ -300,7 +300,7 @@ export const OperationReplyInfo: React.FunctionComponent<Props> = (props) => {
                       onClick={() => setShowChannel((prev) => !prev)}
                       expanded={showChannel}
                     >
-                      <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:outline-none">
+                      <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                         View channel details
                       </span>
                     </CollapseButton>
@@ -324,7 +324,7 @@ export const OperationReplyInfo: React.FunctionComponent<Props> = (props) => {
                   onClick={() => setShowMessages((prev) => !prev)}
                   expanded={showMessages}
                 >
-                  <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:outline-none">
+                  <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                     Expected Reply{' '}
                     {replyMessages.length > 1 ? 'Messages' : 'Message'}
                   </span>

From e1875501f5a59e7ebb34e3009fa86672b046d342 Mon Sep 17 00:00:00 2001
From: ItshMoh <mohan.kumar.min22@itbhu.ac.in>
Date: Sat, 5 Oct 2024 10:48:10 +0530
Subject: [PATCH 2/2] added visible focus according to theme.

---
 library/src/components/CollapseButton.tsx          | 2 +-
 library/src/containers/Messages/MessageExample.tsx | 2 +-
 library/src/containers/Operations/Operation.tsx    | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/library/src/components/CollapseButton.tsx b/library/src/components/CollapseButton.tsx
index 70a4040d6..19e76b135 100644
--- a/library/src/components/CollapseButton.tsx
+++ b/library/src/components/CollapseButton.tsx
@@ -33,7 +33,7 @@ export const CollapseButton: React.FunctionComponent<Props> = ({
 }) => (
   <button
     {...rest}
-    className={`focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${rest.className}`}
+    className={`focus:outline-[#c3e88d] focus:outline-2 focus:outline-offset-2${rest.className}`}
     type="button"
   >
     <div className="inline-block">{children}</div>
diff --git a/library/src/containers/Messages/MessageExample.tsx b/library/src/containers/Messages/MessageExample.tsx
index 6d66dcb2b..3c2ee5025 100644
--- a/library/src/containers/Messages/MessageExample.tsx
+++ b/library/src/containers/Messages/MessageExample.tsx
@@ -70,7 +70,7 @@ export const Example: React.FunctionComponent<ExampleProps> = ({
             className: 'fill-current text-gray-200',
           }}
         >
-          <span className="inline-block w-20 py-0.5 mr-1 text-gray-200 text-sm border text-center rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+          <span className="inline-block w-20 py-0.5 mr-1 text-gray-200 text-sm border text-center rounded focus:outline-[#c3e88d] focus:outline-2 focus:outline-offset-2">
             {type}
           </span>
         </CollapseButton>
diff --git a/library/src/containers/Operations/Operation.tsx b/library/src/containers/Operations/Operation.tsx
index 9243b7c10..b96d4972d 100644
--- a/library/src/containers/Operations/Operation.tsx
+++ b/library/src/containers/Operations/Operation.tsx
@@ -300,7 +300,7 @@ export const OperationReplyInfo: React.FunctionComponent<Props> = (props) => {
                       onClick={() => setShowChannel((prev) => !prev)}
                       expanded={showChannel}
                     >
-                      <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                      <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:outline-[#c3e88d] focus:outline-2 focus:outline-offset-2">
                         View channel details
                       </span>
                     </CollapseButton>
@@ -324,7 +324,7 @@ export const OperationReplyInfo: React.FunctionComponent<Props> = (props) => {
                   onClick={() => setShowMessages((prev) => !prev)}
                   expanded={showMessages}
                 >
-                  <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                  <span className="inline-block py-0.5 mr-1 text-gray-500 text-xs text-center rounded focus:outline-[#c3e88d] focus:outline-2 focus:outline-offset-2">
                     Expected Reply{' '}
                     {replyMessages.length > 1 ? 'Messages' : 'Message'}
                   </span>