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;