diff --git a/package-lock.json b/package-lock.json index d3490c61c..a0fc2800d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,6 +47,7 @@ "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", + "sass": "^1.103.1", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.7.5", @@ -180,6 +181,22 @@ "npm": ">=2.0.0" } }, + "node_modules/@angular-devkit/build-angular/node_modules/sass": { + "version": "1.23.3", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.23.3.tgz", + "integrity": "sha512-1DKRZxJMOh4Bme16AbWTyYeJAjTlrvw2+fWshHHaepeJfGq2soFZTnt0YhWit+bohtDu4LdyPoEj6VFD4APHog==", + "dev": true, + "license": "MIT", + "dependencies": { + "chokidar": ">=2.0.0 <4.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=8.9.0" + } + }, "node_modules/@angular-devkit/build-optimizer": { "version": "0.900.2", "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.900.2.tgz", @@ -2351,6 +2368,308 @@ "npm": ">=2.0.0" } }, + "node_modules/@parcel/watcher": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.6.0.tgz", + "integrity": "sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "dependencies": { + "detect-libc": "^2.0.3", + "is-glob": "^4.0.3", + "node-addon-api": "^7.0.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.6.0", + "@parcel/watcher-darwin-arm64": "2.6.0", + "@parcel/watcher-darwin-x64": "2.6.0", + "@parcel/watcher-freebsd-x64": "2.6.0", + "@parcel/watcher-linux-arm-glibc": "2.6.0", + "@parcel/watcher-linux-arm-musl": "2.6.0", + "@parcel/watcher-linux-arm64-glibc": "2.6.0", + "@parcel/watcher-linux-arm64-musl": "2.6.0", + "@parcel/watcher-linux-x64-glibc": "2.6.0", + "@parcel/watcher-linux-x64-musl": "2.6.0", + "@parcel/watcher-win32-arm64": "2.6.0", + "@parcel/watcher-win32-x64": "2.6.0" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.6.0.tgz", + "integrity": "sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.6.0.tgz", + "integrity": "sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.6.0.tgz", + "integrity": "sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.6.0.tgz", + "integrity": "sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.6.0.tgz", + "integrity": "sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.6.0.tgz", + "integrity": "sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.6.0.tgz", + "integrity": "sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.6.0.tgz", + "integrity": "sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.6.0.tgz", + "integrity": "sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.6.0.tgz", + "integrity": "sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.6.0.tgz", + "integrity": "sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.6.0.tgz", + "integrity": "sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher/node_modules/picomatch": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz", + "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/@rolldown/pluginutils": { "version": "1.0.0-beta.27", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz", @@ -6361,6 +6680,17 @@ "dev": true, "license": "MIT" }, + "node_modules/detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "engines": { + "node": ">=8" + } + }, "node_modules/detect-node": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz", @@ -8439,6 +8769,13 @@ "dev": true, "license": "MIT" }, + "node_modules/immutable": { + "version": "5.1.9", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz", + "integrity": "sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==", + "dev": true, + "license": "MIT" + }, "node_modules/import-cwd": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", @@ -8880,9 +9217,9 @@ } }, "node_modules/is-glob": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", - "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", "dev": true, "license": "MIT", "dependencies": { @@ -11039,6 +11376,14 @@ "dev": true, "license": "MIT" }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, + "license": "MIT", + "optional": true + }, "node_modules/node-fetch": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz", @@ -13955,19 +14300,24 @@ "license": "MIT" }, "node_modules/sass": { - "version": "1.23.3", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.23.3.tgz", - "integrity": "sha512-1DKRZxJMOh4Bme16AbWTyYeJAjTlrvw2+fWshHHaepeJfGq2soFZTnt0YhWit+bohtDu4LdyPoEj6VFD4APHog==", + "version": "1.103.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.103.1.tgz", + "integrity": "sha512-9icZURbP51S6S0QGoyaeqk9uB06GNWxsFYWfH5RgpFgqK5FA8tJcM3AdVxrZEVJ7dz+L87nG95gBKf4VuaMHGw==", "dev": true, "license": "MIT", "dependencies": { - "chokidar": ">=2.0.0 <4.0.0" + "chokidar": "^5.0.0", + "immutable": "^5.1.5", + "source-map-js": ">=0.6.2 <2.0.0" }, "bin": { "sass": "sass.js" }, "engines": { - "node": ">=8.9.0" + "node": ">=20.19.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" } }, "node_modules/sass-loader": { @@ -14022,6 +14372,36 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/sass/node_modules/chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "dev": true, + "license": "MIT", + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass/node_modules/readdirp": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz", + "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/saucelabs": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-1.5.0.tgz", diff --git a/package.json b/package.json index eb5584537..2fe79fd64 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", + "sass": "^1.103.1", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.7.5", diff --git a/src/main.tsx b/src/main.tsx index 7d4495869..6e48f57c4 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,8 @@ import { createRoot } from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import App from './react/App'; +import { SettingsProvider } from './react/context/SettingsContext'; +import './react/styles.scss'; const rootElement = document.getElementById('root'); @@ -10,6 +12,8 @@ if (!rootElement) { createRoot(rootElement).render( - + + + ); diff --git a/src/react/App.tsx b/src/react/App.tsx index 371fb9d2a..7537f7c2f 100644 --- a/src/react/App.tsx +++ b/src/react/App.tsx @@ -1,6 +1,10 @@ +import { useSettings } from './context/SettingsContext'; + export default function App() { + const { settings } = useSettings(); + return ( -
+

Hacker News

); diff --git a/src/react/context/SettingsContext.tsx b/src/react/context/SettingsContext.tsx new file mode 100644 index 000000000..d509fa47c --- /dev/null +++ b/src/react/context/SettingsContext.tsx @@ -0,0 +1,176 @@ +import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'; +import { Settings } from '../models/settings'; + +interface SettingsContextValue { + settings: Settings; + toggleSettings: () => void; + toggleOpenLinksInNewTab: () => void; + setTheme: (theme: string) => void; + setFont: (fontSize: string) => void; + setSpacing: (listSpace: string) => void; +} + +const SettingsContext = createContext(undefined); + +function getStorage(): Storage | null { + if (typeof window === 'undefined') { + return null; + } + + try { + return window.localStorage; + } catch { + return null; + } +} + +function getDarkColorSchemeMedia(): MediaQueryList | null { + if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') { + return null; + } + + try { + return window.matchMedia('(prefers-color-scheme: dark)'); + } catch { + return null; + } +} + +function getStoredValue(key: string): string | null { + const storage = getStorage(); + + try { + return storage?.getItem(key) ?? null; + } catch { + return null; + } +} + +function getInitialSettings(): Settings { + const darkColorSchemeMedia = getDarkColorSchemeMedia(); + const storedOpenLinkInNewTab = getStoredValue('openLinkInNewTab'); + let openLinkInNewTab = false; + + if (storedOpenLinkInNewTab) { + try { + openLinkInNewTab = JSON.parse(storedOpenLinkInNewTab); + } catch { + openLinkInNewTab = false; + } + } + + return { + showSettings: false, + openLinkInNewTab, + theme: getStoredValue('theme') || (darkColorSchemeMedia?.matches ? 'night' : 'default'), + titleFontSize: getStoredValue('titleFontSize') || '16', + listSpacing: getStoredValue('listSpacing') || '0', + }; +} + +function setStoredValue(key: string, value: string): void { + const storage = getStorage(); + + try { + storage?.setItem(key, value); + } catch { + return; + } +} + +export function SettingsProvider({ children }: { children: React.ReactNode }) { + const [settings, setSettings] = useState(getInitialSettings); + + const toggleSettings = useCallback(() => { + setSettings(currentSettings => ({ + ...currentSettings, + showSettings: !currentSettings.showSettings, + })); + }, []); + + const toggleOpenLinksInNewTab = useCallback(() => { + setSettings(currentSettings => { + const openLinkInNewTab = !currentSettings.openLinkInNewTab; + setStoredValue('openLinkInNewTab', JSON.stringify(openLinkInNewTab)); + + return { + ...currentSettings, + openLinkInNewTab, + }; + }); + }, []); + + const setTheme = useCallback((theme: string) => { + setStoredValue('theme', theme); + setSettings(currentSettings => ({ + ...currentSettings, + theme, + })); + }, []); + + const setFont = useCallback((fontSize: string) => { + setStoredValue('titleFontSize', fontSize); + setSettings(currentSettings => ({ + ...currentSettings, + titleFontSize: fontSize, + })); + }, []); + + const setSpacing = useCallback((listSpace: string) => { + setStoredValue('listSpacing', listSpace); + setSettings(currentSettings => ({ + ...currentSettings, + listSpacing: listSpace, + })); + }, []); + + useEffect(() => { + const darkColorSchemeMedia = getDarkColorSchemeMedia(); + + if (!darkColorSchemeMedia) { + return undefined; + } + + const handleSystemPreferredColorSchemeChange = (event: MediaQueryListEvent) => { + setTheme(event.matches ? 'night' : 'default'); + }; + + if (typeof darkColorSchemeMedia.addEventListener === 'function') { + darkColorSchemeMedia.addEventListener('change', handleSystemPreferredColorSchemeChange); + } else { + darkColorSchemeMedia.addListener(handleSystemPreferredColorSchemeChange); + } + + return () => { + if (typeof darkColorSchemeMedia.removeEventListener === 'function') { + darkColorSchemeMedia.removeEventListener('change', handleSystemPreferredColorSchemeChange); + } else { + darkColorSchemeMedia.removeListener(handleSystemPreferredColorSchemeChange); + } + }; + }, [setTheme]); + + const value = useMemo( + () => ({ + settings, + toggleSettings, + toggleOpenLinksInNewTab, + setTheme, + setFont, + setSpacing, + }), + [settings, toggleSettings, toggleOpenLinksInNewTab, setTheme, setFont, setSpacing] + ); + + return {children}; +} + +export function useSettings(): SettingsContextValue { + const context = useContext(SettingsContext); + + if (!context) { + throw new Error('useSettings must be used within a SettingsProvider'); + } + + return context; +} diff --git a/src/react/scss/_media.scss b/src/react/scss/_media.scss new file mode 100644 index 000000000..b04b71a92 --- /dev/null +++ b/src/react/scss/_media.scss @@ -0,0 +1,3 @@ +$mobile-only: "only screen and (max-width : 768px)"; +$laptop-only: "only screen and (min-width : 769px)"; +$tablet-only: "only screen and (max-width : 1024px)"; diff --git a/src/react/scss/_theme_variables.scss b/src/react/scss/_theme_variables.scss new file mode 100644 index 000000000..41dae5eea --- /dev/null +++ b/src/react/scss/_theme_variables.scss @@ -0,0 +1,37 @@ +$skull-size: 200px; + +// ------------------------------------------------------------------------------------------- +// Theme Engine +// ------------------------------------------------------------------------------------------- + +// Day theme colors +$theme-day-body-background-color: #fff; +$theme-day-wrapper-background-color: #f5f5f5; +$theme-day-wrapper-mobile-background-color: #fff; +$theme-day-text-color: #000; +$theme-day-subtext-color: #696969; +$theme-day-secondary-color: #b92b27; +$theme-day-header-background-color: $theme-day-secondary-color; +$theme-day-logo-inner: #fff; + +// Day theme extras +$theme-day-border: 2px solid #b92b27; + +// Night theme colors +$theme-night-body-background-color: #37474F; +$theme-night-wrapper-background-color: #263238; +$theme-night-wrapper-mobile-background-color: $theme-night-wrapper-background-color; +$theme-night-text-color: rgba(255, 255, 255, 0.7); +$theme-night-subtext-color: #999; +$theme-night-secondary-color: #00c0ff; +$theme-night-header-background-color: #263238; +$theme-night-logo-inner: $theme-night-header-background-color; + +// Night theme extras +$theme-night-border: 2px solid #00c0ff; + +// Black theme colors +$theme-amoledblack-body-background-color: #000; +$theme-amoledblack-text-color: rgba(255, 255, 255, 0.75); +$theme-amoledblack-subtext-color: rgba(255, 255, 255, 0.5); +$theme-amoledblack-secondary-color: rgba(255, 255, 255, 0.6); diff --git a/src/react/scss/_themes.scss b/src/react/scss/_themes.scss new file mode 100644 index 000000000..231ed7cf9 --- /dev/null +++ b/src/react/scss/_themes.scss @@ -0,0 +1,245 @@ +@import "./media"; +@import "./theme_variables"; + +/* ---------------------------------- + + Want a new theme? Add your new theme variables here! + +---------------------------------- */ + +@mixin theme( + $name, + $body-background-color, + $wrapper-background-color, + $wrapper-mobile-background-color, + $wrapper-color, + $item-a-color, + $item-a-visited-color, + $header-background-color, + $subtext-color, + $secondary-link-color, + $logo-inner-color, + $border +) { + .#{$name} { + .body-cover { + background: $body-background-color; + + @media #{$mobile-only} { + background: $wrapper-mobile-background-color; + } + } + + .wrapper { + background: $wrapper-background-color; + color: $wrapper-color; + + @media #{$mobile-only} { + background: $wrapper-mobile-background-color; + } + + a { + color: $item-a-color; + + &:visited { + color: $item-a-visited-color; + } + } + + #header { + background: $header-background-color; + border-bottom: $border; + } + + .logo-inner { + background: $logo-inner-color; + } + + .nav { + a { + color: $secondary-link-color; + + @media #{$mobile-only} { + color: $secondary-link-color; + } + } + } + + #footer { + border-top: $border; + + a { + color: $secondary-link-color; + } + } + + .subtext, .subtext-palm, .subtext-laptop, .domain, .meta, .deleted-meta{ + color: $subtext-color; + + a { + color: $secondary-link-color; + } + } + + .popup { + background: $header-background-color; + } + + .item-header { + border-bottom: $border; + + @media #{$mobile-only} { + background: $wrapper-mobile-background-color; + } + } + + .pollContent { + .pollBar { + background: $secondary-link-color; + } + } + + .loader { + color: $secondary-link-color; + background: $secondary-link-color; + + &:before, &:after { + background: $secondary-link-color; + } + } + + .job-header { + @media #{$mobile-only} { + border-bottom: $border; + } + } + + .back-button { + @media #{$mobile-only} { + border-top: .3rem solid $secondary-link-color; + border-right: .3rem solid $secondary-link-color; + } + } + + .error-section { + .skull { + .head { + background-color: $secondary-link-color; + + &:before, &:after { + background-color: $wrapper-background-color; + + @media #{$mobile-only} { + background-color: $wrapper-mobile-background-color; + } + } + + .crack { + background-color: $wrapper-background-color; + + @media #{$mobile-only} { + background-color: $wrapper-mobile-background-color; + } + + &:before { + border-top: $skull-size / 8 solid $wrapper-background-color; + + @media #{$mobile-only} { + border-top: $skull-size / 8 solid $wrapper-mobile-background-color; + } + } + } + } + + .mouth { + background-color: $secondary-link-color; + + &:before { + background-color: $wrapper-background-color; + + @media #{$mobile-only} { + background-color: $wrapper-mobile-background-color; + } + } + } + + .teeth { + background-color: $wrapper-background-color; + + @media #{$mobile-only} { + background-color: $wrapper-mobile-background-color; + } + + &:before, &:after { + background-color: $wrapper-background-color; + + @media #{$mobile-only} { + background-color: $wrapper-mobile-background-color; + } + } + } + } + } + + .main-details { + .name { + color: $secondary-link-color; + } + .right { + color: $secondary-link-color; + } + } + } + } +} + +@include theme( + default, + $theme-day-body-background-color, + $theme-day-wrapper-background-color, + $theme-day-wrapper-mobile-background-color, + $theme-day-text-color, + $theme-day-text-color, + $theme-day-subtext-color, + $theme-day-header-background-color, + $theme-day-subtext-color, + $theme-day-secondary-color, + $theme-day-logo-inner, + $theme-day-border +); + +@include theme( + night, + $theme-night-body-background-color, + $theme-night-wrapper-background-color, + $theme-night-wrapper-mobile-background-color, + $theme-night-text-color, + $theme-night-text-color, + $theme-night-subtext-color, + $theme-night-header-background-color, + $theme-night-subtext-color, + $theme-night-secondary-color, + $theme-night-logo-inner, + $theme-night-border +); + +@include theme( + amoledblack, + $theme-amoledblack-body-background-color, + $theme-amoledblack-body-background-color, + $theme-amoledblack-body-background-color, + $theme-amoledblack-text-color, + $theme-amoledblack-text-color, + darken($theme-amoledblack-text-color, 33%), + $theme-amoledblack-body-background-color, + $theme-amoledblack-subtext-color, + $theme-amoledblack-secondary-color, + $theme-amoledblack-body-background-color, + $theme-amoledblack-secondary-color +); + +/* ---------------------------------- + + Include your new theme here as well as the settings component + +---------------------------------- */ diff --git a/src/react/styles.scss b/src/react/styles.scss new file mode 100644 index 000000000..1c97b2a91 --- /dev/null +++ b/src/react/styles.scss @@ -0,0 +1,43 @@ +@import "./scss/themes"; + +html { + height: 100%; + width: 100%; +} + +body { + margin: 0; + height: 100%; + width: 100%; +} + +pre { + white-space: pre-wrap; +} + +.app-loader { + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: -1; +} + +@media screen and (max-width: 768px) { + .app-loader { + background-color: #fff; + } +} + +app-root:empty + .app-loader { + opacity: 1; + z-index: 100; +} +app-root:empty + .app-loader .logo { + width: 20vh; +} diff --git a/vite.config.ts b/vite.config.ts index 5b40a326a..63b22b667 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,17 +3,20 @@ import { defineConfig, type Plugin } from 'vite'; const reactEntry: Plugin = { name: 'react-entry', - transformIndexHtml() { - return [ - { - tag: 'script', - attrs: { - type: 'module', - src: '/main.tsx', + transformIndexHtml: { + order: 'pre', + handler() { + return [ + { + tag: 'script', + attrs: { + type: 'module', + src: '/main.tsx', + }, + injectTo: 'body', }, - injectTo: 'body', - }, - ]; + ]; + }, }, };