diff --git a/www/package-lock.json b/www/package-lock.json index 9f384fc65..98bdac213 100644 --- a/www/package-lock.json +++ b/www/package-lock.json @@ -11,7 +11,6 @@ "@hello-pangea/color-picker": "^3.2.2", "axios": "^1.3.5", "bootstrap": "^5.3.0-alpha3", - "bootstrap-icons": "^1.10.5", "crypto-js": "^4.1.1", "formik": "^2.2.9", "javascript-color-gradient": "^2.4.4", @@ -1741,21 +1740,6 @@ "@popperjs/core": "^2.11.7" } }, - "node_modules/bootstrap-icons": { - "version": "1.10.5", - "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz", - "integrity": "sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/twbs" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/bootstrap" - } - ] - }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/www/package.json b/www/package.json index 3f0227a9f..730b23bed 100644 --- a/www/package.json +++ b/www/package.json @@ -7,7 +7,6 @@ "@hello-pangea/color-picker": "^3.2.2", "axios": "^1.3.5", "bootstrap": "^5.3.0-alpha3", - "bootstrap-icons": "^1.10.5", "crypto-js": "^4.1.1", "formik": "^2.2.9", "javascript-color-gradient": "^2.4.4", diff --git a/www/src/Components/ColorScheme.jsx b/www/src/Components/ColorScheme.jsx index d0609ee44..1dfee371f 100644 --- a/www/src/Components/ColorScheme.jsx +++ b/www/src/Components/ColorScheme.jsx @@ -1,54 +1,62 @@ -import React, { useContext } from 'react'; -import { Dropdown } from 'react-bootstrap'; -import { AppContext } from '../Contexts/AppContext'; - - -const dropdownOptions = [ - { scheme: 'light', icon: 'bi-sun-fill', label: 'Light' }, - { scheme: 'dark', icon: 'bi-moon-stars-fill', label: 'Dark' }, - { scheme: 'auto', icon: 'bi-circle-half', label: 'Auto' }, -]; - -const setTheme = function (theme) { - const rootElement = document.documentElement; - const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; - - if (theme === 'auto') { - rootElement.setAttribute('data-bs-theme', prefersDarkMode ? 'dark' : 'light'); - } else { - rootElement.setAttribute('data-bs-theme', theme); - } -} - -const ColorScheme = () => { - const { savedColorScheme, setSavedColorScheme } = useContext(AppContext); - - setTheme(savedColorScheme); - - const setThemeAndState = (newColorScheme) => { - setTheme(newColorScheme); - setSavedColorScheme(newColorScheme); - } - - return ( - - - - - - - {dropdownOptions.map((option) => ( - setThemeAndState(option.scheme)} - > - {option.label} - - ))} - - - ); -}; - -export default ColorScheme; +import React, { useContext } from "react"; +import { Dropdown } from "react-bootstrap"; +import { AppContext } from "../Contexts/AppContext"; +import SunIcon from "../Icons/Sun"; +import MoonStarsIcon from "../Icons/MoonStars"; +import CircleHalfIcon from "../Icons/CircleHalf"; + +const dropdownOptions = [ + { scheme: "light", icon: SunIcon, label: "Light" }, + { scheme: "dark", icon: MoonStarsIcon, label: "Dark" }, + { scheme: "auto", icon: CircleHalfIcon, label: "Auto" }, +]; + +const setTheme = function (theme) { + const rootElement = document.documentElement; + const prefersDarkMode = window.matchMedia( + "(prefers-color-scheme: dark)" + ).matches; + + if (theme === "auto") { + rootElement.setAttribute( + "data-bs-theme", + prefersDarkMode ? "dark" : "light" + ); + } else { + rootElement.setAttribute("data-bs-theme", theme); + } +}; + +const ColorScheme = () => { + const { savedColorScheme, setSavedColorScheme } = useContext(AppContext); + + setTheme(savedColorScheme); + + const setThemeAndState = (newColorScheme) => { + setTheme(newColorScheme); + setSavedColorScheme(newColorScheme); + }; + + return ( + + + + + + + {dropdownOptions.map((option) => ( + setThemeAndState(option.scheme)} + > + {option.label} + + ))} + + + ); +}; + +export default ColorScheme; diff --git a/www/src/Icons/CircleHalf.tsx b/www/src/Icons/CircleHalf.tsx new file mode 100644 index 000000000..0ae6c8429 --- /dev/null +++ b/www/src/Icons/CircleHalf.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +const CircleHalf = () => ( + + + +); +export default CircleHalf; diff --git a/www/src/Icons/MoonStars.tsx b/www/src/Icons/MoonStars.tsx new file mode 100644 index 000000000..45ac282b6 --- /dev/null +++ b/www/src/Icons/MoonStars.tsx @@ -0,0 +1,14 @@ +import React from "react"; + +const MoonStars = () => ( + + + + +); +export default MoonStars; diff --git a/www/src/Icons/Sun.tsx b/www/src/Icons/Sun.tsx new file mode 100644 index 000000000..d7017e956 --- /dev/null +++ b/www/src/Icons/Sun.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +const Sun = () => ( + + + +); +export default Sun; diff --git a/www/src/index.scss b/www/src/index.scss index 0985b7c35..cdf7919a7 100644 --- a/www/src/index.scss +++ b/www/src/index.scss @@ -3,7 +3,6 @@ $primary: #495057; $danger: #7b2d26; @import '~bootstrap/scss/bootstrap'; -@import '~bootstrap-icons/font/bootstrap-icons.css'; :root { --bs-primary-rgb: 20, 23, 30; @@ -42,10 +41,8 @@ button { flex-direction: row; align-items: center; flex: 0 0 auto; - width: auto !important; svg { - margin: 0.25rem; transform: translateY(-0.125rem); } } diff --git a/www/vite.config.ts b/www/vite.config.ts index be10efd51..41516ae1c 100644 --- a/www/vite.config.ts +++ b/www/vite.config.ts @@ -16,10 +16,6 @@ export default defineConfig({ resolve: { alias: { "~bootstrap": path.resolve(__dirname, "node_modules/bootstrap"), - "~bootstrap-icons": path.resolve( - __dirname, - "node_modules/bootstrap-icons" - ), }, }, });