diff --git a/bun.lockb b/bun.lockb index 1feb1c37..7b9e683a 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/interface/.eslintrc.cjs b/interface/.eslintrc.cjs index d6c95379..2e04b2a0 100644 --- a/interface/.eslintrc.cjs +++ b/interface/.eslintrc.cjs @@ -15,4 +15,12 @@ module.exports = { { allowConstantExport: true }, ], }, + overrides: [ + { + files: ['*.ts', '*.tsx'], + rules: { + '@typescript-eslint/no-explicit-any': 'off', + }, + }, + ], } diff --git a/interface/bun.lockb b/interface/bun.lockb index b124928d..3ddeef7c 100755 Binary files a/interface/bun.lockb and b/interface/bun.lockb differ diff --git a/interface/package.json b/interface/package.json index ece2d640..fe8cd0e8 100644 --- a/interface/package.json +++ b/interface/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@types/chrome": "^0.0.246", "framer-motion": "^10.16.4", "react": "^18.2.0", "react-best-gradient-color-picker": "^2.2.22", diff --git a/interface/src/App.tsx b/interface/src/App.tsx index 7878c315..5b93feee 100644 --- a/interface/src/App.tsx +++ b/interface/src/App.tsx @@ -7,45 +7,25 @@ import logoDark from './assets/betterseqta-light-full.png'; import Shortcuts from './pages/Shortcuts'; import About from './pages/About'; -export interface SettingsState { - notificationCollector: boolean; - lessonAlerts: boolean; - animatedBackground: boolean; - animatedBackgroundSpeed: boolean; - customThemeColor: string; - betterSEQTAPlus: boolean; -} +import type { SettingsState } from './types/AppProps'; +import useSettingsState from './hooks/settingsState'; const App: React.FC = () => { const [settingsState, setSettingsState] = useState({ notificationCollector: false, lessonAlerts: false, animatedBackground: false, - animatedBackgroundSpeed: false, + animatedBackgroundSpeed: "0", customThemeColor: "#db6969", betterSEQTAPlus: true }); - // Handler for Switches - const switchChange = (key: string, isOn: boolean) => { - setSettingsState({ - ...settingsState, - [key]: isOn, - }); - }; - - // Handler for ColorPicker - const colorChange = (color: string) => { - setSettingsState({ - ...settingsState, - customThemeColor: color, - }); - }; + useSettingsState({ settingsState, setSettingsState }); const tabs = [ { title: 'Settings', - content: + content: }, { title: 'Shortcuts', @@ -59,7 +39,7 @@ const App: React.FC = () => { {/*
*/} return ( -
+
diff --git a/interface/src/components/ColorPicker.d.ts b/interface/src/components/ColorPicker.d.ts deleted file mode 100644 index 4de668ec..00000000 --- a/interface/src/components/ColorPicker.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -interface ColorPickerProps { - color: string; - onChange: (color: string) => void; -} -declare const Picker: ({ color, onChange }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element; -export default Picker; diff --git a/interface/src/components/ColorPicker.tsx b/interface/src/components/ColorPicker.tsx index 4719d4ba..f710ae8b 100644 --- a/interface/src/components/ColorPicker.tsx +++ b/interface/src/components/ColorPicker.tsx @@ -1,10 +1,7 @@ +// @ts-expect-error There aren't any types for the below library import ColorPicker from 'react-best-gradient-color-picker'; -import React, { useState, useRef, useEffect } from 'react'; - -interface ColorPickerProps { - color: string; - onChange: (color: string) => void; -} +import { useState, useRef, useEffect } from 'react'; +import type { ColorPickerProps } from '../types/ColorPicker'; const Picker = ({ color, onChange }: ColorPickerProps) => { const [showPicker, setShowPicker] = useState(false); diff --git a/interface/src/components/Slider.tsx b/interface/src/components/Slider.tsx index 664d357d..58e00d7f 100644 --- a/interface/src/components/Slider.tsx +++ b/interface/src/components/Slider.tsx @@ -1,9 +1,6 @@ import React, { useState } from 'react'; import "./Slider.css"; - -interface Slider { - onValueChange: (value: number) => void; -} +import type { Slider } from '../types/Slider'; const Slider: React.FC = ({ onValueChange }) => { const [sliderValue, setSliderValue] = useState(0); diff --git a/interface/src/components/Switch.d.ts b/interface/src/components/Switch.d.ts deleted file mode 100644 index 369a70ca..00000000 --- a/interface/src/components/Switch.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -import "./Switch.css"; -interface SwitchProps { - onChange: (isOn: boolean) => void; - state: boolean; -} -export default function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element; -export {}; diff --git a/interface/src/components/Switch.tsx b/interface/src/components/Switch.tsx index 62dacfec..263d55d1 100644 --- a/interface/src/components/Switch.tsx +++ b/interface/src/components/Switch.tsx @@ -1,10 +1,6 @@ import { motion } from "framer-motion"; import "./Switch.css"; - -interface SwitchProps { - onChange: (isOn: boolean) => void; - state: boolean; -} +import type { SwitchProps } from "../types/Switch"; export default function Switch(props: SwitchProps) { const toggleSwitch = () => { diff --git a/interface/src/components/TabbedContainer.tsx b/interface/src/components/TabbedContainer.tsx index 91df24dd..5d851564 100644 --- a/interface/src/components/TabbedContainer.tsx +++ b/interface/src/components/TabbedContainer.tsx @@ -1,15 +1,6 @@ import React, { useState, useRef, useEffect } from 'react'; import { motion } from 'framer-motion'; - -interface Tab { - title: string; - content: JSX.Element; -} - -interface TabbedContainerProps { - tabs: Tab[]; - themeColor: string; -} +import type { TabbedContainerProps } from '../types/TabbedContainer'; const TabbedContainer: React.FC = ({ tabs, themeColor }) => { const [activeTab, setActiveTab] = useState(0); diff --git a/interface/src/hooks/settingsState.ts b/interface/src/hooks/settingsState.ts new file mode 100644 index 00000000..a7d417b8 --- /dev/null +++ b/interface/src/hooks/settingsState.ts @@ -0,0 +1,79 @@ +/*global chrome*/ +import { useEffect, useMemo } from "react"; +import { SettingsProps } from "../types/SettingsProps"; +import { MainConfig, SettingsState } from "../types/AppProps"; + +let RanOnce = false; +type StorageKeyToStateKeyMap = { + [key in keyof MainConfig]?: keyof SettingsState; +}; +let previousSettingsState: SettingsState + +const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) => { + // run the following code once + useEffect(() => { + if (RanOnce) return; + RanOnce = true; + + // get the current settings state + chrome.storage.local.get(function(result: MainConfig) { + setSettingsState({ + notificationCollector: result.notificationcollector, + lessonAlerts: result.lessonalert, + animatedBackground: result.animatedbk, + animatedBackgroundSpeed: result.bksliderinput, + customThemeColor: result.selectedColor, + betterSEQTAPlus: result.onoff + }); + }); + }); + + const keyToStateMap = useMemo(() => ({ + "notificationcollector": "notificationCollector", + "lessonalert": "lessonAlerts", + "animatedbk": "animatedBackground", + "bksliderinput": "animatedBackgroundSpeed", + "selectedColor": "customThemeColor", + "onoff": "betterSEQTAPlus", + }), []); + + const storageChangeListener = (changes: chrome.storage.StorageChange) => { + for (const [key, { newValue }] of Object.entries(changes)) { + const stateKey = keyToStateMap[key as keyof MainConfig]; + if (stateKey) { + setSettingsState((prevState: SettingsState) => ({ + ...prevState, + [stateKey]: newValue + })); + } + } + }; + + useEffect(() => { + chrome.storage.onChanged.addListener(storageChangeListener); + return () => { + chrome.storage.onChanged.removeListener(storageChangeListener); + }; + }); + + const setStorage = (key: keyof MainConfig, value: any) => { + console.log(chrome.storage.local.set({ [key]: value })); + } + + useEffect(() => { + console.log("settingsState", settingsState) + console.log("previousSettingsState", previousSettingsState) + if (previousSettingsState) { + for (const [key, value] of Object.entries(settingsState)) { + const storageKey = Object.keys(keyToStateMap).find(k => keyToStateMap[k] === key); + if (storageKey && value !== previousSettingsState[key]) { + console.log("key", storageKey) + setStorage(storageKey as keyof MainConfig, value); + } + } + } + previousSettingsState = settingsState; + }, [settingsState, keyToStateMap]) +} + +export default useSettingsState; \ No newline at end of file diff --git a/interface/src/pages/Settings.tsx b/interface/src/pages/Settings.tsx index 547593be..68bbb4d6 100644 --- a/interface/src/pages/Settings.tsx +++ b/interface/src/pages/Settings.tsx @@ -1,21 +1,24 @@ import Switch from '../components/Switch'; import ColorPicker from '../components/ColorPicker'; -import { SettingsState } from '../../../src/popup/App'; +import { SettingsProps, SettingsList } from '../types/SettingsProps'; -interface ISetting { - title: string; - description: string; - modifyElement: JSX.Element; -} +const Settings: React.FC = ({ settingsState, setSettingsState }) => { -interface SettingsProps { - settingsState: SettingsState; - switchChange: (key: string, isOn: boolean) => void; - colorChange: (color: string) => void; -} + const switchChange = (key: string, isOn: boolean) => { + setSettingsState({ + ...settingsState, + [key]: isOn, + }); + }; -const Settings: React.FC = ({ settingsState, switchChange, colorChange }) => { - const settings: ISetting[] = [ + const colorChange = (color: string) => { + setSettingsState({ + ...settingsState, + customThemeColor: color, + }); + }; + + const settings: SettingsList[] = [ { title: "Notification Collector", description: "Uncaps the 9+ limit for notifications, showing the real number.", @@ -34,7 +37,7 @@ const Settings: React.FC = ({ settingsState, switchChange, colorC { title: "Animated Background Speed", description: "Controls the speed of the animated background.", - modifyElement: switchChange('animatedBackgroundSpeed', isOn)} /> + modifyElement:
Insert Slider Please
}, { title: "Custom Theme Colour", @@ -43,7 +46,7 @@ const Settings: React.FC = ({ settingsState, switchChange, colorC }, { title: "BetterSEQTA+", - description: "Unlocks premium features.", + description: "Enables BetterSEQTA+ features", modifyElement: switchChange('betterSEQTAPlus', isOn)} /> } ]; diff --git a/interface/src/types/AppProps.ts b/interface/src/types/AppProps.ts new file mode 100644 index 00000000..b562bd17 --- /dev/null +++ b/interface/src/types/AppProps.ts @@ -0,0 +1,53 @@ +export interface SettingsState { + notificationCollector: boolean; + lessonAlerts: boolean; + animatedBackground: boolean; + animatedBackgroundSpeed: string; + customThemeColor: string; + betterSEQTAPlus: boolean; +} + +// Define the ToggleItem interface for the nested objects in menuitems +interface ToggleItem { + toggle: boolean; +} + +// Define the Shortcut interface for the objects in the shortcuts array +interface Shortcut { + enabled: boolean; + name: string; +} + +// Define the MainConfig interface for the top-level object +export interface MainConfig { + DarkMode: boolean; + animatedbk: boolean; + bksliderinput: string; + customshortcuts: any[]; + defaultmenuorder: any[]; + lessonalert: boolean; + menuitems: { + assessments: ToggleItem; + courses: ToggleItem; + dashboard: ToggleItem; + documents: ToggleItem; + forums: ToggleItem; + goals: ToggleItem; + home: ToggleItem; + messages: ToggleItem; + myed: ToggleItem; + news: ToggleItem; + notices: ToggleItem; + portals: ToggleItem; + reports: ToggleItem; + settings: ToggleItem; + timetable: ToggleItem; + welcome: ToggleItem; + }; + menuorder: any[]; + notificationcollector: boolean; + onoff: boolean; + selectedColor: string; + shortcuts: Shortcut[]; + subjectfilters: Record; // Could be more specific based on what types are allowed +} diff --git a/interface/src/types/ColorPickerProps.ts b/interface/src/types/ColorPickerProps.ts new file mode 100644 index 00000000..5eda91c8 --- /dev/null +++ b/interface/src/types/ColorPickerProps.ts @@ -0,0 +1,4 @@ +export interface ColorPickerProps { + color: string; + onChange: (color: string) => void; +} \ No newline at end of file diff --git a/interface/src/types/SettingsProps.ts b/interface/src/types/SettingsProps.ts new file mode 100644 index 00000000..f3961ae3 --- /dev/null +++ b/interface/src/types/SettingsProps.ts @@ -0,0 +1,11 @@ +import type { SettingsState } from './AppProps'; + +export interface SettingsList { + title: string; + description: string; + modifyElement: JSX.Element; +} +export interface SettingsProps { + settingsState: SettingsState; + setSettingsState: React.Dispatch>; +} diff --git a/interface/src/components/Slider.d.ts b/interface/src/types/SliderProps.ts similarity index 85% rename from interface/src/components/Slider.d.ts rename to interface/src/types/SliderProps.ts index 311cbbaa..7ae50459 100644 --- a/interface/src/components/Slider.d.ts +++ b/interface/src/types/SliderProps.ts @@ -1,6 +1,6 @@ import React from 'react'; import "./Slider.css"; -interface Slider { +export interface Slider { onValueChange: (value: number) => void; } declare const Slider: React.FC; diff --git a/interface/src/types/SwitchProps.ts b/interface/src/types/SwitchProps.ts new file mode 100644 index 00000000..8a43742d --- /dev/null +++ b/interface/src/types/SwitchProps.ts @@ -0,0 +1,6 @@ +import "./Switch.css"; + +export interface SwitchProps { + onChange: (isOn: boolean) => void; + state: boolean; +} \ No newline at end of file diff --git a/interface/src/components/TabbedContainer.d.ts b/interface/src/types/TabbedContainerProps.ts similarity index 77% rename from interface/src/components/TabbedContainer.d.ts rename to interface/src/types/TabbedContainerProps.ts index 193c7fcb..fee6f452 100644 --- a/interface/src/components/TabbedContainer.d.ts +++ b/interface/src/types/TabbedContainerProps.ts @@ -1,9 +1,9 @@ import React, { JSX } from 'react'; -interface Tab { +export interface Tab { title: string; content: JSX.Element; } -interface TabbedContainerProps { +export interface TabbedContainerProps { tabs: Tab[]; themeColor: string; } diff --git a/interface/tsconfig.json b/interface/tsconfig.json index a7fc6fbf..2460ee18 100644 --- a/interface/tsconfig.json +++ b/interface/tsconfig.json @@ -4,7 +4,7 @@ "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", - "skipLibCheck": true, + "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", diff --git a/public/manifest.json b/public/manifest.json index 24c45fbd..a59b294a 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -58,6 +58,14 @@ { "resources": ["index.css"], "matches": ["*://*/*"] + }, + { + "resources": ["interface/*"], + "matches": ["*://*/*"] + }, + { + "resources": ["client/*"], + "matches": ["*://*/*"] } ] } diff --git a/public/popup/info.css b/public/popup/info.css index 8b1e6f3c..a5a2b462 100644 --- a/public/popup/info.css +++ b/public/popup/info.css @@ -14,13 +14,12 @@ @import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600"); .outside-container { - width: 350px; margin: 0; - background-color: #131313; overflow: hidden; position: absolute; right: 10px; top: 80px; + height: 590px; z-index: 20; } diff --git a/src/SEQTA.js b/src/SEQTA.js index e3ac28ba..43b05b9c 100644 --- a/src/SEQTA.js +++ b/src/SEQTA.js @@ -13,7 +13,7 @@ let SettingsClicked = false; let MenuOptionsOpen = false; let UserInitalCode = ""; let currentSelectedDate = new Date(); -let WhatsNewOpen = false; +//let WhatsNewOpen = false; let LessonInterval; let DarkMode; @@ -25,7 +25,7 @@ function SetDisplayNone(ElementName) { return `li[data-key=${ElementName}]{display:var(--menuHidden) !important; transition: 1s;}`; } -function animbkEnable (item) { +function animbkEnable(item) { if (item.animatedbk) { CreateBackground(); } else { @@ -38,7 +38,9 @@ function bkValues (item) { const bg = document.getElementsByClassName("bg"); const bg2 = document.getElementsByClassName("bg2"); const bg3 = document.getElementsByClassName("bg3"); - const value = 200 - item.bksliderinput; + const value = 200 - item.bksliderinput; // reverse the slider direction to match the animation direction + + if (bg.length == 0 || bg2.length == 0 || bg3.length == 0) return; const minDuration = 1; // minimum duration in seconds const maxDuration = 10; // maximum duration in seconds @@ -172,12 +174,12 @@ function OpenWhatsNewPopup() { var bkelement = document.getElementById("whatsnewbk"); bkelement.addEventListener("click", function () { DeleteWhatsNew(); - WhatsNewOpen = false; + //WhatsNewOpen = false; }); var closeelement = document.getElementById("whatsnewclosebutton"); closeelement.addEventListener("click", function () { DeleteWhatsNew(); - WhatsNewOpen = false; + //WhatsNewOpen = false; }); } @@ -193,7 +195,7 @@ async function finishLoad() { chrome.storage.local.get(["justupdated"], function (result) { if (result.justupdated) { - WhatsNewOpen = true; + //WhatsNewOpen = true; OpenWhatsNewPopup(); } }); @@ -233,6 +235,9 @@ function RemoveBackground() { var bk = document.getElementsByClassName("bg"); var bk2 = document.getElementsByClassName("bg2"); var bk3 = document.getElementsByClassName("bg3"); + + if (bk.length == 0 || bk2.length == 0 || bk3.length == 0) return; + bk[0].remove(); bk2[0].remove(); bk3[0].remove(); @@ -760,7 +765,6 @@ chrome.storage.onChanged.addListener(function (changes) { "--better-main", changes.selectedColor.newValue, ); - // document.documentElement.style.setProperty('--better-sub', ColorLuminance(changes.selectedColor.newValue, -0.15)); if (changes.selectedColor.newValue == "#ffffff") { document.documentElement.style.setProperty("--better-light", "#b7b7b7"); @@ -801,7 +805,7 @@ async function CheckLoadOnPeriods() { } } -function RunFunctionOnTrue(storedSetting) { +function main(storedSetting) { DarkMode = storedSetting.DarkMode; // If the option is 'on', open BetterSEQTA if (typeof storedSetting.onoff == "undefined") { @@ -891,7 +895,6 @@ function RunFunctionOnTrue(storedSetting) { "--better-main", storedSetting.selectedColor, ); - // document.documentElement.style.setProperty('--better-sub', ColorLuminance(storedSetting.selectedColor, -0.15)); if (storedSetting.selectedColor == "#ffffff") { document.documentElement.style.setProperty("--better-light", "#b7b7b7"); @@ -966,7 +969,7 @@ document.addEventListener( document.getElementsByTagName("html")[0].appendChild(link); chrome.storage.local.get(null, function (items) { - RunFunctionOnTrue(items); + main(items); }); } if ( @@ -978,7 +981,7 @@ document.addEventListener( }, true, ); - +/* function RunExtensionSettingsJS() { const whatsnewsettings = document.getElementById("whatsnewsettings"); whatsnewsettings.addEventListener("click", function () { @@ -1043,9 +1046,9 @@ function RunExtensionSettingsJS() { function FindSEQTATab() { chrome.runtime.sendMessage({ type: "reloadTabs" }); } - /* - Store the currently selected settings using chrome.storage.local. - */ + + // Store the currently selected settings using chrome.storage.local. + function storeSettings() { chrome.storage.local.set({ onoff: onoffselection.checked }, function () { FindSEQTATab(); @@ -1072,10 +1075,10 @@ function RunExtensionSettingsJS() { FindSEQTATab(); } - /* - Update the options UI with the settings values retrieved from storage, - or the default settings if the stored settings are empty. - */ + + // Update the options UI with the settings values retrieved from storage, + // or the default settings if the stored settings are empty. + function updateUI(restoredSettings) { if (typeof restoredSettings.onoff == "undefined") { chrome.runtime.sendMessage({ type: "setDefaultStorage" }); @@ -1310,7 +1313,7 @@ function RunExtensionSettingsJS() { chrome.storage.local.set({ selectedColor: b }); } }); -} +}*/ function CallExtensionSettings() { // Injecting CSS File to the webpage to overwrite iFrame default CSS @@ -1333,7 +1336,7 @@ function CallExtensionSettings() { fileref.setAttribute("href", cssFile); document.head.append(fileref); - let Settings = + /*let Settings = stringToHTML( String.raw`
`); - document.body.append(Settings.firstChild); +
`);*/ + let Settings2 = + stringToHTML( + String.raw` +
+
+ `); + document.body.append(Settings2.firstChild); - // override old popup with new (experimental) - const script = document.createElement("script"); - script.type = "module"; - script.src = chrome.runtime.getURL("client.js"); - (document.head||document.documentElement).appendChild(script); + // add an iframe to the div: + let iframe = document.createElement("iframe"); + iframe.src = chrome.runtime.getURL("interface/index.html"); + iframe.allowTransparency = "true"; + iframe.style.width = "384px"; + iframe.style.height = "590px"; + iframe.style.border = "none"; + iframe.setAttribute("excludeDarkCheck", "true"); + + document.getElementById("ExtensionPopup").append(iframe); var container = document.getElementById("container"); var extensionsettings = document.getElementById("ExtensionPopup"); container.onclick = function () { if (!SettingsClicked) { - extensionsettings.classList.add("hidden"); + extensionsettings.classList.add("hide"); } SettingsClicked = false; }; @@ -2056,8 +2070,9 @@ function AddBetterSEQTAElements(toggle) { } CallExtensionSettings(); - RunExtensionSettingsJS(); + //RunExtensionSettingsJS(); + // If betterSEQTA+ is enabled, run the code if (toggle) { // Creates settings and dashboard buttons next to alerts var SettingsButton = stringToHTML( @@ -2118,6 +2133,11 @@ function AddBetterSEQTAElements(toggle) { for (let i = 0; i < alliframes.length; i++) { const element = alliframes[i]; + + if (element.getAttribute("excludeDarkCheck") == "true") { + continue; + } + element.contentDocument.documentElement.childNodes[1].style.color = "white"; element.contentDocument.documentElement.firstChild.appendChild( @@ -2151,6 +2171,11 @@ function AddBetterSEQTAElements(toggle) { for (let i = 0; i < alliframes.length; i++) { const element = alliframes[i]; + + if (element.getAttribute("excludeDarkCheck") == "true") { + continue; + } + element.contentDocument.documentElement.childNodes[1].style.color = "black"; element.contentDocument.documentElement.firstChild.lastChild.remove(); @@ -2174,7 +2199,7 @@ function AddBetterSEQTAElements(toggle) { var AddedSettings = document.getElementById("AddedSettings"); var extensionsettings = document.getElementById("ExtensionPopup"); AddedSettings.addEventListener("click", function () { - extensionsettings.classList.toggle("hidden"); + extensionsettings.classList.toggle("hide"); SettingsClicked = true; }); } diff --git a/src/inject/injected.css b/src/inject/injected.css index 7fc8c467..55e9d3e6 100644 --- a/src/inject/injected.css +++ b/src/inject/injected.css @@ -1,6 +1,5 @@ @import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600"); @import "./injected/popup.css"; -@import "./popup.css"; :root { background-color: var(--better-main) !important; @@ -24,11 +23,6 @@ html { --theme-fg-parts: white; } -#title { - color: var(--text-primary); - font-weight: 500 !important; -} - @media (min-width: 900px) { #title > span { transform: translateY(2px); @@ -611,10 +605,12 @@ div > ol:has(.uiFileHandlerWrapper) { #title { background: var(--background-primary); + color: var(--text-primary); height: 4rem; - box-shadow: rgb(0 0 0 / 35%) 0px 0px 10px; min-height: 48px; + box-shadow: rgb(0 0 0 / 35%) 0px 0px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); + font-weight: 500 !important; z-index: 1; } @@ -1085,7 +1081,7 @@ div > ol:has(.uiFileHandlerWrapper) { #ExtensionPopup { border-radius: 1rem; - box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.4); + box-shadow: 0px 0px 20px -2px rgba(0,0,0,0.6) } #menu li.active { @@ -1676,7 +1672,7 @@ body { } .MessageList__MessageList___3DxoC > ol > li.MessageList__unread___3imtO { - box-shadow: inset 3px 0 rgb(255, 255, 255); + box-shadow: inset 3px 0 var(--better-main); } .connectedNotificationsWrapper > div > button { diff --git a/src/inject/injected/popup.css b/src/inject/injected/popup.css index c914f5b8..10c8715d 100644 --- a/src/inject/injected/popup.css +++ b/src/inject/injected/popup.css @@ -5,3 +5,8 @@ .topmenu { margin-top: 0; } + +.hide { + opacity: 0; + pointer-events: none; +} \ No newline at end of file diff --git a/src/inject/popup.css b/src/inject/popup.css deleted file mode 100644 index 2335576d..00000000 --- a/src/inject/popup.css +++ /dev/null @@ -1 +0,0 @@ -.switch[data-ison=true]{background-color:#30d259}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.sticky{position:sticky!important}.left-0{left:0!important}.top-0{top:0!important}.z-0{z-index:0!important}.z-10{z-index:10!important}.z-50{z-index:50!important}.mb-2{margin-bottom:.5rem!important}.flex{display:flex!important}.grid{display:grid!important}.hidden{display:none!important}.h-1{height:.25rem!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-\[590px\]{height:590px!important}.h-full{height:100%!important}.h-screen{height:100vh!important}.w-14{width:3.5rem!important}.w-16{width:4rem!important}.w-4\/5{width:80%!important}.w-6{width:1.5rem!important}.w-\[24rem\]{width:24rem!important}.w-full{width:100%!important}.w-screen{width:100vw!important}.flex-1{flex:1 1 0%!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.place-items-center{place-items:center!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-2{gap:.5rem!important}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0 !important;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))!important;border-bottom-width:calc(1px * var(--tw-divide-y-reverse))!important}.divide-zinc-100>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1 !important;border-color:rgb(244 244 245 / var(--tw-divide-opacity))!important}.divide-zinc-100\/50>:not([hidden])~:not([hidden]){border-color:#f4f4f580!important}.overflow-hidden{overflow:hidden!important}.overflow-x-clip{overflow-x:clip!important}.overflow-y-scroll{overflow-y:scroll!important}.rounded-full{border-radius:9999px!important}.rounded-lg{border-radius:.5rem!important}.rounded-md{border-radius:.375rem!important}.rounded-xl{border-radius:.75rem!important}.border{border-width:1px!important}.border-b{border-bottom-width:1px!important}.border-b-zinc-200\/40{border-bottom-color:#e4e4e766!important}.bg-\[\#DDDDDD\]{--tw-bg-opacity: 1 !important;background-color:rgb(221 221 221 / var(--tw-bg-opacity))!important}.bg-white{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}.p-1{padding:.25rem!important}.p-4{padding:1rem!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}.pb-2{padding-bottom:.5rem!important}.pl-1{padding-left:.25rem!important}.pr-4{padding-right:1rem!important}.pt-2{padding-top:.5rem!important}.pt-4{padding-top:1rem!important}.text-\[0\.875rem\]{font-size:.875rem!important}.text-lg{font-size:1rem!important}.text-sm{font-size:.775rem!important}.text-xs{font-size:.65rem!important}.font-bold{font-weight:700!important}.text-blue-500{--tw-text-opacity: 1 !important;color:rgb(59 130 246 / var(--tw-text-opacity))!important}.underline{text-decoration-line:underline!important}.opacity-40{opacity:.4!important}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25) !important;--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.drop-shadow-md{--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / .07)) drop-shadow(0 2px 2px rgb(0 0 0 / .06)) !important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important;transition-duration:.15s!important}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.hover\:text-blue-600:hover{--tw-text-opacity: 1 !important;color:rgb(37 99 235 / var(--tw-text-opacity))!important}.focus\:outline-none:focus{outline:2px solid transparent!important;outline-offset:2px!important}:is(.dark .dark\:block){display:block!important}:is(.dark .dark\:hidden){display:none!important}:is(.dark .dark\:bg-\[\#38373D\]){--tw-bg-opacity: 1 !important;background-color:rgb(56 55 61 / var(--tw-bg-opacity))!important}:is(.dark .dark\:bg-\[\#FEFEFE\]){--tw-bg-opacity: 1 !important;background-color:rgb(254 254 254 / var(--tw-bg-opacity))!important}:is(.dark .dark\:bg-zinc-800){--tw-bg-opacity: 1 !important;background-color:rgb(39 39 42 / var(--tw-bg-opacity))!important}:is(.dark .dark\:text-white){--tw-text-opacity: 1 !important;color:rgb(255 255 255 / var(--tw-text-opacity))!important} diff --git a/webpack.config.js b/webpack.config.js index 58b2b428..47b0165b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -64,6 +64,7 @@ export default { { from: "public", to: "." }, { from: "src/inject/preview", to: "inject/preview" }, { from: "node_modules/webextension-polyfill/dist/browser-polyfill.js", to: "."}, + { from: "interface/dist/client", to: "client" } ], }), ],