refactor: CodeEditor - styles update

Author: RohitRaj011

src/Common/CodeEditor/CodeEditorRenderer.tsx

@@ -79,7 +79,7 @@ export const CodeEditorRenderer = ({
     ) : (
         <div ref={codeMirrorParentDivRef} className={`w-100 ${codeEditorParentClassName}`}>
             {shebang && (
-                <div className="code-editor__shebang flexbox text-white">
+                <div className="code-editor__shebang flexbox text__white">
                     <div className="code-editor__shebang__gutter dc__align-self-stretch" />
                     {shebang}
                 </div>

src/Common/CodeEditor/codeEditor.scss

@@ -14,34 +14,6 @@
  * limitations under the License.
  */
 
-// CODE MIRROR THEME
-.cm-theme,
-.cm-merge-theme {
-    &__light {
-        --bg-code-editor-base: #ffffff;
-        --bg-code-editor-base-gutter: #f7fafc;
-        --bg-code-editor-red: #fdf0f0;
-        --bg-code-editor-red-gutter: #fde7e7;
-        --bg-code-editor-red-highlight: #fcbcbc;
-        --bg-code-editor-green: #f2fffa;
-        --bg-code-editor-green-gutter: #e9fbf4;
-        --bg-code-editor-green-highlight: #b6e9d3;
-        --active-line: #f0f7ff;
-    }
-
-    &__dark {
-        --bg-code-editor-base: #181920;
-        --bg-code-editor-base-gutter: #15161f;
-        --bg-code-editor-red: #311f27;
-        --bg-code-editor-red-gutter: #44242c;
-        --bg-code-editor-red-highlight: #733239;
-        --bg-code-editor-green: #212b2b;
-        --bg-code-editor-green-gutter: #293932;
-        --bg-code-editor-green-highlight: #3d5c46;
-        --active-line: #28364c;
-    }
-}
-
 // CODE MIRROR OVERRIDES
 .cm-mergeView {
     height: 100%;
@@ -94,6 +66,7 @@
 
     .cm-panels {
         background-color: var(--bg-code-editor);
+        z-index: 0;
     }
 
     .cm-panels-top {
@@ -125,12 +98,15 @@
         }
 
         &:has(.cm-tooltip-lint) .code-editor__schema-tooltip {
-            border-top: 1px solid var(--N100);
             border-top-left-radius: 0;
             border-top-right-radius: 0;
         }
     }
 
+    .cm-tooltip-section:not(:first-child) {
+        border-top: 1px solid var(--N100);
+    }
+
     .cm-tooltip-lint {
         color: var(--white);
         background-color: var(--bg-tooltip-black);
@@ -199,6 +175,10 @@
 .code-editor {
     &__schema-tooltip {
         background-color: var(--bg-tooltip-black);
+
+        &__source {
+            color: var(--button-text-on-dark);
+        }
     }
 
     &__container {

src/Common/CodeEditor/utils.tsx

@@ -99,7 +99,7 @@ export const getFoldGutterElement = (open: boolean) => {
 const getHoverElement = (schemaURI: CodeEditorProps['schemaURI']) => (data: HoverTexts) => {
     const hoverContainer = document.createElement('div')
     const node = (
-        <div className="code-editor__schema-tooltip dc__mxw-300 flexbox-col px-10 py-6 br-4 fs-12 lh-18 text-white">
+        <div className="code-editor__schema-tooltip dc__mxw-300 flexbox-col px-10 py-6 br-4 fs-12 lh-18 text__white">
             {data.message && <p className="m-0">{data.message}</p>}
             {data.typeInfo && (
                 <p
@@ -111,22 +111,26 @@ const getHoverElement = (schemaURI: CodeEditorProps['schemaURI']) => (data: Hove
                 />
             )}
             {schemaURI && (
-                <a className="m-0 dc__w-fit-content" href={schemaURI} target="_blank" rel="noreferrer">
+                <a
+                    className="m-0 dc__w-fit-content code-editor__schema-tooltip__source"
+                    href={schemaURI}
+                    target="_blank"
+                    rel="noreferrer"
+                >
                     Source
                 </a>
             )}
         </div>
     )
 
-    hoverContainer.classList.add('dc__w-fit-content')
     hoverContainer.innerHTML = renderToString(node)
     return hoverContainer
 }
 
 export const getReadOnlyElement = () => {
     const dom = document.createElement('div')
     const node = (
-        <div className="code-editor__read-only-tooltip py-6 px-10 br-4 text-white">
+        <div className="code-editor__read-only-tooltip py-6 px-10 br-4 text__white">
             <p className="m-0 fs-12 lh-18">Cannot edit in read-only editor</p>
         </div>
     )