From ffef1dd4bbaff72d77b5a3c7a40de17f1e58977b Mon Sep 17 00:00:00 2001
From: adueck <adueck@users.noreply.github.com>
Date: Fri, 2 Dec 2022 09:36:08 +0500
Subject: [PATCH] clearer message about approximate search mode

---
 website/src/App.tsx                  | 24 ++++++++++++++++--------
 website/src/components/SearchBar.tsx |  4 +++-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/website/src/App.tsx b/website/src/App.tsx
index efdce6a..5ac4ff4 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -395,12 +395,16 @@ class App extends Component<RouteComponentProps, State> {
     }
 
     private handleSearchValueChange(searchValue: string) {
-        if (searchValue === " ") return;
+        if (searchValue === " ") {
+            return;
+        }
         const lastChar = searchValue[searchValue.length-1];
         if (lastChar >= '0' && lastChar <= '9') {
             return;
         }
-        if (this.state.dictionaryStatus !== "ready") return;
+        if (this.state.dictionaryStatus !== "ready") {
+            return;
+        }
         if (searchValue === "") {
             this.setState({
                 searchValue: "",
@@ -510,12 +514,16 @@ class App extends Component<RouteComponentProps, State> {
                     <DictionaryStatusDisplay status={this.state.dictionaryStatus} />
                 :
                     <>
-                        <Route path="/" exact>
+                        <Route path="/" exact={true}>
                             <div className="text-center mt-4">
                                 <h4 className="font-weight-light p-3 mb-4">LingDocs Pashto Dictionary</h4>
-                                {this.state.options.searchType === "alphabetical" && <div className="mt-4 font-weight-light">
-                                    <div className="mb-3"><span className="fa fa-book mr-2" ></span> Alphabetical browsing mode</div>
-                                </div>}
+                                <div className="mt-4 font-weight-light">
+                                    <div className="mb-4 small">
+                                        {this.state.options.searchType === "alphabetical"
+                                            ? <><span className="fa fa-book mr-2" /> Alphabetical browsing mode</>
+                                            : <><span className="fa fa-bolt mr-2" /> Approximate search mode</>}
+                                    </div>
+                                </div>
                                 {this.state.user?.level === "editor" && <div className="mt-4 font-weight-light">
                                     <div className="mb-3">Editor privileges active</div>
                                     <Link to="/edit">
@@ -529,7 +537,7 @@ class App extends Component<RouteComponentProps, State> {
                                     <Link to="/phrase-builder" className="plain-link h5 font-weight-light">
                                         Phrase Builder
                                     </Link>
-                                    <span className="mx-1">{` • `}</span>
+                                    <span className="mx-1"> • </span>
                                     <a href="https://grammar.lingdocs.com" className="plain-link h5 font-weight-light">
                                         Grammar
                                     </a>
@@ -616,7 +624,7 @@ class App extends Component<RouteComponentProps, State> {
                 { "footer-thick": this.state.options.searchBarPosition === "bottom" && !["/search", "/word"].includes(this.props.location.pathname) },
                 { "wee-less-footer": this.state.options.searchBarPosition === "bottom" && ["/search", "/word"].includes(this.props.location.pathname) },
             )}>
-                <Route path="/" exact>
+                <Route path="/" exact={true}>
                     <div className="buttons-footer">
                         <BottomNavItem label="About" icon="info-circle" page="/about" />
                         <BottomNavItem label="Settings" icon="cog" page="/settings" />
diff --git a/website/src/components/SearchBar.tsx b/website/src/components/SearchBar.tsx
index 5f702b2..566f858 100644
--- a/website/src/components/SearchBar.tsx
+++ b/website/src/components/SearchBar.tsx
@@ -26,7 +26,9 @@ const SearchBar = ({ state, optionsDispatch, handleSearchValueChange, onBottom }
     window.addEventListener("focus", onFocus);
     Mousetrap.bind(["shift+space"], (e) => {
       e.preventDefault();
-      if (e.repeat) return;
+      if (e.repeat) {
+        return;
+      }
       inputRef.current?.focus();
     });
     return () => {