From 310192dd53ac67acf7a78be83b6aa98a7cbc227b Mon Sep 17 00:00:00 2001
From: Haishan <haishanhan@gmail.com>
Date: Sat, 10 Sep 2022 14:38:32 +0800
Subject: [PATCH] Minor style tweaks

---
 src/components/Logs.module.scss   | 4 ++++
 src/components/Logs.tsx           | 4 +++-
 src/components/Search.module.scss | 3 +++
 src/components/Search.tsx         | 4 ++--
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Logs.module.scss b/src/components/Logs.module.scss
index 16ecb7f..44ba33c 100644
--- a/src/components/Logs.module.scss
+++ b/src/components/Logs.module.scss
@@ -70,3 +70,7 @@
 .logPlaceholderIcon {
   opacity: 0.3;
 }
+
+.search {
+  max-width: 1000px;
+}
diff --git a/src/components/Logs.tsx b/src/components/Logs.tsx
index 5930634..bd122d1 100644
--- a/src/components/Logs.tsx
+++ b/src/components/Logs.tsx
@@ -76,7 +76,9 @@ function Logs({ dispatch, logLevel, apiConfig, logs, logStreamingPaused }) {
   return (
     <div>
       <ContentHeader title={t('Logs')} />
-      <LogSearch />
+      <div className={s.search}>
+        <LogSearch />
+      </div>
       <div ref={refLogsContainer} style={{ paddingBottom }}>
         {logs.length === 0 ? (
           <div className={s.logPlaceholder} style={{ height: containerHeight - paddingBottom }}>
diff --git a/src/components/Search.module.scss b/src/components/Search.module.scss
index 657c741..f04f8ea 100644
--- a/src/components/Search.module.scss
+++ b/src/components/Search.module.scss
@@ -37,4 +37,7 @@
   top: 50%;
   transform: translateY(-50%);
   left: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 9762d8f..23aa6a3 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -7,7 +7,7 @@ import s0 from './Search.module.scss';
 function RuleSearch({ dispatch, searchText, updateSearchText }) {
   const [text, setText] = useState(searchText);
   const updateSearchTextInternal = useCallback(
-    (v) => {
+    (v: string) => {
       dispatch(updateSearchText(v));
     },
     [dispatch, updateSearchText]
@@ -16,7 +16,7 @@ function RuleSearch({ dispatch, searchText, updateSearchText }) {
     () => debounce(updateSearchTextInternal, 300),
     [updateSearchTextInternal]
   );
-  const onChange = (e) => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setText(e.target.value);
     updateSearchTextDebounced(e.target.value);
   };