refactor: added consistent styling for buttons and tags (#1099)

Co-authored-by: Cody's Dad <40604284+AceTheCreator@users.noreply.github.com>

Author: hargunkaur286

library/src/components/Schema.tsx

@@ -209,15 +209,15 @@ 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>
                 )}
                 {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>

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>

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>