New version

Author: javizqh

package.json

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

src/components/Explorer/Explorer.tsx

@@ -351,27 +351,27 @@ const Explorer = ({
   return (
     <StyledSidebarContainer id={api.name}>
       <StyledSidebarEntry>
-        <StyledSidebarEntryMenu bgColor={theme.palette.secondary}>
+        <StyledSidebarEntryMenu bgColor={theme.palette.primary}>
           <MenuButton
             id="new-file-button"
             onClick={() => handleCreateFile(undefined)}
             title="Create a new file"
           >
-            <AddIcon className="bt-icon" fill={"var(--icon)"} />
+            <AddIcon fill={theme.palette.text} />
           </MenuButton>
           <MenuButtonStroke
             id="new-folder-button"
             onClick={() => handleCreateFolder(undefined)}
             title="Create a new folder"
           >
-            <AddFolderIcon className="bt-icon" stroke={"var(--icon)"} />
+            <AddFolderIcon stroke={theme.palette.text} />
           </MenuButtonStroke>
           <MenuButtonStroke
             id="refresh-explorer-button"
             onClick={() => fetchFileList()}
             title="Refresh View"
           >
-            <RefreshIcon className="bt-icon" stroke={"var(--icon)"} />
+            <RefreshIcon stroke={theme.palette.text} />
           </MenuButtonStroke>
           <div style={{ marginLeft: "auto" }} />
           {currentFile && (
@@ -381,14 +381,14 @@ const Explorer = ({
                 onClick={handleRenameCurrentFile}
                 title="Rename file"
               >
-                <RenameIcon className="bt-icon" stroke={"var(--icon)"} />
+                <RenameIcon stroke={theme.palette.text} />
               </MenuButtonStroke>
               <MenuButton
                 id="delete-file-button"
                 onClick={handleDeleteCurrentFile}
                 title="Delete file"
               >
-                <DeleteIcon className="bt-icon" fill={"var(--icon)"} />
+                <DeleteIcon fill={theme.palette.text} />
               </MenuButton>
             </>
           )}

src/components/FileEditor/TextEditor.tsx

@@ -266,7 +266,6 @@ const FileEditor = ({
 
   return (
     <Editor
-      className="file-editor"
       width="100%"
       height="100%"
       defaultLanguage="python"

src/components/Modals/NewFileModal.tsx

@@ -38,63 +38,63 @@ class CardEntryProps {
   }
 }
 
+const NewFileModal = ({
+  onSubmit,
+  isOpen,
+  onClose,
+  fileList,
+  location,
+}: {
+  onSubmit: Function;
+  isOpen: boolean;
+  onClose: Function;
+  fileList: Entry[];
+  location: string;
+}) => {
+  const theme = useTheme();
+  const focusInputRef = useRef<HTMLInputElement>(null);
+  const [formState, setFormState] = useState(initialNewFileModalData);
+  const [template, setTemplate] = useState<string>("empty");
+  const [creationType, setCreationType] = useState<string>("plain");
+  const [isCreationAllowed, allowCreation] = useState<boolean>(false);
+  // Search lists for valid names
+  const [searchActionsList, setSearchActionsList] = useState<Entry[]>([]);
+  const [searchPlainList, setSearchPlainList] = useState<Entry[]>([]);
+
 ///////////////////////// TYPES ////////////////////////////////////////////////
 const plain = new CardEntryProps(
   "plain",
   "plainType",
-  <ActionTeplateIcon className="bt-icon" fill={"var(--icon)"} />,
+  <ActionTeplateIcon fill={theme.palette.text} />,
   "Plain File"
 );
 const actions = new CardEntryProps(
   "actions",
   "actionsType",
-  <IOTeplateIcon className="bt-icon" fill={"var(--icon)"} />,
+  <IOTeplateIcon fill={theme.palette.text} />,
   "Action"
 );
 
 ///////////////////////// ACTIONS //////////////////////////////////////////////
 const empty = new CardEntryProps(
   "empty",
   "emptyTemplate",
-  <EmptyTeplateIcon className="bt-icon" stroke={"var(--icon)"} />,
+  <EmptyTeplateIcon stroke={theme.palette.text} />,
   "Empty"
 );
 const action = new CardEntryProps(
   "action",
   "actionTemplate",
-  <ActionTeplateIcon className="bt-icon" fill={"var(--icon)"} />,
+  <ActionTeplateIcon fill={theme.palette.text} />,
   "Action"
 );
 const io = new CardEntryProps(
   "io",
   "ioTemplate",
-  <IOTeplateIcon className="bt-icon" fill={"var(--icon)"} />,
+  <IOTeplateIcon fill={theme.palette.text} />,
   "I/O"
 );
 
-const NewFileModal = ({
-  onSubmit,
-  isOpen,
-  onClose,
-  fileList,
-  location,
-}: {
-  onSubmit: Function;
-  isOpen: boolean;
-  onClose: Function;
-  fileList: Entry[];
-  location: string;
-}) => {
-  const theme = useTheme();
-  const focusInputRef = useRef<HTMLInputElement>(null);
-  const [formState, setFormState] = useState(initialNewFileModalData);
-  const [template, setTemplate] = useState<string>("empty");
-  const [creationType, setCreationType] = useState<string>("plain");
-  const [isCreationAllowed, allowCreation] = useState<boolean>(false);
-  // Search lists for valid names
-  const [searchActionsList, setSearchActionsList] = useState<Entry[]>([]);
-  const [searchPlainList, setSearchPlainList] = useState<Entry[]>([]);
-
   const typesCardEntryProps = [plain, actions];
   const actionsCardEntryProps = [empty, action, io];
 

src/components/Modals/UploadModal.tsx

@@ -127,7 +127,6 @@ const UploadModal = ({
           <StyledModalDrop
             ref={uploadAreaRef}
             htmlFor="uploadDropInput"
-            className="bt-modal-drop-container"
             onDragOver={(e) => {
               e.preventDefault();
             }}

src/components/StatusBar/StatusBar.tsx

@@ -66,10 +66,10 @@ const StatusBar = ({
           <StyledStatusBarEntry text={theme.palette.text} title="ROS 2 version">
             <label>{`ROS 2: ${dockerData.ros_version}`}</label>
           </StyledStatusBarEntry>
-          <StyledStatusBarEntry title="GPU status">
+          <StyledStatusBarEntry text={theme.palette.text} title="GPU status">
             <label>{`GPU: ${dockerData.gpu_avaliable}`}</label>
           </StyledStatusBarEntry>
-          <StyledStatusBarEntry title="Robotics Backend version">
+          <StyledStatusBarEntry text={theme.palette.text} title="Robotics Backend version">
             <label>{`Robotics Backend: ${dockerData.robotics_backend_version}`}</label>
           </StyledStatusBarEntry>
         </>