add scalable svg icons

10 files changed, 17 insertions, 13 deletions

diff --git a/static/img/download.svg b/static/img/download.svg
new file mode 100644
index 0000000..ffa0e9a
--- /dev/null
+++ b/static/img/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
\ No newline at end of file
diff --git a/static/img/layout.svg b/static/img/layout.svg
new file mode 100644
index 0000000..1943229
--- /dev/null
+++ b/static/img/layout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layout"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
\ No newline at end of file
diff --git a/static/img/plus-circle.svg b/static/img/plus-circle.svg
new file mode 100644
index 0000000..015bb62
--- /dev/null
+++ b/static/img/plus-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/static/img/trash-2.svg b/static/img/trash-2.svg
new file mode 100644
index 0000000..ce3947d
--- /dev/null
+++ b/static/img/trash-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
\ No newline at end of file
diff --git a/static/img/trash.svg b/static/img/trash.svg
new file mode 100644
index 0000000..38e9c35
--- /dev/null
+++ b/static/img/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
\ No newline at end of file
diff --git a/static/img/upload.svg b/static/img/upload.svg
new file mode 100644
index 0000000..e09b69f
--- /dev/null
+++ b/static/img/upload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
\ No newline at end of file
diff --git a/static/img/x-circle.svg b/static/img/x-circle.svg
new file mode 100644
index 0000000..433837f
--- /dev/null
+++ b/static/img/x-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
\ No newline at end of file
diff --git a/static/index.js b/static/index.js
index 2a1835c..ea68d2b 100644
--- a/static/index.js
+++ b/static/index.js
@@ -504,18 +504,18 @@ function bind_trash_events() {
 	trash.classList.add('droppable');
 	trash.addEventListener('dragenter', (evt) => {
 		evt.preventDefault();
-		evt.target.src = 'trash_bin_open.png';
+		evt.target.src = '/static/img/trash-2.svg';
 	});
 	trash.addEventListener('dragexit', (evt) => {
 		evt.preventDefault();
-		evt.target.src = 'trash_bin.png';
+		evt.target.src = '/static/img/trash.svg';
 	});
 	trash.addEventListener('dragover', (evt) => {
 		evt.preventDefault();
 	});
 	trash.addEventListener('drop', (evt) => {
 		evt.preventDefault();
-		evt.target.src = 'trash_bin.png';
+		evt.target.src = '/static/img/trash.svg';
 		if (dragged_image) {
 			let dragged_image_parent = dragged_image.parentNode;
 			if (dragged_image_parent.tagName.toUpperCase() === 'SPAN' &&
diff --git a/static/styles.css b/static/styles.css
index 6f2d5f3..8166a32 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -143,6 +143,7 @@ img.draggable.dragged, .button:active {
 
 .button img {
 	user-select: none;
+	width: 100px;
 }
 
 .bottom-container {
diff --git a/templates/index.html b/templates/index.html
index 4b98bdc..9790869 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -20,29 +20,25 @@
                 <div class='buttons-container'>
                     <div class='button'>
                         <label for='load-img-input'>
-                            Add
-                            <img src='plus.png' title='Add images'/>
+                            <img src='/static/img/plus-circle.svg' title='Add images'/>
                         </label>
                         <input id='load-img-input' type='file' accept='image/*' multiple/>
                     </div>
                     <div class='button'>
                         <label for='reset-list-input'>
-                            R
-                            <img src='reset.png' title='Reset list'>
+                            <img src='/static/img/x-circle.svg' title='Reset list'>
                         </label>
                         <input id='reset-list-input' type='button' />
                     </div>
                     <div class='button'>
                         <label for='export-input'>
-                            E
-                            <img src='export.png' title='Export'>
+                            <img src='/static/img/download.svg' title='Export'>
                         </label>
                         <input id='export-input' type='button' />
                     </div>
                     <div class='button'>
                         <label for='import-input'>
-                            I
-                            <img src='import.png' title='Import'/>
+                            <img src='/static/img/upload.svg' title='Import'/>
                         </label>
                         <input id='import-input' type='file' accept='.json' multiple/>
                     </div>
@@ -53,10 +49,10 @@
         </div>
     </section>
     <div class="top-container">
-        <img id='trash' src='trash_bin.png' title='Delete image (drag it over here)'>
+        <img id='trash' src='/static/img/trash.svg' title='Delete image (drag it over here)'>
         <div class='button'>
             <label for='toggle-layout'>
-                <img src='toggle_layout.png' title='Toggle Layout'/>
+                <img src='/static/img/layout.svg' title='Toggle Layout'/>
             </label>
             <input id='toggle-layout' type='button'/>
         </div>