diff --git a/package.json b/package.json index 4ad1e5b3..4b93b5bd 100644 --- a/package.json +++ b/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", diff --git a/src/interface/assets/betterseqta-dark-full.png b/src/interface/assets/betterseqta-dark-full.png deleted file mode 100644 index f2c77f49..00000000 Binary files a/src/interface/assets/betterseqta-dark-full.png and /dev/null differ diff --git a/src/interface/assets/betterseqta-light-full.png b/src/interface/assets/betterseqta-light-full.png deleted file mode 100644 index 6bd12477..00000000 Binary files a/src/interface/assets/betterseqta-light-full.png and /dev/null differ diff --git a/src/interface/components/Accordian.tsx b/src/interface/components/Accordian.tsx new file mode 100644 index 00000000..0337cdd5 --- /dev/null +++ b/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(null); + const [shown, setShown] = useState(false); + + return ( +
+ +
+ {children} +
+
+ ); +}; + +export default Accordion; diff --git a/src/interface/components/CodeEditor.tsx b/src/interface/components/CodeEditor.tsx index 2e8759be..f5111221 100644 --- a/src/interface/components/CodeEditor.tsx +++ b/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!"} diff --git a/src/interface/main.tsx b/src/interface/main.tsx index 21c17296..94fdce2b 100644 --- a/src/interface/main.tsx +++ b/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' diff --git a/src/interface/SettingsPage.tsx b/src/interface/pages/SettingsPage.tsx similarity index 72% rename from src/interface/SettingsPage.tsx rename to src/interface/pages/SettingsPage.tsx index cd9c797e..adcdd98a 100644 --- a/src/interface/SettingsPage.tsx +++ b/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'; diff --git a/src/interface/pages/Settings.tsx b/src/interface/pages/SettingsPage/Settings.tsx similarity index 92% rename from src/interface/pages/Settings.tsx rename to src/interface/pages/SettingsPage/Settings.tsx index 1911233d..6c8e3a53 100644 --- a/src/interface/pages/Settings.tsx +++ b/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' diff --git a/src/interface/pages/Shortcuts.tsx b/src/interface/pages/SettingsPage/Shortcuts.tsx similarity index 97% rename from src/interface/pages/Shortcuts.tsx rename to src/interface/pages/SettingsPage/Shortcuts.tsx index e2952863..4916e794 100644 --- a/src/interface/pages/Shortcuts.tsx +++ b/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:\/\/)/; diff --git a/src/interface/pages/Themes.tsx b/src/interface/pages/SettingsPage/Themes.tsx similarity index 82% rename from src/interface/pages/Themes.tsx rename to src/interface/pages/SettingsPage/Themes.tsx index 90647519..0fb3d1f8 100644 --- a/src/interface/pages/Themes.tsx +++ b/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(false); diff --git a/src/interface/pages/ThemeCreator.tsx b/src/interface/pages/ThemeCreator.tsx index 8056c5ac..d2683625 100644 --- a/src/interface/pages/ThemeCreator.tsx +++ b/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 ( -
+
+
+

Theme Creator

-
- + + + + + + + + +
); diff --git a/src/interface/types/CustomThemes.ts b/src/interface/types/CustomThemes.ts new file mode 100644 index 00000000..e69de29b