major updates to popup dev, manifest fix

interface/src/pages/About.tsx

@@ -0,0 +1,10 @@
+const About: React.FC = () => {
+
+  return (
+    <div className="flex flex-col overflow-y-scroll divide-y divide-zinc-100">
+      <h2>About</h2>
+    </div>
+  );
+};
+
+export default About;

interface/src/pages/Settings.tsx

@@ -0,0 +1,68 @@
+import Switch from '../components/Switch';
+import ColorPicker from '../components/ColorPicker';
+import { SettingsState } from '../App';
+
+interface ISetting {
+  title: string;
+  description: string;
+  modifyElement: JSX.Element;
+}
+
+interface SettingsProps {
+  settingsState: SettingsState;
+  switchChange: (key: string, isOn: boolean) => void;
+  colorChange: (color: string) => void;
+}
+
+const Settings: React.FC<SettingsProps> = ({ settingsState, switchChange, colorChange }) => {
+  const settings: ISetting[] = [
+    {
+      title: "Notification Collector",
+      description: "Uncaps the 9+ limit for notifications, showing the real number.",
+      modifyElement: <Switch state={settingsState.notificationCollector} onChange={(isOn: boolean) => switchChange('notificationCollector', isOn)} />
+    },
+    {
+      title: "Lesson Alerts",
+      description: "Sends a native browser notification ~5 minutes prior to lessons.",
+      modifyElement: <Switch state={settingsState.lessonAlerts} onChange={(isOn: boolean) => switchChange('lessonAlerts', isOn)} />
+    },
+    {
+      title: "Animated Background",
+      description: "Adds an animated background to BetterSEQTA. (May impact battery life)",
+      modifyElement: <Switch state={settingsState.animatedBackground} onChange={(isOn: boolean) => switchChange('animatedBackground', isOn)} />
+    },
+    {
+      title: "Animated Background Speed",
+      description: "Controls the speed of the animated background.",
+      modifyElement: <Switch state={settingsState.animatedBackgroundSpeed} onChange={(isOn: boolean) => switchChange('animatedBackgroundSpeed', isOn)} />
+    },
+    {
+      title: "Custom Theme Colour",
+      description: "Customise the overall theme colour of SEQTA Learn.",
+      modifyElement: <ColorPicker color={settingsState.customThemeColor} onChange={(color: string) => colorChange(color)} />
+    },
+    {
+      title: "BetterSEQTA+",
+      description: "Unlocks premium features.",
+      modifyElement: <Switch state={settingsState.betterSEQTAPlus} onChange={(isOn: boolean) => switchChange('betterSEQTAPlus', isOn)} />
+    }
+  ];
+
+  return (
+    <div className="flex flex-col overflow-y-scroll divide-y divide-zinc-100">
+      {settings.map((setting, index) => (
+        <div className="flex items-center justify-between px-4 py-3" key={index}>
+          <div className="pr-4">
+            <h2 className="text-sm font-bold">{setting.title}</h2>
+            <p className="text-xs">{setting.description}</p>
+          </div>
+          <div>
+            {setting.modifyElement}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Settings;

interface/src/pages/Shortcuts.tsx

@@ -0,0 +1,95 @@
+import { useState } from "react";
+import Switch from "../components/Switch";
+
+export default function Shortcuts() {
+  const [shortcutState, setShortcutState] = useState({
+    youtube: false,
+    outlook: false,
+    office: false,
+    spotify: false,
+    google: false,
+    duckduckgo: false,
+    coolmathgames: false,
+    sace: false,
+    googlescholar: false,
+    gmail: false,
+    netflix: false
+  });
+
+  // Handler for Switches
+  const switchChange = (key: string, isOn: boolean) => {
+    setShortcutState({
+      ...shortcutState,
+      [key]: isOn,
+    });
+  };
+
+  const DefaultShortcuts = [
+    {
+      title: "YouTube",
+      link: "https://youtube.com",
+      modifyElement: <Switch state={shortcutState.youtube} onChange={(isOn: boolean) => switchChange('youtube', isOn)} />
+    },
+    {
+      title: "Outlook",
+      link: "https://outlook.office.com/mail/inbox",
+      modifyElement: <Switch state={shortcutState.outlook} onChange={(isOn: boolean) => switchChange('outlook', isOn)} />
+    },
+    {
+      title: "Office",
+      link: "https://www.office.com/",
+      modifyElement: <Switch state={shortcutState.office} onChange={(isOn: boolean) => switchChange('office', isOn)} />
+    },
+    {
+      title: "Spotify",
+      link: "https://www.spotify.com/",
+      modifyElement: <Switch state={shortcutState.spotify} onChange={(isOn: boolean) => switchChange('spotify', isOn)} />
+    },
+    {
+      title: "Google",
+      link: "https://www.google.com/",
+      modifyElement: <Switch state={shortcutState.google} onChange={(isOn: boolean) => switchChange('google', isOn)} />
+    },
+    {
+      title: "DuckDuckGo",
+      link: "https://duckduckgo.com/",
+      modifyElement: <Switch state={shortcutState.duckduckgo} onChange={(isOn: boolean) => switchChange('duckduckgo', isOn)} />
+    },
+    {
+      title: "Cool Math Games",
+      link: "https://www.coolmathgames.com/",
+      modifyElement: <Switch state={shortcutState.coolmathgames} onChange={(isOn: boolean) => switchChange('coolmathgames', isOn)} />
+    },
+    {
+      title: "SACE",
+      link: "https://www.sace.sa.edu.au/",
+      modifyElement: <Switch state={shortcutState.sace} onChange={(isOn: boolean) => switchChange('sace', isOn)} />
+    },
+    {
+      title: "Google Scholar",
+      link: "https://scholar.google.com/",
+      modifyElement: <Switch state={shortcutState.googlescholar} onChange={(isOn: boolean) => switchChange('googlescholar', isOn)} />
+    },
+    {
+      title: "Gmail",
+      link: "https://mail.google.com/",
+      modifyElement: <Switch state={shortcutState.gmail} onChange={(isOn: boolean) => switchChange('gmail', isOn)} />
+    },
+    {
+      title: "Netflix",
+      link: "https://www.netflix.com/",
+      modifyElement: <Switch state={shortcutState.netflix} onChange={(isOn: boolean) => switchChange('netflix', isOn)} />
+    }
+  ];
+
+  return (
+    <div className="flex flex-col divide-y divide-zinc-100">
+      {DefaultShortcuts.map((shortcut, index) => (
+        <div className="flex items-center justify-between px-4 py-3" key={index}>
+          {shortcut.title}
+          {shortcut.modifyElement}
+        </div>
+      ))}
+    </div>
+  );
+}