skins: Added Pixel skin

packages/apps/browser/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/browser
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/browser/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/browser",
 	"description": "A ProzillaOS application for browsing the internet.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/browser",
 	"author": {
 		"name": "Prozilla",

packages/apps/calculator/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/calculator
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/calculator/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/calculator",
 	"description": "A ProzillaOS application for making basic calculations.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/calculator",
 	"author": {
 		"name": "Prozilla",

packages/apps/file-explorer/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/file-explorer
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/file-explorer/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/file-explorer",
 	"description": "A standard ProzillaOS application for browsing files.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/file-explorer",
 	"author": {
 		"name": "Prozilla",

packages/apps/logic-sim/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/logic-sim
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/logic-sim/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/logic-sim",
 	"description": "A ProzillaOS application for simulating digital logic.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/logic-sim",
 	"author": {
 		"name": "Prozilla",

packages/apps/media-viewer/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/media-viewer
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/media-viewer/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/media-viewer",
 	"description": "A ProzillaOS application for viewing different kinds of media.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/media-viewer",
 	"author": {
 		"name": "Prozilla",

packages/apps/settings/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @prozilla-os/settings
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+  - @prozilla-os/file-explorer@1.1.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/settings/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/settings",
 	"description": "A settings app for ProzillaOS.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/settings",
 	"author": {
 		"name": "Prozilla",

packages/apps/terminal/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/terminal
 
+## 1.1.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.1
 
 ### Patch Changes

packages/apps/terminal/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/terminal",
 	"description": "A terminal/shell application for ProzillaOS.",
-	"version": "1.1.1",
+	"version": "1.1.2",
 	"homepage": "https://os.prozilla.dev/terminal",
 	"author": {
 		"name": "Prozilla",

packages/apps/text-editor/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/text-editor
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/text-editor/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/text-editor",
 	"description": "A text editor application for ProzillaOS.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/text-editor",
 	"author": {
 		"name": "Prozilla",

packages/core/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @prozilla-os/core
 
+## 1.2.1
+
+### Patch Changes
+
+- Added Pixel skin
+- Updated dependencies
+  - @prozilla-os/skins@1.1.1
+
 ## 1.2.0
 
 ### Minor Changes

packages/core/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/core",
 	"description": "A React component library written in TypeScript for building web-based operating systems, made by Prozilla.",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"homepage": "https://os.prozilla.dev",
 	"author": {
 		"name": "Prozilla",

packages/core/src/components/_utils/directory-list/ImagePreview.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import styles from "./ImagePreview.module.css";
 import { ReactSVG } from "react-svg";
 import { useSystemManager } from "../../../hooks";
+import { VectorImage } from "../vector-image/VectorImage";
 
 interface ImagePreviewProps {
 	source: string;
@@ -25,9 +26,7 @@ export function ImagePreview({ source, className, onError, ...props }: ImagePrev
 	return (<div className={classNames.join(" ")} {...props}>
 		{loadingFailed
 			? <ReactSVG src={skin.fileIcons.generic}/>
-			: source.endsWith(".svg")
-				? <ReactSVG src={source} onError={onLoadingError}/>
-				: <img src={source} onError={onLoadingError} alt="Preview" draggable="false"/>
+			: <VectorImage src={source} onError={onLoadingError}/>
 		}
 	</div>);
 }

packages/core/src/components/_utils/index.ts

@@ -6,5 +6,6 @@ export { ProgressBar } from "./progress-bar/ProgressBar";
 export { HeaderMenu } from "./header-menu/HeaderMenu";
 export { WebView } from "./web-view/WebView";
 export { ImagePreview } from "./directory-list/ImagePreview";
+export { VectorImage as Image } from "./vector-image/VectorImage";
 
 export type { OnSelectionChangeParams, FileEventHandler, FolderEventHandler } from "./directory-list/DirectoryList";

packages/core/src/components/_utils/vector-image/VectorImage.tsx

@@ -0,0 +1,51 @@
+import { Vector2 } from "@prozilla-os/core";
+import { useEffect, useState } from "react";
+import { ReactSVG } from "react-svg";
+
+interface ImageProps {
+	className?: string;
+	src?: string;
+	[key: string]: unknown;
+}
+
+export function VectorImage({ className, src, ...props }: ImageProps) {
+	const [dimensions, setDimensions] = useState<Vector2>(Vector2.ZERO);
+
+	useEffect(() => {
+		if (src == null)
+			return;
+
+		const image = new Image();
+
+		image.onload = () => {
+			console.log(image);
+			setDimensions(new Vector2(image.naturalWidth, image.naturalHeight));
+		};
+
+		image.src = src;
+	}, [src]);
+
+	if (src?.endsWith(".svg")) {
+		return <ReactSVG className={className} src={src} {...props}/>;
+	} else {
+		return <div>
+			<div>
+				<svg
+					width={200}
+					height={200}
+					className={className}
+					viewBox={"0 0 200 200"}
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					xmlnsXlink="http://www.w3.org/1999/xlink"
+					shapeRendering="crispEdges"
+					{...props}
+				>    
+					<g transform={`scale(${200 / (dimensions.x ?? 1)})`}>
+						<image width={dimensions.x} height={dimensions.y} href={src} style={{ imageRendering: "crisp-edges" }}/>
+					</g>
+				</svg>
+			</div>
+		</div>;
+	}
+}

packages/core/src/components/modals/_utils/WindowedModal.tsx

@@ -8,6 +8,7 @@ import Draggable from "react-draggable";
 import { ReactSVG } from "react-svg";
 import utilStyles from "../../../styles/utils.module.css";
 import { ModalProps } from "../ModalView";
+import { VectorImage } from "../../_utils/vector-image/VectorImage";
 
 export function WindowedModal({ modal, params, children, ...props }: ModalProps) {
 	const nodeRef = useRef(null);
@@ -53,7 +54,7 @@ export function WindowedModal({ modal, params, children, ...props }: ModalProps)
 			}}
 		>
 			<div className={`${styles.Header} Window-handle`}>
-				<ReactSVG
+				<VectorImage
 					className={styles["Window-icon"]}
 					src={params?.iconUrl as string}
 				/>

packages/core/src/components/taskbar/app-icon/AppIcon.tsx

@@ -8,6 +8,7 @@ import { Actions } from "../../actions/Actions";
 import { ClickAction } from "../../actions/actions/ClickAction";
 import { WindowsManager } from "../../../features/windows/windowsManager";
 import { useClassNames } from "../../../hooks";
+import { VectorImage } from "../../_utils/vector-image/VectorImage";
 
 interface AppButtonProps {
 	app: App;
@@ -73,7 +74,7 @@ export const AppButton: FC<AppButtonProps> = memo(({ app, windowsManager, active
 			}}
 			title={app.name}
 		>
-			<ReactSVG src={app.iconUrl as string}/>
+			<VectorImage src={app.iconUrl as string}/>
 		</button>
 	);
 });

packages/core/src/components/taskbar/indicators/Battery.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import styles from "./Battery.module.css";
 import { UtilMenu } from "../menus/UtilMenu";
 import { OutsideClickListener } from "../../../hooks/_utils/outsideClick";
+import { useClassNames } from "@prozilla-os/core";
 
 type Battery = {
 	charging: boolean | ((prevState: boolean) => boolean);
@@ -93,7 +94,7 @@ export function Battery({ hideUtilMenus, showUtilMenu }: BatteryProps) {
 	}
 
 	return (<OutsideClickListener onOutsideClick={() => { updateShowMenu(false); }}>
-		<button className={styles.Button} title="Battery" tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
+		<button className={useClassNames([styles.Button], "Taskbar", "Indicator", "Battery")} title="Battery" tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
 			{!isCharging
 				? <FontAwesomeIcon className={styles["Charging-indicator"]} icon={faMinus}/>
 				: null

packages/core/src/components/taskbar/indicators/Calendar.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import styles from "./Calendar.module.css";
 import { OutsideClickListener } from "../../../hooks/_utils/outsideClick";
 import { UtilMenu } from "../menus/UtilMenu";
+import { useClassNames } from "@prozilla-os/core";
 
 interface CalendarProps {
 	hideUtilMenus: boolean;
@@ -35,8 +36,8 @@ export function Calendar({ hideUtilMenus, showUtilMenu }: CalendarProps) {
 		setShowMenu(show);
 	};
 
-	return (<OutsideClickListener onOutsideClick={() => { updateShowMenu(false); }}>
-		<button className={styles.Button} title="Date & Time" tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
+	return <OutsideClickListener onOutsideClick={() => { updateShowMenu(false); }}>
+		<button className={useClassNames([styles.Button], "Taskbar", "Indicator", "Calendar")} title="Date & Time" tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
 			<p>
 				{date.toLocaleString("en-GB", {
 					hour: "numeric",
@@ -66,5 +67,5 @@ export function Calendar({ hideUtilMenus, showUtilMenu }: CalendarProps) {
 				year: "numeric",
 			})}</p>
 		</UtilMenu>
-	</OutsideClickListener>);
+	</OutsideClickListener>;
 }

packages/core/src/components/taskbar/indicators/Network.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { OutsideClickListener } from "../../../hooks/_utils/outsideClick";
 import { UtilMenu } from "../menus/UtilMenu";
 import styles from "./Network.module.css";
+import { useClassNames } from "@prozilla-os/core";
 
 interface NetworkProps {
 	hideUtilMenus: boolean;
@@ -27,7 +28,7 @@ export function Network({ hideUtilMenus, showUtilMenu }: NetworkProps) {
 	};
 
 	return (<OutsideClickListener onOutsideClick={() => { updateShowMenu(false); }}>
-		<button title="Network" tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
+		<button title="Network" className={useClassNames([], "Taskbar", "Indicator", "Network")} tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
 			<FontAwesomeIcon icon={faWifi}/>
 		</button>
 		<UtilMenu active={showMenu} setActive={setShowMenu} className={styles.Menu}>

packages/core/src/components/taskbar/indicators/Volume.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { OutsideClickListener } from "../../../hooks/_utils/outsideClick";
 import { UtilMenu } from "../menus/UtilMenu";
 import styles from "./Volume.module.css";
+import { useClassNames } from "@prozilla-os/core";
 
 interface VolumeProps {
 	hideUtilMenus: boolean;
@@ -27,7 +28,7 @@ export function Volume({ hideUtilMenus, showUtilMenu }: VolumeProps) {
 	};
 
 	return (<OutsideClickListener onOutsideClick={() => { updateShowMenu(false); }}>
-		<button title="Volume" tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
+		<button title="Volume" className={useClassNames([], "Taskbar", "Indicator", "Volume")} tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
 			<FontAwesomeIcon icon={faVolumeHigh}/>
 		</button>
 		<UtilMenu active={showMenu} setActive={setShowMenu} className={styles.Menu}>