Adding a search icon, and a faster transition.

diff --git a/ui/assets/css/main.css b/ui/assets/css/main.css
index a05f5a8ba14adce7263a8b344c120f923ac0e7f9..fd65148c7f8f58d31dcfba62459ecd19bd9ec8db 100644 (file)
--- a/ui/assets/css/main.css
+++ b/ui/assets/css/main.css
@@ -252,7 +252,7 @@ pre {
 
 .form-control.search-input {
   float: right !important;
-  transition: width 0.5s ease-out 0s !important;
+  transition: width 0.2s ease-out 0s !important;
 }
 
 .show-input {
@@ -263,4 +263,4 @@ pre {
   background: transparent !important;
   width: 0px !important;
   padding: 0 !important;
- }
\ No newline at end of file
+ }

diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx
index 7c72d6cd098bf5777bb50584a2419db88f7d34c7..53b085e5b58ad65c9e7be9df5f1299139308cf04 100644 (file)
--- a/ui/src/components/navbar.tsx
+++ b/ui/src/components/navbar.tsx
@@ -245,21 +245,22 @@ export class Navbar extends Component<any, NavbarState> {
                   placeholder={i18n.t('search')}
                   onBlur={linkEvent(this, this.handleSearchBlur)}
                 ></input>
-                <div class="mx-sm-2">
-                  <button
-                    name="search-btn"
-                    onClick={linkEvent(this, this.handleSearchBtn)}
-                    class="btn btn-secondary"
-                  >
-                    {i18n.t('search')}
-                  </button>
-                </div>
+                <button
+                  name="search-btn"
+                  onClick={linkEvent(this, this.handleSearchBtn)}
+                  class="btn btn-link"
+                  style="color: var(--gray)"
+                >
+                  <svg class="icon">
+                    <use xlinkHref="#icon-search"></use>
+                  </svg>
+                </button>
               </form>
             </div>
           )}
-          <ul class="navbar-nav ml-2">
+          <ul class="navbar-nav my-2">
             {this.canAdmin && (
-              <li className="nav-item mt-1">
+              <li className="nav-item">
                 <Link
                   class="nav-link"
                   to={`/admin`}
@@ -273,7 +274,7 @@ export class Navbar extends Component<any, NavbarState> {
             )}
             {this.state.isLoggedIn ? (
               <>
-                <li className="nav-item mt-1">
+                <li className="nav-item">
                   <Link class="nav-link" to="/inbox" title={i18n.t('inbox')}>
                     <svg class="icon">
                       <use xlinkHref="#icon-bell"></use>

diff --git a/ui/src/components/symbols.tsx b/ui/src/components/symbols.tsx
index cdb7436a429b23bcd57a9f116dba65e7080432b2..77d7a086043783147c5ff16001c8a31461ffea74 100644 (file)
--- a/ui/src/components/symbols.tsx
+++ b/ui/src/components/symbols.tsx
@@ -159,8 +159,8 @@ export class Symbols extends Component<any, any> {
               />
             </g>
           </symbol>
-          <symbol id="icon-search" viewBox="0 0 32 32">
-            <path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
+          <symbol id="icon-search" viewBox="0 0 24 24">
+            <path d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"></path>
           </symbol>
           <symbol id="icon-github" viewBox="0 0 32 32">
             <path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z"></path>