log search form styles added

apps/block_scout_web/assets/css/app.scss

@@ -122,7 +122,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/alerts";
 @import "components/verify_other_explorers";
 @import "components/errors";
-
+@import "components/log-search";
 :export {
   dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;
   dashboardLineColorMarket: $dashboard-line-color-market;

apps/block_scout_web/assets/css/components/_log-search.scss

@@ -0,0 +1,60 @@
+.logs-topbar {
+	padding-bottom: 30px;
+	@media (min-width: 600px) {
+		display: flex;
+		justify-content: space-between;
+	}
+	.pagination-container.position-top {
+		padding-top: 0 !important;
+	}
+}
+
+.logs-search {
+	display: flex;
+	@media (max-width: 599px) {
+		margin-bottom: 30px;
+	}
+}
+
+.logs-search-input, .logs-search-btn, .logs-search-btn-cancel {
+	height: 24px;
+	background-color: #f5f6fa;
+	border: 1px solid #f5f6fa;
+	color: #333;
+	border-radius: 2px;
+	outline: none;
+	font-family: Nunito, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.logs-search-input {
+    padding-left: 6px;
+    display: inline-flex;
+    flex-grow: 2;
+    min-width: 160px;
+    &::placeholder {
+    	color: #a3a9b5;
+    }
+}
+
+.logs-search-btn {
+	margin-left: 6px;
+	color: #a3a9b5;
+	transition: .1s ease-in;
+	cursor: pointer;
+	&:hover {
+		background-color: $primary;
+		color: #fff;
+		border-color: $primary;
+	}
+}
+
+.logs-search-btn-cancel {
+	color: #a3a9b5;
+	cursor: pointer;
+	transition: .1s ease-in;
+	&:hover {
+		color: #333;
+	}
+}