From a4f5e2bdb9d24c33d79c66cdc51436db0c72c6a6 Mon Sep 17 00:00:00 2001
From: Hargun Kaur <hargunkaur286@gmail.com>
Date: Sun, 20 Oct 2024 03:05:34 +0530
Subject: [PATCH 1/4] added consistent styling for buttons and tags

Signed-off-by: Hargun Kaur <hargunkaur286@gmail.com>
---
 library/src/components/Schema.tsx                  | 8 ++++----
 library/src/containers/Messages/Message.tsx        | 4 ++--
 library/src/containers/Messages/MessageExample.tsx | 2 +-
 library/src/containers/Operations/Operation.tsx    | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/library/src/components/Schema.tsx b/library/src/components/Schema.tsx
index 61dd88ac8..8ec964f8a 100644
--- a/library/src/components/Schema.tsx
+++ b/library/src/components/Schema.tsx
@@ -209,7 +209,7 @@ export const Schema: React.FunctionComponent<Props> = ({
                 {schema.default() !== undefined && (
                   <div className="text-xs">
                     Default value:
-                    <span className="border inline-block text-orange-600 rounded ml-1 py-0 px-2">
+                    <span className="inline-block bg-orange-600 text-white rounded ml-1 py-0 px-2">
                       {SchemaHelpers.prettifyValue(schema.default())}
                     </span>
                   </div>
@@ -217,7 +217,7 @@ export const Schema: React.FunctionComponent<Props> = ({
                 {schema.const() !== undefined && (
                   <div className="text-xs">
                     Const:
-                    <span className="border inline-block text-orange-600 rounded ml-1 py-0 px-2">
+                    <span className="inline-block bg-orange-600 text-white rounded ml-1 py-0 px-2">
                       {SchemaHelpers.prettifyValue(schema.const())}
                     </span>
                   </div>
@@ -228,7 +228,7 @@ export const Schema: React.FunctionComponent<Props> = ({
                     {schema.enum()?.map((e, idx) => (
                       <li
                         key={idx}
-                        className="border inline-block text-orange-600 rounded ml-1 py-0 px-2"
+                        className="inline-block bg-orange-600 text-white rounded ml-1 py-0 px-2"
                       >
                         <span>{SchemaHelpers.prettifyValue(e)}</span>
                       </li>
@@ -259,7 +259,7 @@ export const Schema: React.FunctionComponent<Props> = ({
                     {schema.examples()?.map((e, idx) => (
                       <li
                         key={idx}
-                        className="border inline-block text-orange-600 rounded ml-1 py-0 px-2 break-all"
+                        className="inline-block bg-orange-600 text-white rounded ml-1 py-0 px-2 break-all"
                       >
                         <span>{SchemaHelpers.prettifyValue(e)}</span>
                       </li>
diff --git a/library/src/containers/Messages/Message.tsx b/library/src/containers/Messages/Message.tsx
index 2b30b435b..62d062152 100644
--- a/library/src/containers/Messages/Message.tsx
+++ b/library/src/containers/Messages/Message.tsx
@@ -91,7 +91,7 @@ export const Message: React.FunctionComponent<Props> = ({
             <div className="border bg-gray-100 rounded px-4 py-2 mt-2">
               <div className="text-sm text-gray-700">
                 Message ID
-                <span className="border text-orange-600 rounded text-xs ml-2 py-0 px-2">
+                <span className="bg-orange-600 text-white rounded text-xs ml-2 py-0 px-2">
                   {messageId}
                 </span>
               </div>
@@ -102,7 +102,7 @@ export const Message: React.FunctionComponent<Props> = ({
             <div className="border bg-gray-100 rounded px-4 py-2 mt-2">
               <div className="text-sm text-gray-700">
                 Correlation ID
-                <span className="border text-orange-600 rounded text-xs ml-2 py-0 px-2">
+                <span className="bg-orange-600 text-white rounded text-xs ml-2 py-0 px-2 bg-orange-300">
                   {correlationId.location()}
                 </span>
               </div>
diff --git a/library/src/containers/Messages/MessageExample.tsx b/library/src/containers/Messages/MessageExample.tsx
index d2fcb7c63..8fcf1f305 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 bg-gray-200 text-sm text-center rounded focus:outline-none">
             {type}
           </span>
         </CollapseButton>
diff --git a/library/src/containers/Operations/Operation.tsx b/library/src/containers/Operations/Operation.tsx
index af98dd6c7..504759e02 100644
--- a/library/src/containers/Operations/Operation.tsx
+++ b/library/src/containers/Operations/Operation.tsx
@@ -170,7 +170,7 @@ export const OperationInfo: React.FunctionComponent<Props> = (props) => {
   const specV = useSpec().version();
   const version = specV.localeCompare('2.6.0', undefined, { numeric: true });
   const isAsyncAPIv2 = version === 0;
-  const { borderColor, typeLabel } =
+  const { backgroundColor, typeLabel } =
     CommonHelpers.getOperationDesignInformation({
       type,
       config,
@@ -181,7 +181,7 @@ export const OperationInfo: React.FunctionComponent<Props> = (props) => {
       <div className="mb-4">
         <h3>
           <span
-            className={`font-mono border uppercase p-1 rounded mr-2 ${borderColor}`}
+            className={`font-mono text-white uppercase p-1 rounded mr-2 ${backgroundColor}`}
             title={type}
           >
             {typeLabel}
@@ -223,7 +223,7 @@ export const OperationInfo: React.FunctionComponent<Props> = (props) => {
         <div className="border bg-gray-100 rounded px-4 py-2 mt-2">
           <div className="text-sm text-gray-700">
             Operation ID
-            <span className="border text-orange-600 rounded text-xs ml-2 py-0 px-2">
+            <span className="bg-orange-600 text-white rounded text-xs ml-2 py-0 px-2">
               {operationId}
             </span>
           </div>

From cc67a9d568842f9676dd96e34e11ca0d58de843f Mon Sep 17 00:00:00 2001
From: Hargun Kaur <hargunkaur286@gmail.com>
Date: Wed, 23 Oct 2024 15:37:44 +0530
Subject: [PATCH 2/4] added changes

Signed-off-by: Hargun Kaur <hargunkaur286@gmail.com>
---
 library/src/containers/Messages/Message.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/library/src/containers/Messages/Message.tsx b/library/src/containers/Messages/Message.tsx
index 62d062152..2b30b435b 100644
--- a/library/src/containers/Messages/Message.tsx
+++ b/library/src/containers/Messages/Message.tsx
@@ -91,7 +91,7 @@ export const Message: React.FunctionComponent<Props> = ({
             <div className="border bg-gray-100 rounded px-4 py-2 mt-2">
               <div className="text-sm text-gray-700">
                 Message ID
-                <span className="bg-orange-600 text-white rounded text-xs ml-2 py-0 px-2">
+                <span className="border text-orange-600 rounded text-xs ml-2 py-0 px-2">
                   {messageId}
                 </span>
               </div>
@@ -102,7 +102,7 @@ export const Message: React.FunctionComponent<Props> = ({
             <div className="border bg-gray-100 rounded px-4 py-2 mt-2">
               <div className="text-sm text-gray-700">
                 Correlation ID
-                <span className="bg-orange-600 text-white rounded text-xs ml-2 py-0 px-2 bg-orange-300">
+                <span className="border text-orange-600 rounded text-xs ml-2 py-0 px-2">
                   {correlationId.location()}
                 </span>
               </div>

From 141f3fe1930108838c2af1ea32522c975334343a Mon Sep 17 00:00:00 2001
From: Hargun Kaur <hargunkaur286@gmail.com>
Date: Wed, 23 Oct 2024 15:40:24 +0530
Subject: [PATCH 3/4] added changes

Signed-off-by: Hargun Kaur <hargunkaur286@gmail.com>
---
 library/src/containers/Messages/Message.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/library/src/containers/Messages/Message.tsx b/library/src/containers/Messages/Message.tsx
index 2b30b435b..f7466e57e 100644
--- a/library/src/containers/Messages/Message.tsx
+++ b/library/src/containers/Messages/Message.tsx
@@ -91,7 +91,7 @@ export const Message: React.FunctionComponent<Props> = ({
             <div className="border bg-gray-100 rounded px-4 py-2 mt-2">
               <div className="text-sm text-gray-700">
                 Message ID
-                <span className="border text-orange-600 rounded text-xs ml-2 py-0 px-2">
+                <span className="bg-orange-600 text-white rounded text-xs ml-2 py-0 px-2">
                   {messageId}
                 </span>
               </div>
@@ -102,7 +102,7 @@ export const Message: React.FunctionComponent<Props> = ({
             <div className="border bg-gray-100 rounded px-4 py-2 mt-2">
               <div className="text-sm text-gray-700">
                 Correlation ID
-                <span className="border text-orange-600 rounded text-xs ml-2 py-0 px-2">
+                <span className="bg-orange-600 text-white rounded text-xs ml-2 py-0 px-2">
                   {correlationId.location()}
                 </span>
               </div>

From 76246cb43cc9ac6ec7a2150b4be60593d5d23897 Mon Sep 17 00:00:00 2001
From: Hargun Kaur <hargunkaur286@gmail.com>
Date: Wed, 23 Oct 2024 15:41:45 +0530
Subject: [PATCH 4/4] reverted changes in messageExample file

Signed-off-by: Hargun Kaur <hargunkaur286@gmail.com>
---
 library/src/containers/Messages/MessageExample.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/library/src/containers/Messages/MessageExample.tsx b/library/src/containers/Messages/MessageExample.tsx
index 8fcf1f305..d2fcb7c63 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 bg-gray-200 text-sm 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:outline-none">
             {type}
           </span>
         </CollapseButton>