Small UI improvements

src/styles/AddItem.css

@@ -1,4 +1,5 @@
 .add-overlay {
+    animation: fadein 0.2s;
     background-color: black;
     opacity: 10%;
     position: fixed;
@@ -9,6 +10,7 @@
 }
 
 .box {
+    animation: fadein 0.3s;
     border: solid;
     border-width: 1px;
     border-color: rgb(141, 141, 141);
@@ -72,4 +74,9 @@
 
 .upload-btn:active {
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
+
+@keyframes fadein {
+    from { opacity: 0%; }
+    to   {  }
 }

src/styles/Filters.css

@@ -1,4 +1,16 @@
+.filter-overlay {
+    animation: fadein 0.2s;
+    background-color: black;
+    opacity: 10%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100vw;
+}
+
 .filter {
+    animation: fadein 0.3s;
     border: solid;
     border-width: 1px;
     font-weight: 300;
@@ -25,12 +37,7 @@
     margin: 5px;
 }
 
-.filter-overlay {
-    background-color: black;
-    opacity: 10%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 100vw;
+@keyframes fadein {
+    from { opacity: 0%; }
+    to   {  }
 }

src/styles/Sort.css

@@ -1,4 +1,5 @@
 .sort-overlay {
+    animation: fadein 0.2s;
     background-color: black;
     opacity: 10%;
     position: fixed;
@@ -9,6 +10,7 @@
 }
 
 .sort {
+    animation: fadein 0.3s;
     border: solid;
     border-width: 1px;
     font-weight: 300;
@@ -55,4 +57,9 @@
   
 .sort-by-btn:active {
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
+
+@keyframes fadein {
+    from { opacity: 0%; }
+    to   {  }
 }