Remove bootstrap-icons and include svgs instead (#331)

* Remove bootstrap-icons and include svgs instead
OpenStickCommunity · Jun 13, 2023 · 3fafbb3 · 3fafbb3
1 parent 4ce7d32
commit 3fafbb3
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 78 deletions.
diff --git a/www/package-lock.json b/www/package-lock.json
diff --git 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
@@ -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 (
-		<Dropdown>
-			<Dropdown.Toggle variant="secondary" style={{ marginRight: "7px" }}>
-				<i class="bi-moon-stars-fill"></i>
-			</Dropdown.Toggle>
-
-			<Dropdown.Menu>
-				{dropdownOptions.map((option) => (
-					<Dropdown.Item
-						key={option.theme}
-						className={`dropdown-item ${savedColorScheme === option.scheme ? 'active' : ''}`}
-						onClick={() => setThemeAndState(option.scheme)}
-					>
-						<i className={option.icon}></i> {option.label}
-					</Dropdown.Item>
-				))}
-			</Dropdown.Menu>
-		</Dropdown>
-	);
-};
-
-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 (
+		<Dropdown>
+			<Dropdown.Toggle variant="secondary" style={{ marginRight: "7px" }}>
+				<MoonStarsIcon />
+			</Dropdown.Toggle>
+
+			<Dropdown.Menu>
+				{dropdownOptions.map((option) => (
+					<Dropdown.Item
+						key={option.theme}
+						as={"button"}
+						className={savedColorScheme === option.scheme ? "active" : ""}
+						onClick={() => setThemeAndState(option.scheme)}
+					>
+						<option.icon /> {option.label}
+					</Dropdown.Item>
+				))}
+			</Dropdown.Menu>
+		</Dropdown>
+	);
+};
+
+export default ColorScheme;
diff --git a/www/src/Icons/CircleHalf.tsx b/www/src/Icons/CircleHalf.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+const CircleHalf = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="1em"
+		height="1em"
+		fill="currentColor"
+	>
+		<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
+	</svg>
+);
+export default CircleHalf;
diff --git a/www/src/Icons/MoonStars.tsx b/www/src/Icons/MoonStars.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+const MoonStars = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="1em"
+		height="1em"
+		fill="currentColor"
+	>
+		<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
+		<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" />
+	</svg>
+);
+export default MoonStars;
diff --git a/www/src/Icons/Sun.tsx b/www/src/Icons/Sun.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+const Sun = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="1em"
+		height="1em"
+		fill="currentColor"
+	>
+		<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+	</svg>
+);
+export default Sun;
diff --git 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
@@ -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"
-			),
 		},
 	},
 });