Updated styles

src/components/applications/file-explorer/FileExplorer.module.css

@@ -103,7 +103,7 @@
 }
 
 .Nav-button:hover, .Nav-button:focus-visible {
-	background-color: rgba(255, 255, 255, 10%);
+	background-color: hsla(var(--background-color-a-hsl), 75%);
 }
 
 .Nav-button svg {
@@ -140,7 +140,7 @@
 
 .File-button:hover, .Folder-button:hover,
 .File-button:focus-visible, .Folder-button:focus-visible {
-	background-color: rgba(255, 255, 255, 10%);
+	background-color: hsla(var(--background-color-a-hsl), 35%);
 }
 
 .File-button-preview {

src/components/applications/settings/Settings.jsx

@@ -60,10 +60,13 @@ function StorageTab({ virtualRoot }) {
 	const freeKB = maxKB - usedKB;
 
 	return (<>
-		<div className={styles["Option"]}>
+		<div className={`${styles["Option"]} ${styles["Progress-bar-container"]}`}>
 			<p className={styles["Label"]}>Virtual Drive ({round(maxKB, 1)} KB)</p>
 			<ProgressBar fillPercentage={usedKB / maxKB * 100} className={styles["Progress-bar"]}/>
-			<p className={utilStyles["Text-light"]}>{round(usedKB, 1)} KB used - {round(freeKB, 1)} KB free</p>
+			<span className={styles["Progress-bar-labels"]}>
+				<p className={utilStyles["Text-light"]}>{round(usedKB, 1)} KB used</p>
+				<p className={utilStyles["Text-light"]}>{round(freeKB, 1)} KB free</p>
+			</span>
 		</div>
 		<div className={styles["Option"]}>
 			<p className={styles["Label"]}>Manage data</p>
@@ -82,28 +85,30 @@ function AboutTab({ windowsManager, virtualRoot }) {
 		<div className={styles["Option"]}>
 			<p className={styles["Label"]}>About ProzillaOS</p>
 			<p className={utilStyles["Text-light"]}>ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows made with React.js by Prozilla.</p>
-			<Button
+			<div className={styles["Button-group"]}>
-				className={`${styles.Button} ${utilStyles["Text-bold"]}`}
+				<Button
-				onClick={(event) => {
+					className={`${styles.Button} ${utilStyles["Text-bold"]}`}
-					event.preventDefault();
+					onClick={(event) => {
-					windowsManager.open("text-editor", {
+						event.preventDefault();
-						mode: "view",
+						windowsManager.open("text-editor", {
-						file: virtualRoot.navigate("~/Documents").findFile("info", "md"),
+							mode: "view",
-						size: new Vector2(575, 675),
+							file: virtualRoot.navigate("~/Documents").findFile("info", "md"),
-					});
+							size: new Vector2(575, 675),
-				}}
+						});
-			>
+					}}
-				Open info.md
+				>
-			</Button>
+					Open info.md
-			<Button
+				</Button>
-				className={`${styles.Button} ${utilStyles["Text-bold"]}`}
+				<Button
-				onClick={(event) => {
+					className={`${styles.Button} ${utilStyles["Text-bold"]}`}
-					event.preventDefault();
+					onClick={(event) => {
-					window.open("https://github.com/Prozilla/prozilla-os");
+						event.preventDefault();
-				}}
+						window.open("https://github.com/Prozilla/prozilla-os");
-			>
+					}}
-				View source
+				>
-			</Button>
+					View source
+				</Button>
+			</div>
 		</div>
 	</>);
 }
@@ -117,18 +122,27 @@ export function Settings({ initialTabIndex }) {
 	const settingsManager = useSettings();
 	const windowsManager = useWindowsManager();
 
+	const getClassName = (index) => {
+		const classNames = [styles["Tab-button"]];
+
+		if (index === tabIndex)
+			classNames.push(styles["Active-tab"]);
+		
+		return classNames.join(" ");
+	};
+
 	return (
 		<div className={styles.Container}>
 			<div className={styles.Tabs}>
-				<button title="Appearance" className={styles["Tab-button"]} onClick={() => { setTabIndex(0); }}>
+				<button title="Appearance" className={getClassName(0)} onClick={() => { setTabIndex(0); }}>
 					<FontAwesomeIcon icon={faPalette}/>
 					<p className={utilStyles["Text-semibold"]}>Appearance</p>
 				</button>
-				<button title="Storage" className={styles["Tab-button"]} onClick={() => { setTabIndex(1); }}>
+				<button title="Storage" className={getClassName(1)} onClick={() => { setTabIndex(1); }}>
 					<FontAwesomeIcon icon={faHardDrive}/>
 					<p className={utilStyles["Text-semibold"]}>Storage</p>
 				</button>
-				<button title="Storage" className={styles["Tab-button"]} onClick={() => { setTabIndex(2); }}>
+				<button title="Storage" className={getClassName(2)} onClick={() => { setTabIndex(2); }}>
 					<FontAwesomeIcon icon={faCircleInfo}/>
 					<p className={utilStyles["Text-semibold"]}>About</p>
 				</button>

src/components/applications/settings/Settings.module.css

@@ -36,8 +36,13 @@
 	transition: background-color 100ms ease-in-out;
 }
 
-.Tab-button:hover, .Tab-button:focus-visible {
+.Tab-button.Active-tab {
-	background-color: rgba(255, 255, 255, 10%);
+	background-color: var(--background-color-a);
+}
+
+.Tab-button:not(.Active-tab):hover,
+.Tab-button:not(.Active-tab):focus-visible {
+	background-color: hsla(var(--background-color-a-hsl), 50%);
 }
 
 .Tab-button > svg {
@@ -52,7 +57,6 @@
 .Tab-panel {
 	flex: 1;
 	display: flex;
-	flex-wrap: wrap;
 	flex-direction: column;
 	align-content: flex-start;
 	height: 100%;
@@ -66,7 +70,7 @@
 	align-items: flex-start;
 	justify-content: flex-start;
 	text-align: start;
-	max-width: 100%;
+	width: 100%;
 }
 
 .Option > .Label {
@@ -107,6 +111,17 @@
 	cursor: pointer;
 }
 
+.Button-group {
+	display: flex;
+	gap: 1rem;
+	flex-wrap: wrap;
+	margin-bottom: 0.75rem;
+}
+
+.Button-group .Button {
+	margin-bottom: 0;
+}
+
 .Button {
 	--hover-color: var(--background-color-b);
 
@@ -132,6 +147,17 @@
 	background-color: var(--red-a);
 }
 
-.Progress-bar {
+.Progress-bar-container {
-	width: 15rem;
+	width: 100%;
+	max-width: 35rem;
+}
+
+.Progress-bar {
+	width: 100% !important;
+}
+
+.Progress-bar-labels {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
 }

src/components/modals/context-menu/ContextMenu.module.css

@@ -21,7 +21,7 @@
 }
 
 .Button:hover, .Button:focus-visible {
-	background-color: rgba(255, 255, 255, 5%);
+	background-color: hsla(var(--background-color-a-hsl), 75%);
 }
 
 .Label, .Shortcut {

src/components/utils/DropdownButton.module.css

@@ -48,7 +48,7 @@
 }
 
 .Dropdown > button:hover, .Dropdown > button:focus-visible {
-	background-color: rgba(255, 255, 255, 5%);
+	background-color: hsla(var(--background-color-a-hsl), 75%);
 }
 
 .Dropdown > button > p {

src/components/utils/ProgressBar.module.css

@@ -1,6 +1,7 @@
 .Container {
 	position: relative;
-	width: 100%;
+	width: 15rem;
+	max-width: 100%;
 	min-height: 2rem;
 	max-height: 100%;
 	background-color: var(--background-color-d);
@@ -13,6 +14,7 @@
 	left: 0;
 	top: 0;
 	width: var(--fill);
+	min-width: 1px;
 	height: 100%;
 	background-color: var(--blue-a);
 }

src/styles/global.css

@@ -7,7 +7,7 @@
 	--yellow-b: #ff9f43;
 	--red-a: #ff6b6b;
 	--red-b: #ee5253;
-	--light-blue-a: #ee5253;
+	--light-blue-a: #48dbfb;
 	--light-blue-b: #0abde3;
 	--green-a: #1dd1a1;
 	--green-b: #10ac84;
@@ -36,6 +36,8 @@
 	--background-color-c: var(--dark-grey-d);
 	--background-color-d: var(--dark-grey-e);
 
+	--background-color-a-hsl: 212, 29%, 19%;
+
 	--scrollbar-color: hsla(211, 29%, 40%, 25%);
 
 	--window-shadow-size: 0.3rem;