Remove unused styling

packages/redux-devtools-rtk-query-monitor/src/components/NoRtkQueryApi.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 
 export function NoRtkQueryApi(): JSX.Element {
   return (
-    <StyleUtilsContext.Consumer>
-      {({ styling }) => (
     <div
       css={(theme) => ({
         width: '100%',
@@ -30,7 +27,5 @@ export function NoRtkQueryApi(): JSX.Element {
       </a>
       .
     </div>
-      )}
-    </StyleUtilsContext.Consumer>
   );
 }

packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx

@@ -137,7 +137,7 @@ export class QueryForm extends React.PureComponent<
 
     return (
       <StyleUtilsContext.Consumer>
-        {({ styling, base16Theme }) => {
+        {({ base16Theme }) => {
           return (
             <form
               id="rtk-query-monitor-query-selection-form"

packages/redux-devtools-rtk-query-monitor/src/components/QueryList.tsx

@@ -1,6 +1,5 @@
 import React, { PureComponent, ReactNode } from 'react';
 import type { Interpolation, Theme } from '@emotion/react';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 import { RtkResourceInfo, RtkQueryMonitorState } from '../types';
 import { isQuerySelected } from '../utils/rtk-query';
 
@@ -50,8 +49,6 @@ export class QueryList extends PureComponent<QueryListProps> {
     const { resInfos, selectedQueryKey, onSelectQuery } = this.props;
 
     return (
-      <StyleUtilsContext.Consumer>
-        {({ styling }) => (
       <ul css={{ listStyle: 'none', margin: '0', padding: '0' }}>
         {resInfos.map((resInfo) => {
           const isSelected = isQuerySelected(selectedQueryKey, resInfo);
@@ -117,8 +114,6 @@ export class QueryList extends PureComponent<QueryListProps> {
           );
         })}
       </ul>
-        )}
-      </StyleUtilsContext.Consumer>
     );
   }
 }

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewApi.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode, PureComponent } from 'react';
 import type { ShouldExpandNodeInitially } from 'react-json-tree';
 import { ApiStats, QueryPreviewTabs, RtkQueryApiState } from '../types';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 import { TreeView, TreeViewProps } from './TreeView';
 import { renderTabPanelId, renderTabPanelButtonId } from '../utils/a11y';
 
@@ -39,8 +38,6 @@ export class QueryPreviewApi extends PureComponent<QueryPreviewApiProps> {
     const hasQueries = Object.keys(apiState.queries).length > 0;
 
     return (
-      <StyleUtilsContext.Consumer>
-        {({ styling }) => (
       <article
         {...rootProps}
         css={(theme) => ({
@@ -89,8 +86,6 @@ export class QueryPreviewApi extends PureComponent<QueryPreviewApiProps> {
           </>
         )}
       </article>
-        )}
-      </StyleUtilsContext.Consumer>
     );
   }
 }

packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewHeader.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 import { QueryPreviewTabs, TabOption } from '../types';
 import { renderTabPanelButtonId } from '../utils/a11y';
 import { emptyArray } from '../utils/object';
@@ -24,8 +23,6 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
     const { tabs, selectedTab, renderTabLabel } = this.props;
 
     return (
-      <StyleUtilsContext.Consumer>
-        {({ styling }) => (
       <div
         css={(theme) => ({
           flex: '0 0 30px',
@@ -107,15 +104,11 @@ export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps>
                   })),
               ]}
             >
-                  <span>
+              <span>{renderTabLabel ? renderTabLabel(tab) : tab.label}</span>
-                    {renderTabLabel ? renderTabLabel(tab) : tab.label}
-                  </span>
             </button>
           ))}
         </div>
       </div>
-        )}
-      </StyleUtilsContext.Consumer>
     );
   }
 

packages/redux-devtools-rtk-query-monitor/src/components/SortOrderButton.tsx

@@ -1,6 +1,5 @@
 import React, { CSSProperties } from 'react';
 import { ArrowUpIcon } from './ArrowUpIcon';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 
 export interface SortOrderButtonProps {
   readonly isAsc?: boolean;
@@ -28,8 +27,6 @@ export function SortOrderButton({
   };
 
   return (
-    <StyleUtilsContext.Consumer>
-      {({ styling }) => (
     <button
       type="button"
       id={id}
@@ -61,7 +58,5 @@ export function SortOrderButton({
       <ArrowUpIcon style={arrowStyles} />
       {buttonLabel}
     </button>
-      )}
-    </StyleUtilsContext.Consumer>
   );
 }

packages/redux-devtools-rtk-query-monitor/src/components/UList.tsx

@@ -1,12 +1,9 @@
 import * as React from 'react';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 
 export type UListProps = React.HTMLAttributes<HTMLUListElement>;
 
 export function UList(props: UListProps): JSX.Element {
   return (
-    <StyleUtilsContext.Consumer>
-      {({ styling }) => (
     <ul
       {...props}
       css={(theme) => ({
@@ -29,7 +26,5 @@ export function UList(props: UListProps): JSX.Element {
         },
       })}
     />
-      )}
-    </StyleUtilsContext.Consumer>
   );
 }

packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react';
 import type { Interpolation, Theme } from '@emotion/react';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 import { createTreeItemLabelRenderer } from '../styles/tree';
 import {
   QueryPreviewTabs,
@@ -186,7 +185,7 @@ export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
   constructor(props: QueryPreviewProps<S>) {
     super(props);
 
-    this.labelRenderer = createTreeItemLabelRenderer(this.props.styling);
+    this.labelRenderer = createTreeItemLabelRenderer();
   }
 
   renderLabelWithCounter = (
@@ -229,8 +228,6 @@ export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
 
     if (!resInfo) {
       return (
-        <StyleUtilsContext.Consumer>
-          {({ styling }) => (
         <div css={queryPreviewCss}>
           <QueryPreviewHeader
             selectedTab={selectedTab}
@@ -239,25 +236,16 @@ export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
               tabs.filter((tab) =>
                 isTabVisible(tab, 'default'),
               ) as ReadonlyArray<
-                    TabOption<
+                TabOption<QueryPreviewTabs, unknown, RtkResourceInfo['type']>
-                      QueryPreviewTabs,
-                      unknown,
-                      RtkResourceInfo['type']
-                    >
               >
             }
             renderTabLabel={this.renderTabLabel}
           />
           {hasNoApis && <NoRtkQueryApi />}
         </div>
-          )}
-        </StyleUtilsContext.Consumer>
       );
     }
 
-    return (
-      <StyleUtilsContext.Consumer>
-        {({ styling }) => {
     return (
       <div css={queryPreviewCss}>
         <QueryPreviewHeader
@@ -267,11 +255,7 @@ export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
             tabs.filter((tab) =>
               isTabVisible(tab, resInfo.type),
             ) as ReadonlyArray<
-                    TabOption<
+              TabOption<QueryPreviewTabs, unknown, RtkResourceInfo['type']>
-                      QueryPreviewTabs,
-                      unknown,
-                      RtkResourceInfo['type']
-                    >
             >
           }
           renderTabLabel={this.renderTabLabel}
@@ -279,8 +263,5 @@ export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
         <TabComponent {...(this.props as QueryPreviewTabProps)} />
       </div>
     );
-        }}
-      </StyleUtilsContext.Consumer>
-    );
   }
 }

packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx

@@ -92,9 +92,7 @@ export function getItemString(
   );
 }
 
-export function createTreeItemLabelRenderer(
+export function createTreeItemLabelRenderer(): LabelRenderer {
-  styling: StylingFunction,
-): LabelRenderer {
   return function labelRenderer([key], nodeType, expanded) {
     return (
       <span>