From db65549151c19641aaa7cb5f79fb29d252afffcb Mon Sep 17 00:00:00 2001
From: Prozilla <business@prozilla.dev>
Date: Mon, 7 Aug 2023 17:24:11 +0200
Subject: [PATCH] Improved focus styles

---
 .../file-explorer/FileExplorer.jsx             |  5 ++++-
 .../file-explorer/FileExplorer.module.css      |  6 +++---
 .../applications/settings/Settings.jsx         |  3 ++-
 .../applications/settings/Settings.module.css  |  4 ++--
 src/components/task-bar/TaskBar.module.css     |  4 ++--
 src/components/utils/Button.jsx                | 18 ++++++++++++++++++
 src/components/utils/Button.module.css         |  8 ++++++++
 src/components/utils/DropdownButton.module.css |  4 ++--
 src/components/windows/Window.module.css       |  2 +-
 9 files changed, 42 insertions(+), 12 deletions(-)
 create mode 100644 src/components/utils/Button.jsx
 create mode 100644 src/components/utils/Button.module.css

diff --git a/src/components/applications/file-explorer/FileExplorer.jsx b/src/components/applications/file-explorer/FileExplorer.jsx
index b1780f7..4821805 100644
--- a/src/components/applications/file-explorer/FileExplorer.jsx
+++ b/src/components/applications/file-explorer/FileExplorer.jsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useVirtualRoot } from "../../../hooks/virtual-drive/VirtualRootContext.js";
 import styles from "./FileExplorer.module.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowUp, faCaretLeft, faCaretRight, faCog, faDesktop, faFile, faFileLines, faFolder, faHouse, faImage, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUp, faCaretLeft, faCaretRight, faCog, faDesktop, faFile, faFileLines, faFolder, faHouse, faImage, faPlus, faSearch } from "@fortawesome/free-solid-svg-icons";
 
 import { VirtualFile } from "../../../features/virtual-drive/virtual-file.js";
 import { useWindowsManager } from "../../../hooks/windows/WindowsManagerContext.js";
@@ -77,6 +77,9 @@ export function FileExplorer({ startPath }) {
 				<button title="Up" tabIndex={0} className={styles["Icon-button"]} onClick={() => { changeDirectory(".."); }}>
 					<FontAwesomeIcon icon={faArrowUp}/>
 				</button>
+				<button title="New" tabIndex={0} className={styles["Icon-button"]}>
+					<FontAwesomeIcon icon={faPlus}/>
+				</button>
 				<input
 					value={path}
 					type="text"
diff --git a/src/components/applications/file-explorer/FileExplorer.module.css b/src/components/applications/file-explorer/FileExplorer.module.css
index 80a5eb1..0c315f2 100644
--- a/src/components/applications/file-explorer/FileExplorer.module.css
+++ b/src/components/applications/file-explorer/FileExplorer.module.css
@@ -46,7 +46,7 @@
 	transition: all 200ms ease-in-out;
 }
 
-.Icon-button:hover::after, .Icon-button:focus::after {
+.Icon-button:hover::after, .Icon-button:focus-visible::after {
 	background-color: rgba(255, 255, 255, 10%);
 	transform: scale(150%);
 }
@@ -102,7 +102,7 @@
 	transition: background-color 100ms ease-in-out;
 }
 
-.Nav-button:hover, .Nav-button:focus {
+.Nav-button:hover, .Nav-button:focus-visible {
 	background-color: rgba(255, 255, 255, 10%);
 }
 
@@ -139,7 +139,7 @@
 }
 
 .File-button:hover, .Folder-button:hover,
