new popup in default_popup

interface/src/App.tsx

@@ -1,15 +1,25 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import TabbedContainer from './components/TabbedContainer';
 import Settings from './pages/Settings';
 import logo from './assets/betterseqta-dark-full.png';
 import logoDark from './assets/betterseqta-light-full.png';
 import Shortcuts from './pages/Shortcuts';
 import About from './pages/About';
-import { SettingsContextProvider } from './SettingsContext';
+import { useSettingsContext } from './SettingsContext';
 import Picker from './components/Picker';
 
 const App: React.FC = () => {
 
+  const { standalone, setStandalone } = useSettingsContext();
+
+  useEffect(() => {
+    // if body has class standalone
+    if (document.body.classList.contains('standalone')) {
+      // set settingsContext standalone to true
+      setStandalone(true);
+    }
+  })
+
   const tabs = [
     {
       title: 'Settings',
@@ -25,18 +35,15 @@ const App: React.FC = () => {
     }
   ];
 
-  {/* <div className="flex justify-center w-screen h-screen pt-4 overflow-hidden" style={{ background: settingsState.customThemeColor }}> */}
   return (
-    <SettingsContextProvider>
-      <div className="flex flex-col w-[384px] shadow-2xl gap-2 bg-white rounded-xl h-[590px] dark:bg-zinc-800 dark:text-white">
-        <div className="grid border-b border-b-zinc-200/40 place-items-center">
-          <img src={logo} className="w-4/5 dark:hidden" />
-          <img src={logoDark} className="hidden w-4/5 dark:block" />
-        </div>
-        <Picker />
-        <TabbedContainer tabs={tabs} />
+    <div className={`flex flex-col w-[384px] shadow-2xl gap-2 bg-white ${ standalone ? '' : 'rounded-xl' } h-[610px] dark:bg-zinc-800 dark:text-white`}>
+      <div className="grid border-b border-b-zinc-200/40 place-items-center">
+        <img src={logo} className="w-4/5 dark:hidden" />
+        <img src={logoDark} className="hidden w-4/5 dark:block" />
       </div>
-    </SettingsContextProvider>
+      <Picker />
+      <TabbedContainer tabs={tabs} />
+    </div>
   );
 };
 

interface/src/SettingsContext.tsx

@@ -9,6 +9,8 @@ const SettingsContext = createContext<{
   setSettingsState: React.Dispatch<React.SetStateAction<SettingsState>>;
   showPicker: boolean;
   setShowPicker: React.Dispatch<React.SetStateAction<boolean>>;
+  standalone: boolean;
+  setStandalone: React.Dispatch<React.SetStateAction<boolean>>;
 } | undefined>(undefined);
 
 export const SettingsContextProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
@@ -24,11 +26,12 @@ export const SettingsContextProvider: React.FC<{ children: ReactNode }> = ({ chi
   });
 
   const [showPicker, setShowPicker] = useState<boolean>(false);
+  const [standalone, setStandalone] = useState<boolean>(false);
 
   useSettingsState({ settingsState, setSettingsState });
 
   return (
-    <SettingsContext.Provider value={{ settingsState, setSettingsState, showPicker, setShowPicker }}>
+    <SettingsContext.Provider value={{ settingsState, setSettingsState, showPicker, setShowPicker, standalone, setStandalone }}>
       {children}
     </SettingsContext.Provider>
   );

interface/src/main.tsx

@@ -1,22 +1,16 @@
-import React, { useState } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.js'
 import './index.css'
-// @ts-expect-error There aren't any types for the below library
-import ColorPicker from 'react-best-gradient-color-picker';
+import { SettingsContextProvider } from './SettingsContext.js';
 
 const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
 
-// @ts-expect-error woaefoiahef
-// eslint-disable-next-line
-function Testing() {
-  const [color, setColor] = useState('#fffff');
-
-  return <ColorPicker value={color} onChange={setColor} />
-}
 
 root.render(
   <React.StrictMode>
-    <App />
+    <SettingsContextProvider>
+      <App />
+    </SettingsContextProvider>
   </React.StrictMode>,
 );