add accordion to themeCreator

package.json

@@ -32,7 +32,9 @@
   },
   "dependencies": {
     "@codemirror/lang-less": "^6.0.2",
+    "@heroicons/react": "^2.1.3",
     "@million/lint": "latest",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@sentry/browser": "^7.100.1",
     "@sentry/cli": "^2.28.6",
     "@sentry/react": "^7.100.1",
@@ -49,10 +51,10 @@
     "@uiw/react-codemirror": "^4.21.25",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.17",
+    "classnames": "^2.5.1",
     "color": "^4.2.3",
     "dompurify": "^3.0.8",
     "framer-motion": "^10.18.0",
-    "install": "^0.13.0",
     "localforage": "^1.10.0",
     "million": "latest",
     "motion": "^10.17.0",

src/interface/components/Accordian.tsx

@@ -0,0 +1,21 @@
+import { useRef, useState } from 'react';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+
+const Accordion = ({ children }: { children: React.ReactNode }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [shown, setShown] = useState<boolean>(false);
+
+  return (
+    <div>
+      <button onClick={() => setShown(!shown)} className='flex items-center justify-between text-[15px] w-full'>
+        Custom CSS
+        <ChevronDownIcon className={`transition-transform duration-300 ${shown ? 'rotate-180' : ''}`} height='24' aria-hidden />
+      </button>
+      <div ref={ref} className='overflow-y-hidden transition-all' style={{ height: `${shown ? ref.current?.scrollHeight : '0'}px` }}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Accordion;

src/interface/components/CodeEditor.tsx

@@ -28,7 +28,6 @@ export default function CodeEditor({ callback, initialState, height }: { callbac
         foldGutter: false,
         dropCursor: true,
         tabSize: 2,
-        
       }}
       theme={ darkMode ? githubDark : githubLight }
       placeholder={"It's time to dream up some code!"}

src/interface/main.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { HashRouter, Routes, Route } from 'react-router-dom';
 import './index.css';
-import SettingsPage from './SettingsPage.js';
+import SettingsPage from './pages/SettingsPage.js';
 import browser from 'webextension-polyfill';
 import font from '../resources/fonts/IconFamily.woff'
 

src/interface/pages/SettingsPage.tsx

@@ -1,11 +1,11 @@
-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 { SettingsContextProvider } from './SettingsContext';
-import Shortcuts from './pages/Shortcuts';
-import Picker from './components/Picker';
-import Themes from './pages/Themes';
+import TabbedContainer from '../components/TabbedContainer';
+import Settings from './SettingsPage/Settings';
+import logo from '../../resources/icons/betterseqta-dark-full.png';
+import logoDark from '../../resources/icons/betterseqta-light-full.png';
+import { SettingsContextProvider } from '../SettingsContext';
+import Shortcuts from './SettingsPage/Shortcuts';
+import Picker from '../components/Picker';
+import Themes from './SettingsPage/Themes';
 
 import browser from 'webextension-polyfill';
 

src/interface/pages/SettingsPage/Settings.tsx

@@ -1,9 +1,9 @@
-import Switch from '../components/Switch';
-import Slider from '../components/Slider';
-import PickerSwatch from '../components/PickerSwatch';
+import Switch from '../../components/Switch';
+import Slider from '../../components/Slider';
+import PickerSwatch from '../../components/PickerSwatch';
 
-import { SettingsList } from '../types/SettingsProps';
-import { useSettingsContext } from '../SettingsContext';
+import { SettingsList } from '../../types/SettingsProps';
+import { useSettingsContext } from '../../SettingsContext';
 
 import browser from 'webextension-polyfill'
 

src/interface/pages/SettingsPage/Shortcuts.tsx

@@ -1,8 +1,8 @@
 import { useState, memo, useCallback } from "react";
-import Switch from "../components/Switch";
-import { useSettingsContext } from "../SettingsContext";
+import Switch from "../../components/Switch";
+import { useSettingsContext } from "../../SettingsContext";
 import { motion, AnimatePresence } from "framer-motion";
-import { CustomShortcut } from "../types/AppProps";
+import { CustomShortcut } from "../../types/AppProps";
 
 function formatUrl(inputUrl: string) {
   const protocolRegex = /^(http:\/\/|https:\/\/|ftp:\/\/)/;

src/interface/pages/SettingsPage/Themes.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
-import BackgroundSelector from '../components/BackgroundSelector';
-import ThemeSelector from '../components/ThemeSelector';
-import { listThemes } from '../hooks/ThemeManagment';
+import BackgroundSelector from '../../components/BackgroundSelector';
+import ThemeSelector from '../../components/ThemeSelector';
+import { listThemes } from '../../hooks/ThemeManagment';
 
 const Themes: FC = () => {
   const [isEditMode, setIsEditMode] = useState<boolean>(false);

src/interface/pages/ThemeCreator.tsx

@@ -1,4 +1,5 @@
 import CodeEditor from '../components/CodeEditor';
+import Accordion from '../components/Accordian';
 
 export default function ThemeCreator() {
   const handleSave = (value: string) => {
@@ -7,10 +8,21 @@ export default function ThemeCreator() {
   }
 
   return (
-    <div className='w-full h-[100vh] bg-zinc-100 dark:bg-zinc-800'>
+    <div className='w-full h-[100vh] bg-zinc-100 dark:bg-zinc-800 dark:text-white transition duration-30'>
+      <div className='flex flex-col gap-2 p-2'>
+        <h1 className='text-xl font-semibold pb-0.5'>Theme Creator</h1>
 
-      <div className='p-2'>
-        <CodeEditor height='100px' initialState={'.exampleCode {}'} callback={handleSave} />
+        <input type='text' placeholder='Theme Name' className='w-full p-2 mb-4 rounded-lg dark:border-gray-700 dark:bg-zinc-900 dark:text-white' />
+      
+        
+
+        <Accordion>
+          <CodeEditor height='100px' initialState={''} callback={handleSave} />
+        </Accordion>
+
+        <button className='w-full px-4 py-2 mb-4 text-white transition bg-blue-500 rounded dark:text-white'>
+          Save Theme
+        </button>
       </div>
     </div>
   );