Added archive support! (Beta) + UI change

src/styles/App.css

@@ -1,6 +1,5 @@
 .App {
-  min-height: 96vh;
-  padding: 2vh;
+  min-height: 100vh;
   background-color: #1f2c38;
   color: white;
 }
@@ -10,11 +9,15 @@
 }
 
 .search {
+  border-radius: 10px;
+  margin: 20px 20px 0px 20px;
+  padding: 10px;
   font-family: 'Font Awesome 5 Free';
   font-size: 1.5rem;
   padding-left: 10px;
   border: none;
-  width: 50%;
+  width: 30%;
+  min-width: 450px;
   color: white;
   background-color:#273949;
   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;
@@ -29,6 +32,8 @@
 }
 
 .add-btn {
+  border-radius: 10px;
+  margin: 20px 20px 0px 20px;
   font-family: 'Font Awesome 5 Free';
   padding: 10px;
   font-size: 1.5rem;
@@ -38,7 +43,6 @@
   background-color:#273949;
   border: none;
   margin-left: auto;
-  margin-right: 10px;
   transition: background-color 0.1s;
 }
 

src/styles/List.css

@@ -1,32 +1,47 @@
-.table {
+.list {
   width: 100%;
   text-align: left;
   padding-top: 20px;
   border-spacing: 10px 10px;
 }
 
-.table td {
-  font-size: 1.3rem;
-  padding: 10px;
-  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;
+.list img {
+  margin: 20px;
+  width: 50px;
+  height: 50px;
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
 }
 
-.table th {
-  font-size: 1.6rem;
+.img-content-grp {
+  display: flex;
+  align-items: center;
 }
 
-.table tbody tr:nth-of-type(2n-1) {
+.list-row {
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   background-color:#273949;
-
+  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;
+  margin: 20px;
 }
 
-.table a {
+.list-entity-content {
+  padding: 20px;
+  justify-content: space-between;
+  display: flex;
+  flex-direction: column;
+}
+
+.list a {
   text-decoration: none;
   color: rgb(194, 193, 193);
   font-size: 1rem;
 }
 
-.table a:hover {
+.list a:hover {
   text-decoration: underline;
 }
 
@@ -35,6 +50,11 @@
   cursor: pointer;
   transition: background-color 0.1s;
   font-family: 'Font Awesome 5 Free';
+  padding: 10px;
+  width: fit-content;
+  height: fit-content;
+  margin: 10px;
+  border-radius: 10px;
 }
 
 .delete:hover {
@@ -45,6 +65,19 @@
   box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
-.number {
-  text-align: center;
+.row-name {
+  font-size: 2rem;
 }
+
+.tag {
+  margin: 10px;
+  border: solid;
+  border-width: 1px;
+  width: fit-content;
+  padding: 10px;
+  font-size: 1rem;
+}
+
+.num {
+  font-size: 1rem;
+}

src/styles/index.css

@@ -5,4 +5,5 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #1f2c38;
 }