Added sort button

src/styles/AddItem.css

@@ -1,4 +1,6 @@
 .add-overlay {
+    background-color: black;
+    opacity: 10%;
     position: fixed;
     top: 0;
     left: 0;
@@ -9,18 +11,23 @@
 .box {
     border: solid;
     border-width: 1px;
-    border-color: rgb(80, 80, 80);
+    border-color: rgb(141, 141, 141);
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
     position: absolute;
     z-index: 2;
-    top: 70px;
+    top: 63px;
     right: 20px;
     background-color: #1f2c38;
-    width: 40%;
+    width: 50%;
+    max-width: 500px;
     overflow-x: hidden;
     overflow-y: auto;
 }
 
+.box legend {
+    font-weight: 600;
+}
+
 .box h3 {
     font-weight: 300;
 }

src/styles/App.css

@@ -22,20 +22,18 @@
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
 }
 
-.settings-btn:active, .add-btn:active {
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
-}
-
 .search:focus {
   box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
-.add-btn {
+.btn {
   border-radius: 100%;
   margin: 20px 20px 0px auto;
   font-family: 'Font Awesome 5 Free';
+  width: 40px;
+  height: 40px;
   padding: 10px;
-  font-size: 1.5rem;
+  font-size: 1.1rem;
   cursor: pointer;
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
   color: #ffffffb6;
@@ -44,10 +42,14 @@
   transition: background-color 0.1s;
 }
 
-.add-btn:hover {
+.btn:hover {
   background-color: rgb(76, 117, 170);
 }
 
+.btn:active {
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
+
 textarea:focus, input:focus{
   outline: none;
 }
@@ -56,24 +58,3 @@ textarea:focus, input:focus{
   margin: 20px 20px 0px 30px;
   display: inline-block;
 }
-
-.filter-button {
-  border-radius: 100%;
-  font-family: 'Font Awesome 5 Free';
-  padding: 10px;
-  font-size: 1rem;
-  cursor: pointer;
-  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
-  color: #ffffffb6;
-  background-color:#273949;
-  border: none;
-  transition: background-color 0.1s;
-}
-
-.filter-button:active {
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
-}
-
-.filter-button:hover {
-  background-color: rgb(76, 117, 170);
-}

src/styles/Filters.css

@@ -2,14 +2,14 @@
     border: solid;
     border-width: 1px;
     font-weight: 300;
-    border-color: rgb(80, 80, 80);
+    border-color: rgb(141, 141, 141);
     display: flex;
     flex-direction: column;
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
-    z-index: 2;
     background-color: #273949;
     padding: 5px;
-    left: 200px;
+    top: 120px;
+    left: 195px;
     position: absolute;
     margin-top: 4px;
     -moz-user-select: none;
@@ -17,11 +17,17 @@
     user-select: none;
 }
 
+.filter legend {
+    font-weight: 600;
+}
+
 .filter label {
     margin: 5px;
 }
 
 .filter-overlay {
+    background-color: black;
+    opacity: 10%;
     position: fixed;
     top: 0;
     left: 0;

src/styles/Sort.css

@@ -0,0 +1,36 @@
+.sort-overlay {
+    background-color: black;
+    opacity: 10%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100vw;
+}
+
+.sort {
+    border: solid;
+    border-width: 1px;
+    font-weight: 300;
+    border-color: rgb(141, 141, 141);
+    display: flex;
+    flex-direction: column;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+    background-color: #273949;
+    padding: 5px;
+    top: 120px;
+    left: 250px;
+    position: absolute;
+    margin-top: 4px;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.sort legend {
+    font-weight: 600;
+}
+
+.sort label {
+    margin: 5px;
+}