From 8ac3b1de712ca327e1c74993824282ac45153eae Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Sun, 31 Mar 2024 14:43:42 +1100 Subject: [PATCH] add accordion to themeCreator --- package.json | 4 +++- .../assets/betterseqta-dark-full.png | Bin 10636 -> 0 bytes .../assets/betterseqta-light-full.png | Bin 10453 -> 0 bytes src/interface/components/Accordian.tsx | 21 ++++++++++++++++++ src/interface/components/CodeEditor.tsx | 1 - src/interface/main.tsx | 2 +- src/interface/{ => pages}/SettingsPage.tsx | 16 ++++++------- .../pages/{ => SettingsPage}/Settings.tsx | 10 ++++----- .../pages/{ => SettingsPage}/Shortcuts.tsx | 6 ++--- .../pages/{ => SettingsPage}/Themes.tsx | 6 ++--- src/interface/pages/ThemeCreator.tsx | 18 ++++++++++++--- src/interface/types/CustomThemes.ts | 0 12 files changed, 59 insertions(+), 25 deletions(-) delete mode 100644 src/interface/assets/betterseqta-dark-full.png delete mode 100644 src/interface/assets/betterseqta-light-full.png create mode 100644 src/interface/components/Accordian.tsx rename src/interface/{ => pages}/SettingsPage.tsx (72%) rename src/interface/pages/{ => SettingsPage}/Settings.tsx (92%) rename src/interface/pages/{ => SettingsPage}/Shortcuts.tsx (97%) rename src/interface/pages/{ => SettingsPage}/Themes.tsx (82%) create mode 100644 src/interface/types/CustomThemes.ts 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 f2c77f4940d4b5cd9044d2b009a6bc41dd6f6ad5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10636 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 ZO!LFltV(;B?aIG?P+eE;)s4F${|my1+)Mxf 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