add a heap more eventlisteners

interface/src/App.tsx

@@ -7,6 +7,7 @@ import Shortcuts from './pages/Shortcuts';
 import { useSettingsContext } from './SettingsContext';
 import Picker from './components/Picker';
 import Themes from './pages/Themes';
+//import About from './pages/About';
 
 const App: React.FC = () => {
 

interface/src/components/TabbedContainer.tsx

@@ -79,7 +79,7 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
                 activeTab === index && (
                   <motion.div
                     key={index}
-                    className="absolute w-full"
+                    className="absolute w-full pb-6"
                     initial="hidden"
                     animate="visible"
                     exit="hidden"

interface/src/pages/Settings.tsx

@@ -48,6 +48,11 @@ const Settings: React.FC = () => {
       description: "Customise the overall theme colour of SEQTA Learn.",
       modifyElement: <PickerSwatch />
     },
+    {
+      title: "Transparency Effects",
+      description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",
+      modifyElement: <Switch state={settingsState.betterSEQTAPlus} onChange={(isOn: boolean) => switchChange('betterSEQTAPlus', isOn)} />
+    },
     {
       title: "BetterSEQTA+",
       description: "Enables BetterSEQTA+ features",

interface/src/pages/Themes.tsx

@@ -52,28 +52,36 @@ const Themes: React.FC = () => {
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
-
+  
     const fileType = file.type.split('/')[0];
     console.log(fileType);
-
+  
+    // Directly save the Blob object (file)
+    await writeData(fileType, file);
+    
+    // For displaying purpose, you might still want to convert it to Data URL
     const reader = new FileReader();
-
-    reader.onload = async () => {
-      const dataURL = reader.result;
-      await writeData(fileType, dataURL);
-      setImageSrc(dataURL as string);
+    reader.onload = () => {
+      setImageSrc(reader.result as string);
     };
-
     reader.readAsDataURL(file);
   };
-
+  
   useEffect(() => {
     (async () => {
       const data = await readData();
       if (data?.type === 'image') {
-        setImageSrc(data.data);
+        const reader = new FileReader();
+        reader.onload = () => {
+          setImageSrc(reader.result as string);
+        };
+        reader.readAsDataURL(data.data);
       } else if (data?.type === 'video') {
-        setVideoSrc(data.data);
+        const reader = new FileReader();
+        reader.onload = () => {
+          setVideoSrc(reader.result as string);
+        };
+        reader.readAsDataURL(data.data);
       }
     })();
   }, []);