Remove typeahead.less.

graylog2-web-interface/src/components/common/TypeAheadFieldInput.jsx

@@ -27,6 +27,8 @@ import ApiRoutes from 'routing/ApiRoutes';
 import { qualifyUrl } from 'util/URLUtils';
 import fetch from 'logic/rest/FetchProvider';
 
+import { Container } from './TypeAheadInput';
+
 /**
  * Component that renders an input offering auto-completion for message fields.
  * Fields are loaded from the Graylog server in the background.
@@ -137,14 +139,16 @@ class TypeAheadFieldInput extends React.Component {
     const { id, label, valueLink, error, onBlur } = this.props;
 
     return (
-      <Input id={id}
-             ref={(fieldInput) => { this.fieldInput = fieldInput; }}
-             label={label}
-             onBlur={onBlur}
-             error={error}
-             wrapperClassName="typeahead-wrapper"
-             defaultValue={valueLink ? valueLink.value : null}
-             {...this._getFilteredProps()} />
+      <Container>
+        <Input id={id}
+               ref={(fieldInput) => { this.fieldInput = fieldInput; }}
+               label={label}
+               onBlur={onBlur}
+               error={error}
+               wrapperClassName="typeahead-wrapper"
+               defaultValue={valueLink ? valueLink.value : null}
+               {...this._getFilteredProps()} />
+      </Container>
     );
   }
 }

graylog2-web-interface/src/components/common/TypeAheadInput.jsx

@@ -20,11 +20,88 @@
 import escape from 'lodash/escape';
 import $ from 'jquery';
 import 'typeahead.js';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import UniversalSearch from 'logic/search/UniversalSearch';
 import { Input } from 'components/bootstrap';
 
+export const Container = styled.div(({ theme }) => css`
+  width: 100%;
+
+  .twitter-typeahead {
+    width: 100%;
+  }
+
+  .typeahead,
+  .tt-query,
+  .tt-hint {
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    outline: none;
+  }
+
+  .typeahead {
+    background-color: #fff;
+  }
+
+  .typeahead:focus {
+    border: 2px solid #0097cf;
+  }
+
+  .tt-query {
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  }
+
+  input[type="text"].tt-hint {
+    color: #999
+  }
+
+  .tt-menu {
+    min-width: 160px;
+    //background-color: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    //box-shadow: 0 5px 10px rgba(0,0,0,.2);
+    width: 100%;
+    background-color: ${theme.colors.global.contentBackground};
+    box-shadow: 0 3px 3px ${theme.colors.global.navigationBoxShadow};
+    color: ${theme.colors.global.textDefault};
+
+    .tt-suggestion:hover,
+    .tt-suggestion.tt-cursor {
+      color: ${theme.colors.variant.darkest.info};
+      background-color: ${theme.colors.variant.lighter.info};
+      background-image: none;
+    }
+  }
+
+  .tt-dataset {
+    margin-top: 10px;
+  }
+
+  .tt-suggestion {
+    font-size: 1rem; /* theme.fonts.size.body */
+    line-height: 20px;
+    padding: 3px 10px;
+    cursor: pointer;
+  }
+
+  .tt-suggestion:hover,
+  .tt-suggestion.tt-cursor {
+    color: #ffffff;
+    text-decoration: none;
+    background-color: #0081c2;
+    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+    background-repeat: repeat-x;
+    outline: 0;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
+  }
+
+  .tt-suggestion p {
+    margin: 0;
+  }
+`);
+
 const StyledInput = styled(Input)`
   input&.tt-hint {
     background-color: transparent !important;
@@ -104,9 +181,9 @@
     this._destroyTypeahead();
   }
 
   getValue = () => $(this.fieldInput).typeahead('val');
 
   clear = () => {
     $(this.fieldInput).typeahead('val', '');
   };
 
@@ -159,13 +236,15 @@
     const { id, label, onKeyPress, formGroupClassName } = this.props;
 
     return (
-      <StyledInput id={id}
-                   type="text"
-                   ref={(fieldInput) => { this.fieldInputElem = fieldInput; }}
-                   wrapperClassName="typeahead-wrapper"
-                   formGroupClassName={formGroupClassName}
-                   label={label}
-                   onKeyPress={onKeyPress} />
+      <Container>
+        <StyledInput id={id}
+                     type="text"
+                     ref={(fieldInput) => { this.fieldInputElem = fieldInput; }}
+                     wrapperClassName="typeahead-wrapper"
+                     formGroupClassName={formGroupClassName}
+                     label={label}
+                     onKeyPress={onKeyPress} />
+      </Container>
     );
   }
 }

graylog2-web-interface/src/routing/App.tsx

@@ -28,7 +28,6 @@ import CurrentUserContext from 'contexts/CurrentUserContext';
 import Navigation from 'components/navigation/Navigation';
 import ReportedErrorBoundary from 'components/errors/ReportedErrorBoundary';
 import RuntimeErrorBoundary from 'components/errors/RuntimeErrorBoundary';
-import 'stylesheets/typeahead.less';
 import NavigationTelemetry from 'logic/telemetry/NavigationTelemetry';
 import HotkeysProvider from 'contexts/HotkeysProvider';
 import HotkeysModalContainer from 'components/hotkeys/HotkeysModalContainer';

graylog2-web-interface/src/theme/GlobalThemeStyles.ts

@@ -563,19 +563,6 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css`
     width: auto;
   }
 
-  .typeahead-wrapper .tt-menu {
-    background-color: ${theme.colors.global.contentBackground};
-    box-shadow: 0 3px 3px ${theme.colors.global.navigationBoxShadow};
-    color: ${theme.colors.global.textDefault};
-
-    .tt-suggestion:hover,
-    .tt-suggestion.tt-cursor {
-      color: ${theme.colors.variant.darkest.info};
-      background-color: ${theme.colors.variant.lighter.info};
-      background-image: none;
-    }
-  }
-
   .form-group-inline {
     display: inline-block;
     margin: 0;

graylog2-web-interface/styleguide.config.js

@@ -35,7 +35,6 @@ module.exports = {
     'regenerator-runtime/runtime',
     'bootstrap/less/bootstrap.less',
     'toastr/toastr.less',
-    'stylesheets/typeahead.less',
     './fetch-mock',
   ],
   sections: [