diff --git a/public/manifest.json b/public/manifest.json index 9d619244..254a7cde 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -20,7 +20,8 @@ "permissions": ["tabs", "notifications", "storage"], "host_permissions": ["https://newsapi.org/", "*://*/*"], "background": { - "content_scripts": "background.js" + "content_scripts": "background.js", + "persistent": false }, "optional_permissions": ["declarativeContent"], "content_scripts": [ diff --git a/safari/BetterSEQTA+.xcodeproj/project.xcworkspace/xcuserdata/sethburkart.xcuserdatad/UserInterfaceState.xcuserstate b/safari/BetterSEQTA+.xcodeproj/project.xcworkspace/xcuserdata/sethburkart.xcuserdatad/UserInterfaceState.xcuserstate index 3567560e..1a9e8eb3 100644 Binary files a/safari/BetterSEQTA+.xcodeproj/project.xcworkspace/xcuserdata/sethburkart.xcuserdatad/UserInterfaceState.xcuserstate and b/safari/BetterSEQTA+.xcodeproj/project.xcworkspace/xcuserdata/sethburkart.xcuserdatad/UserInterfaceState.xcuserstate differ diff --git a/safari/BetterSEQTA+.xcodeproj/xcuserdata/sethburkart.xcuserdatad/xcschemes/xcschememanagement.plist b/safari/BetterSEQTA+.xcodeproj/xcuserdata/sethburkart.xcuserdatad/xcschemes/xcschememanagement.plist index cc3d30cf..4865fbf4 100644 --- a/safari/BetterSEQTA+.xcodeproj/xcuserdata/sethburkart.xcuserdatad/xcschemes/xcschememanagement.plist +++ b/safari/BetterSEQTA+.xcodeproj/xcuserdata/sethburkart.xcuserdatad/xcschemes/xcschememanagement.plist @@ -7,12 +7,12 @@ BetterSEQTA+ (iOS).xcscheme_^#shared#^_ orderHint - 0 + 1 BetterSEQTA+ (macOS).xcscheme_^#shared#^_ orderHint - 1 + 0 diff --git a/src/popup/bun.lockb b/src/popup/bun.lockb index d1ca92d9..b124928d 100755 Binary files a/src/popup/bun.lockb and b/src/popup/bun.lockb differ diff --git a/src/popup/index.html b/src/popup/index.html index 65a70d70..feec9812 100644 --- a/src/popup/index.html +++ b/src/popup/index.html @@ -6,8 +6,8 @@ Vite + React + TS - -
+ +
diff --git a/src/popup/package.json b/src/popup/package.json index 3e477ec6..9800ac8a 100644 --- a/src/popup/package.json +++ b/src/popup/package.json @@ -12,6 +12,7 @@ "dependencies": { "framer-motion": "^10.16.4", "react": "^18.2.0", + "react-best-gradient-color-picker": "^2.2.22", "react-dom": "^18.2.0" }, "devDependencies": { diff --git a/src/popup/src/App.tsx b/src/popup/src/App.tsx index ebdc8d34..6f749e9f 100644 --- a/src/popup/src/App.tsx +++ b/src/popup/src/App.tsx @@ -1,26 +1,67 @@ import './App.css' -import Slider from './components/Slider' import Switch from './components/Switch' +import logo from './assets/betterseqta-dark-full.png' +import logoDark from './assets/betterseqta-light-full.png' +import ColorPicker from './components/ColorPicker' + +const switchChange = (isOn: boolean) => { + console.log(isOn) +} + +const settings = [ + { + title: "Notification Collector", + description: "Uncaps the 9+ limit for notifications, showing the real number.", + modifyElement: + }, + { + title: "Lesson Alerts", + description: "Sends a native browser notification ~5 minutes prior to lessons.", + modifyElement: + }, + { + title: "Animated Background", + description: "Adds an animated background to BetterSEQTA. (May impact battery life)", + modifyElement: + }, + { + title: "Animated Background Speed", + description: "Controls the speed of the animated background.", + modifyElement: + }, + { + title: "Custom Theme Colour", + description: "Customise the overall theme colour of SEQTA Learn.", + modifyElement: + }, + { + title: "BetterSEQTA+", + description: "Unlocks premium features.", + modifyElement: + } +] function App() { - const switchChange = (isOn: boolean) => { - console.log(isOn) - } return (
- -
- console.log(value)} /> +
+ +
- - - - - - + {settings.map((setting, index) => ( +
+
+

{setting.title}

+

{setting.description}

+
+
+ {setting.modifyElement} +
+
+ ))}
) } -export default App +export default App \ No newline at end of file diff --git a/src/popup/src/assets/betterseqta-dark-full.png b/src/popup/src/assets/betterseqta-dark-full.png new file mode 100644 index 00000000..f2c77f49 Binary files /dev/null and b/src/popup/src/assets/betterseqta-dark-full.png differ diff --git a/src/popup/src/assets/betterseqta-light-full.png b/src/popup/src/assets/betterseqta-light-full.png new file mode 100644 index 00000000..6bd12477 Binary files /dev/null and b/src/popup/src/assets/betterseqta-light-full.png differ diff --git a/src/popup/src/components/ColorPicker.tsx b/src/popup/src/components/ColorPicker.tsx new file mode 100644 index 00000000..09a11fa4 --- /dev/null +++ b/src/popup/src/components/ColorPicker.tsx @@ -0,0 +1,43 @@ +// TODO: Create types for ColorPicker +// @ts-expect-error No typescript declarations available +import ColorPicker from 'react-best-gradient-color-picker'; +import { useState, useRef, useEffect } from 'react'; + +const Picker = (): JSX.Element => { + const [color, setColor] = useState('rgba(255,20,255,1)'); + const [showPicker, setShowPicker] = useState(false); + const pickerRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent): void => { + if (pickerRef.current && !pickerRef.current.contains(event.target as Node)) { + setShowPicker(false); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [pickerRef]); + + return ( +
+ +
+ { showPicker && + + } +
+
+ ); +}; + +export default Picker; \ No newline at end of file diff --git a/src/popup/src/components/Slider.css b/src/popup/src/components/Slider.css new file mode 100644 index 00000000..ee7b1c0b --- /dev/null +++ b/src/popup/src/components/Slider.css @@ -0,0 +1,21 @@ +.range-slider{ + margin: 20px; + appearance: none; + outline: none; + width: 150px; + height: 3px; + border-radius: 5px; + background-color: #ccc; +} + +.range-slide::-webkit-slider-runnable-track{ + background-color: #4BD663 !important; +} +.range-slider::-webkit-slider-thumb { + background: #fafafa; + appearance: none; + box-shadow: 1px 2px 26px 1px #bdbdbd; + width: 15px; + height: 15px; + border-radius: 50%; +} \ No newline at end of file diff --git a/src/popup/src/components/Slider.tsx b/src/popup/src/components/Slider.tsx index c662b6c0..664d357d 100644 --- a/src/popup/src/components/Slider.tsx +++ b/src/popup/src/components/Slider.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import "./Slider.css"; interface Slider { onValueChange: (value: number) => void; @@ -25,7 +26,7 @@ const Slider: React.FC = ({ onValueChange }) => { value={sliderValue} onChange={handleInputChange} onMouseUp={handleMouseUp} - className="absolute w-full h-1.5 bg-gray-300 rounded-full cursor-pointer focus:outline-none" + className="absolute w-full h-1 rounded-full cursor-pointer range-slider focus:outline-none" />
);