Updated logic sim app with new color palette

index.html

@@ -9,7 +9,7 @@
 		<link rel="canonical" href="https://os.prozilla.dev/">
 
 		<!-- Favicon -->
-		<link rel="icon" href="/favicon.ico" sizes="any">
+		<link rel="icon" href="https://os.prozilla.dev/favicon.ico?v=2" sizes="any">
 		<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png?v=2">
 		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=2">
 		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png?v=2">
@@ -26,7 +26,7 @@
 		<meta property="og:site_name" content="ProzillaOS"/>
 		<meta property="og:description" content="ProzillaOS is an open-source web-based operating system inspired by Ubuntu Linux and Windows made with React.js by Prozilla."/>
 		<meta property="og:type" content="website"/>
-		<meta property="og:image" content="/assets/banner-logo-title.png"/>
+		<meta property="og:image" content="https://os.prozilla.dev/assets/banner-logo-title.png?v=2"/>
 		<meta property="og:url" content="https://os.prozilla.dev/">
 		<meta property="og:locale" content="en_US">
 
@@ -34,7 +34,7 @@
 		<meta name="twitter:title" content="ProzillaOS | Web-based Operating System"/>
 		<meta name="twitter:description" content="ProzillaOS is an open-source web-based operating system inspired by Ubuntu Linux and Windows made with React.js by Prozilla."/>
 		<meta name="twitter:card" content="summary_large_image"/>
-		<meta name="twitter:image" content="/assets/banner-logo-title.png"/>
+		<meta name="twitter:image" content="/assets/banner-logo-title.png?v=2"/>
 		<meta name="twitter:url" content="https://os.prozilla.dev/">
 
 		<!-- Fonts -->

src/components/apps/logic-sim/CircuitView.module.css

@@ -1,4 +1,9 @@
-.Canvas {
+.Container {
+	display: flex;
 	width: 100%;
-	height: 100%;
+	flex-grow: 1;
+}
+
+.Canvas {
+	flex: 1;
 }

src/components/apps/logic-sim/CircuitView.tsx

@@ -28,6 +28,8 @@ export function CircuitView() {
 				<ClickAction label="NOT gate" onTrigger={() => { circuit.addChip(ChipsManager.CHIPS.NOT); }}/>
 			</DropdownAction>
 		</HeaderMenu>
-		<canvas ref={canvasRef} className={styles.Canvas}/>
+		<div className={styles.Container}>
+			<canvas ref={canvasRef} className={styles.Canvas}/>
+		</div>
 	</>;
 }

src/components/apps/logic-sim/LogicSim.module.css

@@ -1,4 +1,6 @@
 .Container {
+	display: flex;
+	flex-direction: column;
 	width: 100%;
 	height: 100%;
 }

src/config/apps/logicSim.config.ts

@@ -34,26 +34,26 @@ export const CHIP = {
 
 export const COLORS = {
 	pin: {
-		fill: "dark-grey-b",
+		fill: "black-4",
-		fillHover: "dark-grey-a"
+		fillHover: "black-3"
 	},
 	inputOutput: {
-		connector: "dark-grey-ca",
+		stroke: "black-4",
-		on: "red-b",
+		connector: "black-3",
-		onHover: "red-a",
+		on: "red-0",
-		off: "dark-grey-d",
+		onHover: "red-0",
-		offHover: "dark-grey-ca",
+		off: "red-2",
-		stroke: "dark-grey-b"
+		offHover: "red-1",
 	},
 	background: {
-		outer: "dark-grey-e",
+		border: "black-0",
-		inner: "dark-grey-f",
+		inner: "black-1",
-		border: "dark-grey-d",
+		outer: "black-2",
 	},
 	wire: {
-		placing: "dark-grey-ca",
+		placing: "black-1",
 	},
 	chip: {
-		text: "dark-grey-f"
+		text: "black-4"
 	}
 };

src/features/apps/logic-sim/chip.ts

@@ -87,12 +87,12 @@ export class Chip {
 
 	draw() {
 		this.circuit.drawRect(
-			this.circuit.getColor(this.color + "-b"),
+			this.circuit.getColor(this.color + "-1"),
 			this.position.x, this.position.y,
 			this.size.x, this.size.y
 		);
 		this.circuit.drawRect(
-			this.circuit.getColor(this.color + "-a"),
+			this.circuit.getColor(this.color + "-0"),
 			this.position.x + CHIP.padding, this.position.y + CHIP.padding,
 			this.size.x - CHIP.padding * 2, this.size.y - CHIP.padding * 2
 		);

src/features/apps/logic-sim/wire.ts

@@ -42,11 +42,11 @@ export class Wire {
 		let color: string;
 
 		if (isPlacingWire) {
-			color = `${this.color}-b`;
+			color = `${this.color}-2`;
 		} else if (this.state.value === 1) {
-			color = `${this.color}-a`;
+			color = `${this.color}-0`;
 		} else {
-			color = `${this.color}-d`;
+			color = `${this.color}-2`;
 		}
 
 		this.circuit.drawLine(this.circuit.getColor(color), positions, WIRE.width);

src/styles/global/variables.css

@@ -38,6 +38,8 @@
 	--white-0: #E5F2FF;
 	--white-1: #A0A9B2;
 	--white-2: #5C6166;
+	--white-3: #393C40;
+	--white-4: #222426;
 
 	--black-0: #29343F;
 	--black-1: #1E262E;
@@ -84,3 +86,7 @@
 	--taskbar-button-hover-color: rgba(255, 255, 255, 5%);
 	--taskbar-filter: blur(1rem);
 }
+
+@media screen and (max-width: 450px) {
+	/* Change --taskbar-height to 2.5rem using TS */
+}