diff --git a/README.md b/README.md
index 6feef8a..92c9efa 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,10 @@ Yes, you read that right. ProzillaOS will have playable games. Initially, the on
See [docs](docs) for more information.
+## Design
+
+ProzillaOS was designed in Figma. You can find the design file [here](https://www.figma.com/file/bEE5RyWgV0QILcXpZWEk2r/ProzillaOS?type=design&node-id=0%3A1&mode=design&t=7KR1tKCp9H5cK3hf-1).
+
## License
This project is licensed under the MIT license, Copyright (c) 2023 Sieben De Beule. For more information see [LICENSE.md](LICENSE.md).
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a2280fb..1064f29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
+ "react-svg": "^16.1.18",
"web-vitals": "^2.1.4"
}
},
@@ -3634,6 +3635,16 @@
"url": "https://github.com/sponsors/gregberge"
}
},
+ "node_modules/@tanem/svg-injector": {
+ "version": "10.1.60",
+ "resolved": "https://registry.npmjs.org/@tanem/svg-injector/-/svg-injector-10.1.60.tgz",
+ "integrity": "sha512-yzdF0f7TZI7MrMieJLu5VYEJuL0WneFCabLvBfpNWDoWikzQPW8V9tpEqHa2A4kKJDiXUzsIoqtPEvGj9xsPgQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.22.5",
+ "content-type": "^1.0.5",
+ "tslib": "^2.6.0"
+ }
+ },
"node_modules/@testing-library/dom": {
"version": "9.3.1",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
@@ -14622,6 +14633,21 @@
}
}
},
+ "node_modules/react-svg": {
+ "version": "16.1.18",
+ "resolved": "https://registry.npmjs.org/react-svg/-/react-svg-16.1.18.tgz",
+ "integrity": "sha512-XAnrAfW03GDDD1uLEZFoEu8Ij7CkojIaNeba7KCInWnS9dFSEfFD3VbGSlKFUmkhQimfFmtJoRloowKNVJQ9gw==",
+ "dependencies": {
+ "@babel/runtime": "^7.22.5",
+ "@tanem/svg-injector": "^10.1.59",
+ "@types/prop-types": "^15.7.5",
+ "prop-types": "^15.8.1"
+ },
+ "peerDependencies": {
+ "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 4c6240e..41e3882 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
+ "react-svg": "^16.1.18",
"web-vitals": "^2.1.4"
},
"scripts": {
diff --git a/public/media/applications/icons/browser.svg b/public/media/applications/icons/browser.svg
new file mode 100644
index 0000000..8039499
--- /dev/null
+++ b/public/media/applications/icons/browser.svg
@@ -0,0 +1,18 @@
+
diff --git a/public/media/applications/icons/code-editor.svg b/public/media/applications/icons/code-editor.svg
new file mode 100644
index 0000000..aca378b
--- /dev/null
+++ b/public/media/applications/icons/code-editor.svg
@@ -0,0 +1,23 @@
+
diff --git a/public/media/applications/icons/file-explorer.svg b/public/media/applications/icons/file-explorer.svg
new file mode 100644
index 0000000..591eddd
--- /dev/null
+++ b/public/media/applications/icons/file-explorer.svg
@@ -0,0 +1,23 @@
+
diff --git a/public/media/applications/icons/media-viewer.svg b/public/media/applications/icons/media-viewer.svg
new file mode 100644
index 0000000..ecd6256
--- /dev/null
+++ b/public/media/applications/icons/media-viewer.svg
@@ -0,0 +1,31 @@
+
diff --git a/public/media/applications/icons/terminal.svg b/public/media/applications/icons/terminal.svg
new file mode 100644
index 0000000..61969bc
--- /dev/null
+++ b/public/media/applications/icons/terminal.svg
@@ -0,0 +1,18 @@
+
diff --git a/public/media/wallpapers/wallpaper-1.png b/public/media/wallpapers/wallpaper-1.png
new file mode 100644
index 0000000..64245b0
Binary files /dev/null and b/public/media/wallpapers/wallpaper-1.png differ
diff --git a/public/media/wallpaper.webp b/public/media/wallpapers/wallpaper-2.webp
similarity index 100%
rename from public/media/wallpaper.webp
rename to public/media/wallpapers/wallpaper-2.webp
diff --git a/src/App.css b/src/App.css
index 9ce2a77..6fbbff8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,5 @@
.App {
- background-image: url("/public/media/wallpaper.webp");
+ background-image: url("/public/media/wallpapers/wallpaper-1.png");
background-size: cover;
text-align: center;
width: 100%;
@@ -11,12 +11,6 @@
pointer-events: none;
}
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
.App-header {
min-height: 100vh;
display: flex;
@@ -25,17 +19,4 @@
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
+}
\ No newline at end of file
diff --git a/src/components/TaskBar.css b/src/components/TaskBar.css
index 952f989..e8cbe23 100644
--- a/src/components/TaskBar.css
+++ b/src/components/TaskBar.css
@@ -37,6 +37,13 @@ button:hover {
height: 1.25rem;
}
+.Program-icons > * > div,
+.Program-icons > * > div > div,
+.Program-icons > * > div > div > svg {
+ height: 100%;
+ width: auto;
+}
+
.Util-icons {
display: flex;
justify-content: flex-end;
diff --git a/src/components/TaskBar.js b/src/components/TaskBar.js
index 90f526d..04f8181 100644
--- a/src/components/TaskBar.js
+++ b/src/components/TaskBar.js
@@ -1,7 +1,8 @@
import { useEffect, useState } from "react";
import "./TaskBar.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBatteryFull, faCamera, faCode, faFolder, faGlobe, faSearch, faTerminal, faVolumeHigh, faWifi } from "@fortawesome/free-solid-svg-icons";
+import { faBatteryFull, faSearch, faVolumeHigh, faWifi } from "@fortawesome/free-solid-svg-icons";
+import { ReactSVG } from "react-svg";
export function TaskBar() {
const [date, setDate] = useState(new Date());
@@ -19,19 +20,19 @@ export function TaskBar() {