Repository: provectus/kafka-ui
Issue: Diff overlay of Avro schemas in comparision doesn't display anymore
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed
type/regression

**Describe the bug** 
Diff overlay of Avro schemas in comparision doesn't display anymore.

**Expected behavior**
Diff overlay of Avro schema in comparision show changes between versions.

**Set up**
**Steps to Reproduce**

1. Enter a schema registry with avro schemas.
2. Open a avro schema with multiple version of it.
3. Enter comparision and select different versions of the avro schema.



**Additional context**
Introduced in version 0.6.1, works in version 0.6.0.


Issue comments:
Hello there flfrolund! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
Related: #3576

0.5.0:
<img width="1006" alt="image" src="https://user-images.githubusercontent.com/1494347/232004306-ad152297-ed7b-4987-874c-e72d1c164a86.png">
master:
<img width="983" alt="image" src="https://user-images.githubusercontent.com/1494347/232004357-30db3e4d-3e54-46ff-afbe-fb17530c44a4.png">


Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.styled.ts b/kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.styled.ts
index 6d0f6598b48..eb71ad1ef27 100644
--- a/kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.styled.ts
+++ b/kafka-ui-react-app/src/components/KsqlDb/Query/QueryForm/QueryForm.styled.ts
@@ -33,6 +33,7 @@ export const Fieldset = styled.fieldset`
   flex: 1;
   flex-direction: column;
   gap: 8px;
+  color: ${({ theme }) => theme.default.color.normal};
 `;
 
 export const ButtonsContainer = styled.div`
diff --git a/kafka-ui-react-app/src/components/Schemas/Diff/Diff.styled.ts b/kafka-ui-react-app/src/components/Schemas/Diff/Diff.styled.ts
index 520f9f6c8ad..c5ecef258a0 100644
--- a/kafka-ui-react-app/src/components/Schemas/Diff/Diff.styled.ts
+++ b/kafka-ui-react-app/src/components/Schemas/Diff/Diff.styled.ts
@@ -14,9 +14,6 @@ export const DiffWrapper = styled.div`
     background-color: ${({ theme }) => theme.default.backgroundColor};
     color: ${({ theme }) => theme.default.color.normal};
   }
-  .ace_line {
-    background-color: ${({ theme }) => theme.default.backgroundColor};
-  }
   .ace_gutter-cell {
     background-color: ${({ theme }) =>
       theme.ksqlDb.query.editor.cell.backgroundColor};
@@ -39,10 +36,10 @@ export const DiffWrapper = styled.div`
   .ace_string {
     color: ${({ theme }) => theme.ksqlDb.query.editor.aceString};
   }
-  > .codeMarker {
-    background: ${({ theme }) => theme.icons.warningIcon};
+  .codeMarker {
+    background-color: ${({ theme }) => theme.ksqlDb.query.editor.codeMarker};
     position: absolute;
-    z-index: 20;
+    z-index: 2000;
   }
 `;
 
diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts
index 33dbf1c619e..70196bdeae7 100644
--- a/kafka-ui-react-app/src/theme/theme.ts
+++ b/kafka-ui-react-app/src/theme/theme.ts
@@ -366,6 +366,7 @@ export const theme = {
         cursor: Colors.neutral[90],
         variable: Colors.red[50],
         aceString: Colors.green[60],
+        codeMarker: Colors.yellow[20],
       },
     },
   },
@@ -761,6 +762,7 @@ export const darkTheme: ThemeType = {
         cursor: Colors.neutral[0],
         variable: Colors.red[50],
         aceString: Colors.green[60],
+        codeMarker: Colors.yellow[20],
       },
     },
   },


Test patch: