fix: update notes border color, update node and notes code block background (#4617)

* Fixed code block color on notes and node

* Changed color of list bullets

* Changed selected border color for note node

* [autofix.ci] apply automated fixes

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>

src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx

@@ -149,7 +149,7 @@ export default function NodeDescription({
             <Markdown
               linkTarget="_blank"
               className={cn(
-                "markdown prose flex h-full w-full flex-col text-[13px] leading-5 word-break-break-word",
+                "markdown prose flex w-full flex-col text-[13px] leading-5 word-break-break-word [&_pre]:!bg-code-description-background [&_pre_code]:!bg-code-description-background",
                 mdClassName,
               )}
             >

src/frontend/src/CustomNodes/NoteNode/index.tsx

@@ -54,7 +54,7 @@ function NoteNode({
           setSize({ width: width - 25, height: height - 25 });
         }}
         isVisible={selected}
-        lineClassName="border-[3px] border-border"
+        lineClassName="!border !border-muted-foreground"
       />
       <div
         data-testid="note_node"
@@ -86,11 +86,11 @@ function NoteNode({
                 ? ""
                 : "dark:!ring-background dark:text-background",
             )}
-            mdClassName={
+            mdClassName={cn(
               COLOR_OPTIONS[bgColor] === null
                 ? "dark:prose-invert"
-                : "dark:!text-background"
-            }
+                : "dark:!text-background",
+            )}
             style={{ backgroundColor: COLOR_OPTIONS[bgColor] ?? "#00000000" }}
             charLimit={2500}
             nodeId={data.id}

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -2,10 +2,7 @@ import ShadTooltip from "@/components/shadTooltipComponent";
 import { useTweaksStore } from "@/stores/tweaksStore";
 import { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import {
-  oneDark,
-  tomorrow,
-} from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import {
   Tabs,
   TabsContent,
@@ -14,7 +11,6 @@ import {
 } from "../../components/ui/tabs";
 import { useDarkStore } from "../../stores/darkStore";
 import { codeTabsPropsType } from "../../types/components";
-import { cn } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
 import { Label } from "../ui/label";
@@ -152,7 +148,7 @@ export default function CodeTabsComponent({
               <SyntaxHighlighter
                 language={tab.language}
                 style={oneDark}
-                className="!my-0 h-full overflow-auto rounded-sm !rounded-t-none border border-t-0 border-border bg-code-block text-left custom-scroll"
+                className="!my-0 h-full overflow-auto rounded-sm !rounded-t-none border border-t-0 border-border text-left custom-scroll"
               >
                 {tab.code}
               </SyntaxHighlighter>

src/frontend/src/style/classes.css

@@ -249,6 +249,7 @@ pre code {
   width: 100%;
   /* Background color */
   background-color: hsl(var(--code-background)) !important;
+  color: hsl(var(--code-foreground)) !important;
 }
 
 pre {
@@ -256,6 +257,10 @@ pre {
   background-color: hsl(var(--code-background)) !important;
 }
 
+.prose li::marker {
+  color: inherit !important;
+}
+
 [type="search"]:not(:placeholder-shown)::-webkit-search-cancel-button {
   opacity: 1 !important;
 }

src/frontend/src/style/index.css

@@ -99,7 +99,9 @@
     --error-red: 0, 86%, 97%; /*hsla(0, 86%, 97%)*/
     --error-red-border: 0, 96%, 89%; /*hsla(0,96%,89%)*/
 
-    --code-background: var(--canvas);
+    --code-background: 240 6% 10%;
+    --code-description-background: 240 6% 10%;
+    --code-foreground: 240 6% 90%;
     --placeholder: 240 5% 64.9%;
     --hard-zinc: 240 5.2% 33.9%;
     --smooth-red: 0 93.3% 94.1%;
@@ -240,7 +242,9 @@
     --status-green: #4ade80;
     --status-blue: #2563eb;
     --connection: #6d6c6c;
-    --code-background: var(--background);
+    --code-background: 240 6% 10%;
+    --code-description-background: 0 0% 0%;
+    --code-foreground: 240 6% 90%;
 
     --beta-background: rgb(37 99 235);
     --beta-foreground: rgb(219 234 254);

src/frontend/tailwind.config.mjs

@@ -124,6 +124,9 @@ const config = {
         "chat-bot-icon": "var(--chat-bot-icon)",
         "chat-user-icon": "var(--chat-user-icon)",
         "code-background": "hsl(var(--code-background))",
+        "code-description-background":
+          "hsl(var(--code-description-background))",
+        "code-foreground": "hsl(var(--code-foreground))",
         canvas: {
           DEFAULT: "hsl(var(--canvas))",
           dot: "hsl(var(--canvas-dot))",
@@ -272,12 +275,12 @@ const config = {
         xs: "2px",
       },
       zIndex: {
-        '60': '60',
-        '70': '70',
-        '80': '80',
-        '90': '90',
-        '100': '100',
-        '999': '999',
+        60: "60",
+        70: "70",
+        80: "80",
+        90: "90",
+        100: "100",
+        999: "999",
       },
     },
   },