diff --git a/src/interface/desktop/config.html b/src/interface/desktop/config.html
index af6171bf..3f901f3e 100644
--- a/src/interface/desktop/config.html
+++ b/src/interface/desktop/config.html
@@ -179,7 +179,7 @@
.card-input {
padding: 4px;
- box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3);
border: none;
width: 450px;
}
@@ -301,7 +301,7 @@
div.file-element,
div.folder-element {
display: grid;
- grid-template-columns: auto 1fr;
+ grid-template-columns: 1fr auto 1fr;
border: 1px solid rgb(229, 229, 229);
border-radius: 4px;
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.8);
diff --git a/src/interface/desktop/renderer.js b/src/interface/desktop/renderer.js
index b365ceff..3d8a1d4e 100644
--- a/src/interface/desktop/renderer.js
+++ b/src/interface/desktop/renderer.js
@@ -61,6 +61,13 @@ toggleFoldersButton.addEventListener('click', () => {
function makeFileElement(file) {
let fileElement = document.createElement("div");
fileElement.classList.add("file-element");
+
+ let fileIconElement = document.createElement("img");
+ fileIconElement.classList.add("card-icon");
+ fileIconElement.src = "./assets/icons/plaintext.svg";
+ fileIconElement.alt = "File";
+ fileElement.appendChild(fileIconElement);
+
let fileNameElement = document.createElement("div");
fileNameElement.classList.add("content-name");
fileNameElement.innerHTML = file.path;
@@ -82,6 +89,13 @@ function makeFileElement(file) {
function makeFolderElement(folder) {
let folderElement = document.createElement("div");
folderElement.classList.add("folder-element");
+
+ let folderIconElement = document.createElement("img");
+ folderIconElement.classList.add("card-icon");
+ folderIconElement.src = "./assets/icons/folder.svg";
+ folderIconElement.alt = "File";
+ folderElement.appendChild(folderIconElement);
+
let folderNameElement = document.createElement("div");
folderNameElement.classList.add("content-name");
folderNameElement.innerHTML = folder.path;