Fix typo

Author: javizqh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jderobot-ide-interface",
-  "version": "0.2.66",
+  "version": "0.2.67",
   "main": "dist/main.js",
   "typings": "dist/index.d.ts",
   "files": [

src/components/FileEditor/TextEditor.tsx

@@ -134,15 +134,15 @@ const FileEditor = ({
         inherit: true,
         rules: [],
         colors: {
-          "editor.background": theme.palette.bg,
+          "editor.bg": theme.palette.bg,
         },
       });
       monacoRef.current.editor.defineTheme("light-theme", {
         base: "vs",
         inherit: true,
         rules: [],
         colors: {
-          "editor.background": theme.palette.bg,
+          "editor.bg": theme.palette.bg,
         },
       });
     }
@@ -154,15 +154,15 @@ const FileEditor = ({
       inherit: true,
       rules: [],
       colors: {
-        "editor.background": theme.palette.bg,
+        "editor.bg": theme.palette.bg,
       },
     });
     monaco.editor.defineTheme("light-theme", {
       base: "vs",
       inherit: true,
       rules: [],
       colors: {
-        "editor.background": theme.palette.bg,
+        "editor.bg": theme.palette.bg,
       },
     });
   };

src/components/IdeInterface/IdeInterface.tsx

@@ -107,7 +107,7 @@ const IdeInterface = ({
             ))}
           </ResizableColumn>
           <StyledIdeVertContainer bgColor={theme.palette?.primary}>
-            <StyledIdeContainer bgColor={theme.palette?.background}>
+            <StyledIdeContainer bgColor={theme.palette?.bg}>
               <FileEditor
                 currentFile={baseFile ? baseFile : currentFile}
                 changeCurrentFile={setCurrentFile}
@@ -123,7 +123,7 @@ const IdeInterface = ({
             </StyledIdeContainer>
           </StyledIdeVertContainer>
           <StyledIdeVertContainer bgColor={theme.palette?.primary}>
-            <StyledIdeContainer bgColor={theme.palette?.background}>
+            <StyledIdeContainer bgColor={theme.palette?.bg}>
               <ViewersContainer viewers={viewers} splashIcon={splashIcon} />
             </StyledIdeContainer>
           </StyledIdeVertContainer>

src/components/ProgressBar/ProgressBar.tsx

@@ -9,7 +9,7 @@ const ProgressBar = ({ completed }: { completed: number }) => {
     <StyledProgressBar
       text={theme.palette.text}
       color={theme.palette.progressBar.color}
-      bgColor={theme.palette.progressBar.background}
+      bgColor={theme.palette.progressBar.bg}
       progress={completed}
     >
       <div>

src/components/ResizableLayout/ResizableComponents.tsx

@@ -122,19 +122,19 @@ export const ResizableColumn = ({ children }: { children: any[] }) => {
 
   if (children.length === 1) {
     return (
-      <StyledVertContiner bgColor={theme.palette?.background}>
+      <StyledVertContiner bgColor={theme.palette?.bg}>
         {children[0]}
       </StyledVertContiner>
     );
   }
 
   if (children.length === 2) {
     return (
-      <StyledVertContiner bgColor={theme.palette?.background}>
+      <StyledVertContiner bgColor={theme.palette?.bg}>
         <ResizableVert height={100 / children.length} max={100} snap={[0]}>
           {children[0]}
         </ResizableVert>
-        <StyledVertFillerContiner bgColor={theme.palette?.background}>
+        <StyledVertFillerContiner bgColor={theme.palette?.bg}>
           {children[1]}
         </StyledVertFillerContiner>
       </StyledVertContiner>
@@ -143,7 +143,7 @@ export const ResizableColumn = ({ children }: { children: any[] }) => {
 
   return (
     <StyledVertContiner
-      bgColor={theme.palette?.background}
+      bgColor={theme.palette?.bg}
     ></StyledVertContiner>
   );
 };
@@ -258,22 +258,22 @@ export const CollapsableResizableColumn = memo( function CollapsableResizableCol
 
   // if (children.length === 1) {
   //   return (
-  //     <StyledVertContiner bgColor={theme.palette?.background}>
-  //       <StyledVertFillerContiner bgColor={theme.palette?.background}>
+  //     <StyledVertContiner bgColor={theme.palette?.bg}>
+  //       <StyledVertFillerContiner bgColor={theme.palette?.bg}>
   //         {children[0]}
   //       </StyledVertFillerContiner>
   //     </StyledVertContiner>
   //   );
   // }
 
   return (
-    <StyledVertContiner bgColor={theme.palette?.background}>
+    <StyledVertContiner bgColor={theme.palette?.bg}>
       {children.slice(0, children.length - 1).map((comp, i) => (
         <ResizableVert key={`v-cont${i}`} height={100 / children.length} max={100} min={0} snap={[0]}>
           {comp}
         </ResizableVert>
       ))}
-      <StyledVertFillerContiner bgColor={theme.palette?.background}>
+      <StyledVertFillerContiner bgColor={theme.palette?.bg}>
         {children[children.length - 1]}
       </StyledVertFillerContiner>
     </StyledVertContiner>