diff --git a/graylog2-web-interface/src/components/common/DataTable/DataTable.jsx b/graylog2-web-interface/src/components/common/DataTable/DataTable.jsx
index a31bd271bc38..d637995249aa 100644
--- a/graylog2-web-interface/src/components/common/DataTable/DataTable.jsx
+++ b/graylog2-web-interface/src/components/common/DataTable/DataTable.jsx
@@ -30,7 +30,6 @@ const StyledTable = styled.table`
   ${tableCss}
 `;
 
-// eslint-disable-next-line react/prop-types
 const NoData = ({ noDataText }) => {
   if (typeof noDataText === 'string') {
     return (
diff --git a/graylog2-web-interface/src/components/common/Pagination.tsx b/graylog2-web-interface/src/components/common/Pagination.tsx
index 283df4849ad0..3ab8a418e14a 100644
--- a/graylog2-web-interface/src/components/common/Pagination.tsx
+++ b/graylog2-web-interface/src/components/common/Pagination.tsx
@@ -93,7 +93,7 @@ const StyledBootstrapPagination = styled(BootstrapPagination)(({ theme }) => css
 const UltimatePagination = createUltimatePagination({
   WrapperComponent: StyledBootstrapPagination,
   itemTypeToComponent: {
-    /* eslint-disable react/prop-types */
+
     [ITEM_TYPES.PAGE]: ({ value, isActive, onClick }) => {
       const title = isActive ? 'Active page' : `Open page ${value}`;
 
@@ -171,7 +171,7 @@ const UltimatePagination = createUltimatePagination({
         </BootstrapPagination.Last>
       );
     },
-    /* eslint-enable react/prop-types */
+
   },
 });
 
diff --git a/graylog2-web-interface/src/components/common/Popover.tsx b/graylog2-web-interface/src/components/common/Popover.tsx
index 0e73a759a8be..90fe6ce34527 100644
--- a/graylog2-web-interface/src/components/common/Popover.tsx
+++ b/graylog2-web-interface/src/components/common/Popover.tsx
@@ -20,7 +20,7 @@ import styled, { css, useTheme } from 'styled-components';
 
 const Popover = (props: React.ComponentProps<typeof MantinePopover>) => {
   const theme = useTheme();
-  // eslint-disable-next-line react/prop-types
+
   const arrowBackground = (!props.position || props.position.startsWith('bottom'))
     ? theme.colors.variant.lightest.default
     : theme.colors.global.contentBackground;
diff --git a/graylog2-web-interface/src/components/common/Select/Select.tsx b/graylog2-web-interface/src/components/common/Select/Select.tsx
index e0d944caf237..61d0d35bb039 100644
--- a/graylog2-web-interface/src/components/common/Select/Select.tsx
+++ b/graylog2-web-interface/src/components/common/Select/Select.tsx
@@ -43,11 +43,11 @@ const IndicatorSeparator = () => null;
 
 const DropdownIndicator = (props) => {
   const {
-    /* eslint-disable react/prop-types */
+
     children = <Icon name="arrow_drop_down" />,
     getStyles,
     innerProps: { ref, ...restInnerProps },
-    /* eslint-enable react/prop-types */
+
   } = props;
 
   return (
@@ -63,7 +63,6 @@ const Control = ({ children, ...props }: React.ComponentProps<typeof Components.
   <Components.Control {...props} className={CONTROL_CLASS}>{children}</Components.Control>
 );
 
-/* eslint-disable react/prop-types */
 const CustomOption = (optionRenderer: (option: Option, isSelected: boolean) => React.ReactElement) => (
   (props: React.ComponentProps<typeof Components.Option>): React.ReactElement => {
     const { data, isSelected } = props;
@@ -81,7 +80,6 @@ const CustomSingleValue = (valueRenderer: (option: Option) => React.ReactElement
 
   return <Components.SingleValue {...props}>{valueRenderer(data)}</Components.SingleValue>;
 };
-/* eslint-enable react/prop-types */
 
 const CustomInput = (inputProps: { [key: string]: any }) => (
   (props) => <Components.Input {...props} {...inputProps} />
diff --git a/graylog2-web-interface/src/components/common/TypeAheadInput.jsx b/graylog2-web-interface/src/components/common/TypeAheadInput.jsx
index 9756fc5afda8..2afcba10f5ed 100644
--- a/graylog2-web-interface/src/components/common/TypeAheadInput.jsx
+++ b/graylog2-web-interface/src/components/common/TypeAheadInput.jsx
@@ -49,7 +49,7 @@ export const Container = styled.div(({ theme }) => css`
   }
 
   .tt-query {
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 7.5%);
   }
 
   input[type="text"].tt-hint {
@@ -59,9 +59,9 @@ export const Container = styled.div(({ theme }) => css`
   .tt-menu {
     min-width: 160px;
     //background-color: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.2);
+    border: 1px solid rgb(0 0 0 / 20%);
     border-radius: 4px;
-    //box-shadow: 0 5px 10px rgba(0,0,0,.2);
+    //box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
     width: 100%;
     background-color: ${theme.colors.global.contentBackground};
     box-shadow: 0 3px 3px ${theme.colors.global.navigationBoxShadow};
@@ -88,10 +88,10 @@ export const Container = styled.div(({ theme }) => css`
 
   .tt-suggestion:hover,
   .tt-suggestion.tt-cursor {
-    color: #ffffff;
+    color: #fff;
     text-decoration: none;
     background-color: #0081c2;
-    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+    background-image: linear-gradient(to bottom, #08c, #0077b3);
     background-repeat: repeat-x;
     outline: 0;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
diff --git a/graylog2-web-interface/src/components/configurations/decorators/DecoratorsConfigUpdate.tsx b/graylog2-web-interface/src/components/configurations/decorators/DecoratorsConfigUpdate.tsx
index 29da07a7a789..dfe3d9217bc0 100644
--- a/graylog2-web-interface/src/components/configurations/decorators/DecoratorsConfigUpdate.tsx
+++ b/graylog2-web-interface/src/components/configurations/decorators/DecoratorsConfigUpdate.tsx
@@ -36,7 +36,7 @@ type Props = {
   streams: Array<Stream>,
   decorators: Array<Decorator>,
   types: { [key: string]: any },
-  // eslint-disable-next-line react/require-default-props
+
   show?: boolean,
   onCancel: () => void,
   onSave: (newDecorators: Array<Decorator>) => unknown,
diff --git a/graylog2-web-interface/src/integrations/aws/cloudwatch/CloudWatch.test.jsx b/graylog2-web-interface/src/integrations/aws/cloudwatch/CloudWatch.test.jsx
index 1958a809fc03..6d3528392680 100644
--- a/graylog2-web-interface/src/integrations/aws/cloudwatch/CloudWatch.test.jsx
+++ b/graylog2-web-interface/src/integrations/aws/cloudwatch/CloudWatch.test.jsx
@@ -39,7 +39,6 @@ jest.mock('react-router-dom', () => {
   };
 });
 
-// eslint-disable-next-line react/prop-types
 const TestCommonProviders = ({ children }) => (
   <ApiContext.Provider value={{
     availableStreams: [],
diff --git a/graylog2-web-interface/src/preflight/components/common/Col.tsx b/graylog2-web-interface/src/preflight/components/common/Col.tsx
index 495c27ccc27c..d5a85ef6f37d 100644
--- a/graylog2-web-interface/src/preflight/components/common/Col.tsx
+++ b/graylog2-web-interface/src/preflight/components/common/Col.tsx
@@ -18,7 +18,7 @@ import * as React from 'react';
 import { Grid } from '@mantine/core';
 
 const Col = ({ children, ...props }: React.ComponentProps<typeof Grid.Col>) => (
-  // eslint-disable-next-line react/prop-types
+
   <Grid.Col {...props} style={{ ...props.style }}>
     {children}
   </Grid.Col>
diff --git a/graylog2-web-interface/src/views/components/WidgetGrid.test.tsx b/graylog2-web-interface/src/views/components/WidgetGrid.test.tsx
index 41d2fc03beb6..078d7e69b5fb 100644
--- a/graylog2-web-interface/src/views/components/WidgetGrid.test.tsx
+++ b/graylog2-web-interface/src/views/components/WidgetGrid.test.tsx
@@ -31,7 +31,7 @@ import { createViewWithWidgets } from 'fixtures/searches';
 import WidgetGrid from './WidgetGrid';
 
 jest.mock('./widgets/Widget', () => () => 'widget');
-// eslint-disable-next-line react/prop-types
+
 jest.mock('components/common/ReactGridContainer', () => ({ children }) => <span>{children}</span>);
 
 jest.mock('views/components/contexts/WidgetFieldTypesContextProvider', () => ({ children }) => children);
diff --git a/graylog2-web-interface/src/views/components/searchbar/queryvalidation/QueryValidation.test.tsx b/graylog2-web-interface/src/views/components/searchbar/queryvalidation/QueryValidation.test.tsx
index 8bb032c316ec..b4fa45d990c1 100644
--- a/graylog2-web-interface/src/views/components/searchbar/queryvalidation/QueryValidation.test.tsx
+++ b/graylog2-web-interface/src/views/components/searchbar/queryvalidation/QueryValidation.test.tsx
@@ -30,9 +30,9 @@ jest.mock('hooks/usePluginEntities');
 jest.mock('logic/rest/FetchProvider', () => jest.fn(() => Promise.resolve()));
 
 type SUTProps = {
-  // eslint-disable-next-line react/require-default-props
+
   error?: QueryValidationState,
-  // eslint-disable-next-line react/require-default-props
+
   warning?: QueryValidationState,
 }
 
diff --git a/graylog2-web-interface/src/views/components/sidebar/highlighting/HighlightingColorForm.test.tsx b/graylog2-web-interface/src/views/components/sidebar/highlighting/HighlightingColorForm.test.tsx
index 0d26b48d5157..e48d526ee458 100644
--- a/graylog2-web-interface/src/views/components/sidebar/highlighting/HighlightingColorForm.test.tsx
+++ b/graylog2-web-interface/src/views/components/sidebar/highlighting/HighlightingColorForm.test.tsx
@@ -26,7 +26,6 @@ import FieldType, { Properties } from 'views/logic/fieldtypes/FieldType';
 describe('HighlightingColorForm', () => {
   const field = FieldTypeMapping.create('foo', FieldType.create('number', [Properties.Numeric]));
 
-  // eslint-disable-next-line react/prop-types
   const SimpleForm = ({ value = undefined, ...rest }) => (
     <Formik initialValues={{ color: value }} onSubmit={() => {}}>
       <HighlightingColorForm field={field} {...rest} />
diff --git a/graylog2-web-interface/src/views/components/visualizations/PlotLegend.test.tsx b/graylog2-web-interface/src/views/components/visualizations/PlotLegend.test.tsx
index c7d52d0d2a4c..db4109a71b5f 100644
--- a/graylog2-web-interface/src/views/components/visualizations/PlotLegend.test.tsx
+++ b/graylog2-web-interface/src/views/components/visualizations/PlotLegend.test.tsx
@@ -43,7 +43,6 @@ const chartData = [
 const columnPivots = [Pivot.create(['field1'], 'unknown')];
 const config = AggregationWidgetConfig.builder().series([Series.forFunction('count')]).columnPivots(columnPivots).build();
 
-// eslint-disable-next-line react/require-default-props
 const SUT = ({ chartDataProp = chartData, plotConfig = config, neverHide = false }: { chartDataProp?: Array<{ name: string, }>, plotConfig?: AggregationWidgetConfig, neverHide?: boolean }) => (
   <WidgetFocusContext.Provider value={{
     focusedWidget: undefined,
diff --git a/graylog2-web-interface/src/views/components/visualizations/number/NumberVisualization.test.tsx b/graylog2-web-interface/src/views/components/visualizations/number/NumberVisualization.test.tsx
index 2b55e3cd80b6..a9bc44576c84 100644
--- a/graylog2-web-interface/src/views/components/visualizations/number/NumberVisualization.test.tsx
+++ b/graylog2-web-interface/src/views/components/visualizations/number/NumberVisualization.test.tsx
@@ -38,7 +38,7 @@ jest.mock('views/components/Value', () => ({ value }: { value: string }) => <div
 
 type Data = Record<string, Rows>;
 type SUTProps = {
-  // eslint-disable-next-line react/require-default-props
+
   data?: Data;
 };