Add dialog for searching and adding mod

Still WIP, need to implement selecting a particular plugin under mod, which will require some backend changes.

styles/AddModData.module.css

@@ -0,0 +1,9 @@
+.wrapper {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+a.name {
+  margin-top: 24px;
+  word-wrap: break-word;
+}

styles/AddModDialog.module.css

@@ -0,0 +1,29 @@
+.dialog {
+  top: 12px;
+  z-index: 8;
+  background-color: #fbefd5;
+  box-shadow: 0 0 1em black;
+  max-width: 400px;
+  min-width: 300px;
+  min-height: 400px;
+}
+
+.dialog[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog h3 {
+  margin-top: 0px;
+}
+
+.dialog menu {
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+  margin-top: auto;
+}
+
+.button {
+  margin-bottom: 24px;
+}

styles/SearchBar.module.css

@@ -1,4 +1,4 @@
-.search-bar {
+.search-bar-fixed {
   position: fixed;
   top: 8px;
   width: 150px;
@@ -6,29 +6,33 @@
   z-index: 2;
 }
 
-.search-bar.search-bar-focused {
+.search-bar-fixed.search-bar-focused {
   width: max(40vw, 250px);
   left: calc(50% - max(20vw, 125px));
 }
 
 @media only screen and (min-width: 600px) {
-  .search-bar.search-bar-sidebar-open {
+  .search-bar-fixed.search-bar-sidebar-open {
     left: calc(50% + 75px);
   }
 
-  .search-bar.search-bar-focused.search-bar-sidebar-open {
+  .search-bar-fixed.search-bar-focused.search-bar-sidebar-open {
     left: calc(50% - max(20vw, 125px) + 125px);
   }
 }
 
 .search-bar input {
-  width: 150px;
+  width: 100%;
   border-radius: 8px;
   padding-left: 8px;
   padding-right: 8px;
 }
 
-.search-bar.search-bar.search-bar-focused input {
+.search-bar-fixed input {
+  width: 150px;
+}
+
+.search-bar-fixed.search-bar-focused input {
   width: max(40vw, 250px);
   border-radius: 8px;
   padding-left: 8px;