spanish-quizzer

commit abc6365c0bc15e107f707c263d43cc7490f1910f
parent b5dc57a7a9a193cdaa1016aaf0e4d7d4edbf55ca
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Thu, 25 Feb 2021 09:49:49 -0800

Add plus and trash icons

Diffstat:
M
css/filtersPage.css
 | 
10
++--------
M
css/global.css
 | 
22
+++++++++++++++++-----
A
images/plus.svg
 | 
2
++
A
images/trash.svg
 | 
2
++
M
js/filtersPage.js
 | 
8
++++----

5 files changed, 27 insertions(+), 17 deletions(-)
diff --git a/css/filtersPage.css b/css/filtersPage.css
@@ -17,9 +17,6 @@
     margin-right: 10px;
     margin-top: 10px;
 }
-.filtersInput div h2 button {
-    padding: 3px;
-}
 
 /* Filter */
 .filter {
@@ -33,11 +30,8 @@
     padding: 5px;
     border-radius: 5px;
 }
-.filter button {
-    border: none;
-    background-color: var(--background-color);
-    color: var(--foreground-color);
-    cursor: pointer;
+.filter select {
+    height: 22px;
 }
 
 /* Conjugation settings on mobile devices */
diff --git a/css/global.css b/css/global.css
@@ -67,22 +67,31 @@ header img {
 
 
 /******** Other elements ********/
-button:not(.itemRemove), input, select {
+button:not(.icon), input, select {
     background-color: var(--background-color);
     border: 1px solid var(--border-color);
     color: var(--foreground-color);
     border-radius: 0px;
 }
-
-button:hover:enabled:not(.itemRemove) {
+button:hover:enabled:not(.icon) {
     cursor: pointer;
     background-color: var(--hover-color);
 }
-
 button:disabled {
     background-color:  var(--hover-color);
     color: var(--border-color);
 }
+button.icon {
+    border: none;
+    background-color: #00000000;
+    color: var(--foreground-color);
+    cursor: pointer;
+    vertical-align: middle;
+}
+button.icon img {
+    height: 24px;
+    width: 24px;
+}
 
 
 
@@ -94,9 +103,12 @@ body.dark {
     --hover-color: #323436;
     --border-color: #505050;
 }
-.dark button:not(.itemRemove), .dark input, .dark select {
+.dark button:not(.icon), .dark input, .dark select {
     --background-color: #222426;
 }
+.dark main button.icon img {
+    filter: invert(90%);
+}
 .dark a {
     color: #0080ff;
 }
diff --git a/images/plus.svg b/images/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+\ No newline at end of file
diff --git a/images/trash.svg b/images/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="currentColor" 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/js/filtersPage.js b/js/filtersPage.js
@@ -217,7 +217,7 @@ let filterInput = Vue.component("filterInput", {
 
                 <h2>
                     Verb Filters
-                    <button @click="AddFilter();">Add Filter</button>
+                    <button class="icon" @click="AddFilter();"><img src="./images/plus.svg"></button>
                 </h2>
 
                 <div v-for="(filter, index) in verbFilters" class="filter">
@@ -243,7 +243,7 @@ let filterInput = Vue.component("filterInput", {
                         <option>Conj. → Eng.</option>
                         <option>Conj. → Esp.</option>
                     </select>
-                    <button class="itemRemove" @click="RemoveFilter(index);">╳</button>
+                    <button class="icon" @click="RemoveFilter(index);"><img src="./images/trash.svg"></button>
                 </div>
             </div>
 
@@ -253,7 +253,7 @@ let filterInput = Vue.component("filterInput", {
 
                 <h2>
                     Vocabulary Filters
-                    <button @click="AddFilter();">Add Filter</button>
+                    <button class="icon" @click="AddFilter();"><img src="./images/plus.svg"></button>
                 </h2>
 
                 <div v-for="(filter, index) in vocabFilters" class="filter">
@@ -294,7 +294,7 @@ let filterInput = Vue.component("filterInput", {
                         <option>Eng. → Esp.</option>
                         <option>Esp. → Eng.</option>
                     </select>
-                    <button class="itemRemove" @click="RemoveFilter(index);">╳</button>
+                    <button class="icon" @click="RemoveFilter(index);"><img src="./images/trash.svg"></button>
                 </div>
             </div>
         </div>