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 }) {
+
Manage data
-
+
>);
}
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 (
+
+ );
+}
\ 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);
}