Fix code highlighting (#44)

* Fixes highlight * remove not used styles --------- Co-authored-by: agusgroh <[email protected]>
scanoss · Sep 20, 2024 · 309e630 · 309e630
1 parent b082435
commit 309e630
Show file tree

Hide file tree

Showing 4 changed files with 732 additions and 26 deletions.
diff --git a/frontend/src/components/CodeViewer.tsx b/frontend/src/components/CodeViewer.tsx
@@ -1,6 +1,6 @@
 import { Editor } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
-import { memo, useRef } from 'react';
+import { useRef } from 'react';
 
 import { getHighlightLineRanges } from '@/modules/results/utils';
 
@@ -17,7 +17,7 @@ interface CodeViewerProps {
   width?: string;
 }
 
-export default memo(function CodeViewer({
+export default function CodeViewer({
   content,
   editorType,
   height = '100%',
@@ -45,7 +45,10 @@ export default memo(function CodeViewer({
           range: new monaco.Range(1, 1, totalLines, 1),
           options: {
             isWholeLine: true,
-            className: 'line-highlight-decoration',
+            className:
+              editorType === 'local'
+                ? 'bg-highlight-local-line'
+                : 'bg-highlight-remote-line',
           },
         },
       ];
@@ -64,8 +67,14 @@ export default memo(function CodeViewer({
         range: new monaco.Range(start, 1, end, 1),
         options: {
           isWholeLine: true,
-          className: 'line-highlight-decoration',
-          inlineClassName: 'inline-highlight-decoration',
+          className:
+            editorType === 'local'
+              ? 'bg-highlight-local-line'
+              : 'bg-highlight-remote-line',
+          inlineClassName:
+            editorType === 'local'
+              ? 'bg-highlight-local-inline'
+              : 'bg-highlight-remote-inline',
         },
       })
     );
@@ -103,4 +112,4 @@ export default memo(function CodeViewer({
       }}
     />
   );
-});
+}
diff --git a/frontend/src/style.css b/frontend/src/style.css
@@ -81,23 +81,3 @@ body {
     --chart-5: 340 75% 55%;
   }
 }
-
-.editor-local {
-  .line-highlight-decoration {
-    background-color: #392428;
-  }
-
-  .inline-highlight-decoration {
-    background-color: #592b2d;
-  }
-}
-
-.editor-remote {
-  .line-highlight-decoration {
-    background-color: #26352c;
-  }
-
-  .inline-highlight-decoration {
-    background-color: #324f36;
-  }
-}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -63,6 +63,12 @@ module.exports = {
           accent: 'hsl(var(--snippet-accent))',
           border: 'hsl(var(--snippet-border))',
         },
+        highlight:{
+          'local-line': '#392428',
+          'local-inline': '#592b2d',
+          'remote-line': '#26352c',
+          'remote-inline': '#324f36',
+        }
       },
       borderRadius: {
         lg: 'var(--radius)',