-.File-button:focus, .Folder-button:focus {
+.File-button:focus-visible, .Folder-button:focus-visible {
 	background-color: rgba(255, 255, 255, 10%);
 }
 
diff --git a/src/components/applications/settings/Settings.jsx b/src/components/applications/settings/Settings.jsx
index bdf01ff..68ca9c0 100644
--- a/src/components/applications/settings/Settings.jsx
+++ b/src/components/applications/settings/Settings.jsx
@@ -8,6 +8,7 @@ import { SettingsManager } from "../../../features/settings/settings.js";
 import { VirtualRoot } from "../../../features/virtual-drive/virtual-root.js";
 import { StorageManager } from "../../../features/storage/storage.js";
 import { round } from "../../../features/math/round.js";
+import { Button } from "../../utils/Button.jsx";
 
 /**
  * @param {object} props 
@@ -61,7 +62,7 @@ function StorageTab({ virtualRoot }) {
 		</div>
 		<div className={styles["Option"]}>
 			<p className={styles["Label"]}>Manage data</p>
-			<button title="Reset" className={`${styles.Button} ${styles["Button-red"]}`}>Reset</button>
+			<Button className={`${styles.Button} ${styles["Button-red"]}`}>Reset</Button>
 		</div>
 	</>);
 }
diff --git a/src/components/applications/settings/Settings.module.css b/src/components/applications/settings/Settings.module.css
index 1677724..a7bedaf 100644
--- a/src/components/applications/settings/Settings.module.css
+++ b/src/components/applications/settings/Settings.module.css
@@ -36,7 +36,7 @@
 	transition: background-color 100ms ease-in-out;
 }
 
-.Tab-button:hover, .Tab-button:focus {
+.Tab-button:hover, .Tab-button:focus-visible {
 	background-color: rgba(255, 255, 255, 10%);
 }
 
@@ -113,7 +113,7 @@
 	cursor: pointer;
 }
 
-.Button:hover, .Button:focus {
+.Button:hover, .Button:focus-visible-visible {
 	background-color: var(--hover-color);
 }
 
diff --git a/src/components/task-bar/TaskBar.module.css b/src/components/task-bar/TaskBar.module.css
index 1457041..fa95cec 100644
--- a/src/components/task-bar/TaskBar.module.css
+++ b/src/components/task-bar/TaskBar.module.css
@@ -28,7 +28,7 @@
 	z-index: -1;
 }
 
-.Task-bar button:hover, .Task-bar button:focus {
+.Task-bar button:hover, .Task-bar button:focus-visible {
 	background-color: var(--task-bar-button-hover-color);
 }
 
@@ -95,7 +95,7 @@
 	-webkit-transform: translateX(-50%);
 }
 
-.App-icon:hover::after, .App-icon:focus::after {
+.App-icon:hover::after, .App-icon:focus-visible::after {
 	width: 100%;
 }
 
diff --git a/src/components/utils/Button.jsx b/src/components/utils/Button.jsx
new file mode 100644
index 0000000..47e53ff
--- /dev/null
+++ b/src/components/utils/Button.jsx
@@ -0,0 +1,18 @@
+import styles from "./Button.module.css";
+
+/**
+ * @param {object} props 
+ */
+export function Button(props) {
+	const { className = "", children } = props;
+
+	return (
+		<button
+			className={`${className} ${styles.Button}`}
+			tabIndex={0}
+			{...props}
+		>
+			{children}
+		</button>
+	);
+}
\ No newline at end of file
diff --git a/src/components/utils/Button.module.css b/src/components/utils/Button.module.css
new file mode 100644
index 0000000..5dd37c1
--- /dev/null
+++ b/src/components/utils/Button.module.css
@@ -0,0 +1,8 @@
+.Button {
+	color: var(--foreground-color-a);
+	background: none;
+	border: none;
+	outline: none;
+	transition: background-color 100ms ease-in-out;
+	cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/components/utils/DropdownButton.module.css b/src/components/utils/DropdownButton.module.css
index 053b0a3..7a02f03 100644
--- a/src/components/utils/DropdownButton.module.css
+++ b/src/components/utils/DropdownButton.module.css
@@ -14,7 +14,7 @@
 	cursor: pointer;
 }
 
-.Button:hover, .Button:focus {
+.Button:hover, .Button:focus-visible {
 	background-color: rgba(255, 255, 255, 5%);
 }
 
@@ -42,7 +42,7 @@
 	cursor: pointer;
 }
 
-.Dropdown > button:hover, .Dropdown > button:focus {
+.Dropdown > button:hover, .Dropdown > button:focus-visible {
 	background-color: rgba(255, 255, 255, 5%);
 }
 
diff --git a/src/components/windows/Window.module.css b/src/components/windows/Window.module.css
index cca9871..782d460 100644
--- a/src/components/windows/Window.module.css
+++ b/src/components/windows/Window.module.css
@@ -92,7 +92,7 @@
 	outline: none;
 }
 
-.Header button:hover, .Header button:focus {
+.Header button:hover, .Header button:focus-visible {
 	background-color: var(--header-button-hover-color);
 }