Enhance search bar

server/ui/src/Main.css

@@ -15,4 +15,10 @@
     -webkit-box-shadow: 0 8px 6px -6px #999;
     -moz-box-shadow: 0 8px 6px -6px #999;
     box-shadow: 0 8px 6px -6px #999;
-}
+}
+
+.no-outline,
+.no-outline:focus {
+  box-shadow: none !important;
+  outline: none !important;
+}

server/ui/src/components/home.tsx

@@ -25,4 +25,3 @@ export class Home extends Component<any, any> {
   }
 
 }
-

server/ui/src/components/navbar.tsx

@@ -29,31 +29,29 @@ export class Navbar extends Component<any, State> {
 
   navbar() {
     return (
-      <nav class="navbar navbar-dark navbar-purple">
+      <nav class="navbar navbar-dark navbar-purple py-1">
-        <a class="navbar-brand" href="#">
+        <a class="navbar-brand mx-1" href="#">
           <i class="fas fa-fw fa-database mr-1"></i>
           Torrents.csv
         </a>
-        <ul class="navbar-nav ml-auto">
+        {this.searchForm()}
+        <ul class="navbar-nav mx-1">
           <li class="nav-item">
             <a class="nav-link" href={repoUrl}><i class="fab fa-fw fa-github"></i></a>
           </li>
         </ul>
-        <div class="col-12 col-sm-6">
-          {this.searchForm()}
-        </div>
       </nav>
     );
   }
 
-  // TODO
-  // https://www.codeply.com/go/xBVaM3q5X4/bootstrap-4-navbar-search-full-width
   searchForm() {
     return (
-      <form class="my-2 my-lg-0 d-inline w-100" onSubmit={linkEvent(this, this.search)}>
+      <form class="form-inline col-7 col-sm-8 col-xl-10 mx-1 my-0" onSubmit={linkEvent(this, this.search)}>
-        <div class="input-group">
+        <div class="input-group w-100">
-          <input value={this.state.searchParams.q} onInput={linkEvent(this, this.searchChange)} type="text" class="form-control" placeholder="Search..." />
+          <input class="form-control border-0 rounded-0 no-outline" type="search" placeholder="Search..." aria-label="Search..." required
-          <button type="submit" class="btn btn-light border border-left-0 border-radius-left-0">
+                 value={this.state.searchParams.q}
+                 onInput={linkEvent(this, this.searchChange)}></input>
+          <button class="btn btn-secondary border-0 rounded-0 no-outline" type="submit">
             <i className="fas fa-fw fa-search"></i>
           </button>
         </div>

server/ui/src/components/search.tsx

@@ -175,4 +175,4 @@ export class Search extends Component<any, State> {
     a.i.props.history.push(`/search/${newSearch.q}/${newSearch.page}`);
   }
 
-}
+}