Unifying search box styling across the entire app (#4301)

Author: MundiaNderi

pontoon/administration/static/css/admin_project.css

@@ -145,6 +145,10 @@ form .controls .button.manage-resources[disabled]:hover {
   width: 150px;
 }
 
+.admin-project .search-wrapper {
+  background: var(--input-background-1);
+}
+
 #admin-strings-form .controls .add-inline {
   float: left;
   margin-left: 0;

pontoon/base/static/css/style.css

@@ -303,6 +303,10 @@ time {
   z-index: 19; /* Must be lower than for the (popup) .menu */
 }
 
+.select.opened .menu .search-wrapper {
+  background: var(--black-3);
+}
+
 .project.select,
 .locale.select,
 .part.select,
@@ -494,16 +498,17 @@ time {
 }
 
 .search-wrapper {
-  border-bottom: 1px solid var(--main-border-1);
+  border: 1px solid var(--main-border-1);
   margin-bottom: 10px;
   position: relative;
+  border-radius: 3px;
 }
 
 .search-wrapper .icon {
   color: var(--light-grey-7);
   font-size: 1.2em;
   position: absolute;
-  left: 3px;
+  left: 6px;
   top: 5px;
 }
 

pontoon/contributors/static/css/settings.css

@@ -6,6 +6,10 @@ form.user-locales-settings div {
   text-align: right;
 }
 
+form.user-locales-settings .search-wrapper {
+  background: var(--input-background-1);
+}
+
 form a:link,
 form a:visited {
   color: var(--status-translated-alt);

pontoon/messaging/static/css/messaging.css

@@ -9,6 +9,9 @@
     section {
       padding: 20px;
     }
+    .search-wrapper {
+      background: var(--black-3);
+    }
   }
 
   .controls {

pontoon/teams/static/css/team.css

@@ -230,6 +230,10 @@
   width: 100%;
 }
 
+#permissions-form .search-wrapper {
+  background: var(--dark-grey-1);
+}
+
 #permissions-form .user.select .menu ul {
   height: 168px;
   margin-bottom: 0;
@@ -296,3 +300,7 @@
 #project-selector .menu li:not(.limited) {
   display: none;
 }
+
+#project-selector.select.opened .menu .search-wrapper {
+  background: var(--black-3);
+}