cleanup code

src/App.jsx

@@ -31,14 +31,18 @@ const theme = createTheme({
     button: {
       compile: "#e27136",
     },
+    senseboxColors: {
+      blue: "#4EAF46",
+      green: "#4EAF47",
+    },
   },
 });
 
 class App extends Component {
   componentDidMount() {
     store.dispatch(loadUser());
-    // set initial compiler 
-    console.log("compiler",  import.meta.env.VITE_INITIAL_COMPILER_URL)
+    // set initial compiler
+    console.log("compiler", import.meta.env.VITE_INITIAL_COMPILER_URL);
     store.dispatch(setCompiler(import.meta.env.VITE_INITIAL_COMPILER_URL));
   }
 

src/components/Blockly/msg/de/ui.js

@@ -147,7 +147,17 @@ export const UI = {
   compiledialog_headline: "Fehler",
   compiledialog_text:
     "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut",
-
+  compile_animation_downloads: "Downloads",
+  compile_animation_downloading: "Wird heruntergeladen...",
+  compile_animation_downloadComplete: "Herunterladen abgeschlossen",
+  compile_animation_fileName: "sketch.bin",
+  dragdrop_icon_quickAccess: "Schnellzugriff",
+  dragdrop_icon_desktop: "Desktop",
+  dragdrop_icon_downloads: "Downloads",
+  dragdrop_icon_documents: "Dokumente",
+  dragdrop_icon_pictures: "Bilder",
+  dragdrop_icon_sensebox: "SENSEBOX (E:)",
+  dragdrop_icon_fileName: "sketch.bin",
   /**
    * File Upload Dialog
    */

src/components/Blockly/msg/en/ui.js

@@ -143,6 +143,17 @@ export const UI = {
   compiledialog_headline: "Error",
   compiledialog_text:
     "While compiling an error occured. Please check your blocks and try again",
+  compile_animation_downloads: "Downloads",
+  compile_animation_downloading: "Downloading...",
+  compile_animation_downloadComplete: "Download complete",
+  compile_animation_fileName: "sketch.bin",
+  dragdrop_icon_quickAccess: "Quick Access",
+  dragdrop_icon_desktop: "Desktop",
+  dragdrop_icon_downloads: "Downloads",
+  dragdrop_icon_documents: "Documents",
+  dragdrop_icon_pictures: "Pictures",
+  dragdrop_icon_sensebox: "SENSEBOX (E:)",
+  dragdrop_icon_fileName: "sketch.bin",
 
   /**
    * File Upload Dialog

src/components/Workspace/code-compilation-icon.jsx → src/components/Workspace/CodeCompilationIcon.jsx

@@ -2,9 +2,10 @@
 
 import { Box } from "@mui/material";
 import { motion } from "framer-motion";
-import { senseboxColors } from "./theme";
+import { useTheme } from "@mui/material/styles";
 
 export function CodeCompilationIcon() {
+  const theme = useTheme();
   return (
     <Box sx={{ position: "relative", width: 500, height: 250 }}>
       <Box
@@ -13,7 +14,7 @@ export function CodeCompilationIcon() {
           inset: 16,
           bgcolor: "rgba(124, 124, 127, 0.24)",
           borderRadius: 2,
-          border: `1px solid ${senseboxColors.blue}30`,
+          border: `1px solid ${theme.palette.senseboxColors.blue}30`,
           overflow: "hidden",
           fontFamily: "monospace",
           fontSize: 24,
@@ -24,7 +25,7 @@ export function CodeCompilationIcon() {
           style={{
             position: "absolute",
             inset: 15,
-            color: senseboxColors.blue,
+            color: theme.palette.senseboxColors.blue,
           }}
           animate={{ opacity: [1, 0] }}
           transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
@@ -42,7 +43,7 @@ export function CodeCompilationIcon() {
           style={{
             position: "absolute",
             inset: 15,
-            color: senseboxColors.blue,
+            color: theme.palette.senseboxColors.blue,
           }}
           animate={{ opacity: [0, 1] }}
           transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY }}
@@ -62,7 +63,7 @@ export function CodeCompilationIcon() {
             left: 0,
             width: "100%",
             height: 2,
-            background: `linear-gradient(90deg, transparent, ${senseboxColors.blue}50, transparent)`,
+            background: `linear-gradient(90deg, transparent, ${theme.palette.senseboxColors.blue}50, transparent)`,
           }}
           animate={{ y: [0, 160, 0] }}
           transition={{

src/components/Workspace/compilation-dialog.jsx → src/components/Workspace/CompilationDialog.jsx

@@ -13,20 +13,14 @@ import {
   Typography,
   IconButton,
 } from "@mui/material";
-import { CodeCompilationIcon } from "./code-compilation-icon";
-import DownloadAnimation from "./download-animation";
-import { DragDropIcon } from "./drag-drop-icon";
-import { connect, useSelector } from "react-redux";
+import { CodeCompilationIcon } from "./CodeCompilationIcon";
+import DownloadAnimation from "./DownloadAnimation";
+import { DragDropIcon } from "./DragDropIcon";
+import { useSelector } from "react-redux";
 import * as Blockly from "blockly/core";
 import { ErrorView } from "../ErrorView/ErrorView";
-import { getPlatform } from "../../reducers/generalReducer";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faClipboardCheck,
-  faCloud,
-  faLink,
-  faXmark,
-} from "@fortawesome/free-solid-svg-icons";
+import { faLink, faXmark } from "@fortawesome/free-solid-svg-icons";
 
 const headerStyle = {
   fontSize: "1.5rem",
@@ -46,7 +40,6 @@ function CompilationDialog({
   const [activeStep, setActiveStep] = useState(0);
   const [sketchId, setSketchId] = useState(null);
   const [error, setError] = useState(null);
-  const [magicLink, setMagicLink] = useState(null);
   const compilerUrl = useSelector((state) => state.general.compiler);
 
   useEffect(() => {
@@ -274,7 +267,6 @@ CompilationDialog.propTypes = {
   filename: PropTypes.string.isRequired,
   platform: PropTypes.bool.isRequired,
   appLink: PropTypes.string,
-  language: PropTypes.string.isRequired,
 };
 
 CompilationDialog.defaultProps = {
@@ -285,8 +277,4 @@ CompilationDialog.defaultProps = {
   onCompileComplete: () => {},
 };
 
-const mapStateToProps = (state) => ({
-  language: state.general.language,
-});
-
-export default connect(mapStateToProps)(CompilationDialog);
+export default CompilationDialog;

src/components/Workspace/Compile.jsx

@@ -5,7 +5,7 @@ import { IconButton, Tooltip } from "@mui/material";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { workspaceName } from "../../actions/workspaceActions";
-import CompilationDialog from "./compilation-dialog";
+import CompilationDialog from "./CompilationDialog";
 import withStyles from "@mui/styles/withStyles";
 
 const styles = (theme) => ({

src/components/Workspace/download-animation.jsx → src/components/Workspace/DownloadAnimation.jsx

@@ -8,12 +8,8 @@ import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
 import FolderOpenIcon from "@mui/icons-material/FolderOpen";
 import FileUploadIcon from "@mui/icons-material/FileUpload";
 import CloseIcon from "@mui/icons-material/Close";
-import { connect } from "react-redux";
-
-// Definiere die senseboxColors
-const senseboxColors = {
-  blue: "#4EAF46",
-};
+import { useTheme } from "@mui/material/styles";
+import * as Blockly from "blockly";
 
 // Styled IconButton Komponente für normale Buttons
 const StyledIconButton = styled(IconButton)(() => ({
@@ -42,41 +38,20 @@ const RoundIconButton = styled(IconButton)(() => ({
   },
 }));
 
-// Texte für verschiedene Sprachen
-const texts = {
-  de: {
-    downloads: "Downloads",
-    downloading: "Wird heruntergeladen...",
-    downloadComplete: "Herunterladen abgeschlossen",
-    fileName: "sketch.bin",
-  },
-  en: {
-    downloads: "Downloads",
-    downloading: "Downloading...",
-    downloadComplete: "Download complete",
-    fileName: "sketch.bin",
-  },
-};
-
-function DownloadAnimation({ language }) {
+function DownloadAnimation() {
   const [showDownloads, setShowDownloads] = useState(false);
   const [isFileClicked, setIsFileClicked] = useState(false);
   const cursorControls = useAnimation();
   const downloadButtonRef = useRef(null);
   const fileRef = useRef(null);
-
-  // Konvertiere die Redux-Spracheinstellung in das Format, das wir verwenden
-  const currentLanguage = language === "de_DE" ? "de" : "en";
-
-  // Texte für die aktuelle Sprache
-  const t = texts[currentLanguage] || texts.de;
+  const theme = useTheme();
 
   // Downloads-Array mit lokalisierten Texten
   const downloads = [
     {
-      name: t.fileName,
+      name: Blockly.Msg.compile_animation_fileName,
       size: "276 KB",
-      time: t.downloading,
+      time: Blockly.Msg.compile_animation_downloading,
       type: "binary",
     },
   ];
@@ -149,7 +124,7 @@ function DownloadAnimation({ language }) {
         bgcolor: "#f8f9fa",
         borderRadius: 2,
         overflow: "visible",
-        border: `1px solid ${senseboxColors.blue}30`,
+        border: `1px solid ${theme.palette.senseboxColors.blue}30`,
         mx: "auto",
       }}
     >
@@ -216,8 +191,8 @@ function DownloadAnimation({ language }) {
                 ? "rgba(0, 0, 0, 0.15)"
                 : "rgba(0, 0, 0, 0.1)",
             },
-            color: senseboxColors.blue,
-            border: `2px solid ${senseboxColors.blue}`,
+            color: theme.palette.senseboxColors.blue,
+            border: `2px solid ${theme.palette.senseboxColors.blue}`,
           }}
         >
           <FileDownloadIcon sx={{ fontSize: 16 }} />
@@ -241,7 +216,9 @@ function DownloadAnimation({ language }) {
               borderBottom: "1px solid rgba(0,0,0,0.1)",
             }}
           >
-            <Box sx={{ color: "#202124", fontSize: 14 }}>{t.downloads}</Box>
+            <Box sx={{ color: "#202124", fontSize: 14 }}>
+              {Blockly.Msg.compile_animation_downloads}
+            </Box>
             <StyledIconButton>
               <CloseIcon sx={{ fontSize: 16, color: "#5f6368" }} />
             </StyledIconButton>
@@ -285,7 +262,7 @@ function DownloadAnimation({ language }) {
                         transition={{ duration: 2 }}
                         style={{
                           height: 2,
-                          backgroundColor: senseboxColors.blue,
+                          backgroundColor: theme.palette.senseboxColors.blue,
                           borderRadius: 1,
                           marginTop: 2,
                         }}
@@ -322,7 +299,9 @@ function DownloadAnimation({ language }) {
                   <Box component="span" sx={{ mx: 1 }}>
                     •
                   </Box>
-                  {isFileClicked ? t.downloadComplete : download.time}
+                  {isFileClicked
+                    ? Blockly.Msg.compile_animation_downloadComplete
+                    : download.time}
                 </Box>
               </motion.div>
             ))}
@@ -333,9 +312,4 @@ function DownloadAnimation({ language }) {
   );
 }
 
-// Verbinde die Komponente mit Redux, um auf die Spracheinstellung zuzugreifen
-const mapStateToProps = (state) => ({
-  language: state.general.language, // Hole die Spracheinstellung aus dem Redux-Store
-});
-
-export default connect(mapStateToProps)(DownloadAnimation);
+export default DownloadAnimation;