Added custom scrollbars

src/components/task-bar/HomeMenu.jsx

@@ -4,6 +4,7 @@ import { faCircleInfo, faFileLines, faGear, faImage, faPowerOff } from "@fortawe
 import { useWindowsManager } from "../../hooks/windows/WindowsManagerContext.js";
 import ApplicationsManager from "../../features/applications/applications.js";
 import { ReactSVG } from "react-svg";
+import { closeTab } from "../../features/utils/browser.js";
 
 export function HomeMenu({ active, setActive }) {
 	const windowsManager = useWindowsManager();
@@ -16,7 +17,7 @@ export function HomeMenu({ active, setActive }) {
 		<div className={classNames.join(" ")}>
 			<div className={styles["Container-inner"]}>
 				<div className={styles.Buttons}>
-					<button title="Power" onClick={() => { window.close(); }}>
+					<button title="Power" onClick={() => { closeTab(); }}>
 						<FontAwesomeIcon icon={faPowerOff}/>
 					</button>
 					<button title="Settings">
@@ -41,8 +42,9 @@ export function HomeMenu({ active, setActive }) {
 				<div className={styles.Apps}>
 					<h2>Apps</h2>
 					<div className={styles["App-list"]}>
-						{ApplicationsManager.APPLICATIONS.map(({ name, id}) => 
+						{ApplicationsManager.APPLICATIONS.map(({ name, id }) => 
 							<button
+								key={id}
 								className={styles["App-button"]}
 								onClick={() => {
 									setActive(false);

src/components/task-bar/HomeMenu.module.css

@@ -2,11 +2,9 @@
 	position: absolute;
 	left: 0;
 	bottom: 100%;
-	min-width: 16rem;
 	height: auto !important;
 	z-index: -1;
 	overflow: hidden;
-	resize: horizontal;
 }
 
 .Container-inner {
@@ -14,7 +12,7 @@
 	background-color: rgba(25, 25, 25, 75%);
 	backdrop-filter: blur(15px);
 	transform: none;
-	transition: 200ms ease-in-out;
+	transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
 }
 
 .Container-outer:not(.Active) .Container-inner {
@@ -24,6 +22,12 @@
 
 .Container-inner {
 	display: flex;
+	min-width: 16rem;
+	border-top-left-radius: 0.5rem;
+	border-top-right-radius: 0.5rem;
+	border-bottom-right-radius: 0.5rem;
+	overflow: hidden;
+	resize: horizontal;
 }
 
 .Buttons {
@@ -43,11 +47,13 @@
 }
 
 .Apps {
+	--scrollbar-color: rgba(0, 0, 0, 25%);
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	max-height: 20rem;
 	padding: 1rem;
+	padding-right: 0.25rem;
 	padding-bottom: 0;
 }
 

src/features/utils/browser.js

@@ -0,0 +1,4 @@
+export function closeTab() {
+	// The following method only works in some browsers
+	window.close();
+}

src/styles/global.css

@@ -27,6 +27,8 @@
 	--background-color-b: var(--dark-grey-c);
 	--background-color-c: var(--dark-grey-d);
 
+	--scrollbar-color: hsla(211, 29%, 40%, 25%);
+
 	--body-font-family: "Poppins", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 	--mono-font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
@@ -115,4 +117,22 @@ code {
 *::selection {
 	color: var(--background-color-c);
 	background-color: var(--grey-b);
+}
+
+*::-webkit-scrollbar {
+	width: 20px;
+}
+
+*::-webkit-scrollbar-track {
+	background: none;
+}
+
+*::-webkit-scrollbar-thumb {
+	border-radius: 9999px;
+	border: 5px solid transparent;
+	background-color: var(--scrollbar-color);
+	background-clip: padding-box;
+	backdrop-filter: invert(100%);
+	transition: 200ms ease-in-out;
+	z-index: 1;
 }