refactor (ui): change about page to icon next to what's new

src/seqta/utils/listeners/MessageListener.ts

@@ -1,6 +1,6 @@
 import browser from 'webextension-polyfill'
 
-import { closeSettings, MenuOptionsOpen, OpenMenuOptions, OpenWhatsNewPopup } from '../../../SEQTA';
+import { closeSettings, MenuOptionsOpen, OpenMenuOptions } from '../../../SEQTA';
 import { deleteTheme } from '@/seqta/ui/themes/deleteTheme';
 import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes';
 import { saveTheme } from '@/seqta/ui/themes/saveTheme';
@@ -74,12 +74,6 @@ export class MessageHandler {
         });
         return true;
 
-      case 'OpenChangelog':
-        OpenWhatsNewPopup();
-        closeSettings();
-        sendResponse({ status: 'success' });
-        break;
-
       case 'OpenThemeCreator':
         const themeID = request?.body?.themeID;
         OpenThemeCreator( themeID ? themeID : '' );

src/svelte-interface/pages/settings.svelte

@@ -9,8 +9,16 @@
   import { onMount } from 'svelte'
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
 
+  import { closeSettings, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
+
   const openChangelog = () => {
-    browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' });
+    OpenWhatsNewPopup();
+    closeSettings();
+  };
+
+  const openAbout = () => {
+    OpenAboutPage();
+    closeSettings();
   };
     
   let { standalone = false } = $props<{ standalone?: boolean }>();
@@ -28,7 +36,8 @@
     <div class="grid border-b border-b-zinc-200/40 place-items-center">
       <img src={browser.runtime.getURL('resources/icons/betterseqta-dark-full.png')} class="w-4/5 dark:hidden" alt="Light logo" />
       <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" />
-      <button onclick={openChangelog} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700"></button>
+      <button onclick={openChangelog} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-0 bg-zinc-100 dark:bg-zinc-700"></button>
+      <button onclick={openAbout} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-10 bg-zinc-100 dark:bg-zinc-700">ⓘ</button>
     </div>
 
     <TabbedContainer tabs={[

src/svelte-interface/pages/settings/general.svelte

@@ -8,7 +8,6 @@
   
   import type { SettingsList } from "@/svelte-interface/types/SettingsProps"
   import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
-  import { closeSettings, OpenAboutPage } from "@/SEQTA"
 </script>
 
 {#snippet Setting({ title, description, Component, props }: SettingsList) }
@@ -91,16 +90,6 @@
         onChange: (isOn: boolean) => settingsState.lessonalert = isOn
       }
     },
-    {
-      title: "About BetterSEQTA+",
-      description: "Opens About page.",
-      id: 9,
-      Component: Button,
-      props: {
-        onClick: () => { OpenAboutPage(); closeSettings() },
-        text: "Open"
-      }
-    },
     {
       title: "BetterSEQTA+",
       description: "Enables BetterSEQTA+ features",