replace notice with p tag (#4954)

packages/insomnia/src/ui/components/modals/generate-config-modal.tsx

@@ -15,7 +15,6 @@ import { ModalFooter } from '../base/modal-footer';
 import { ModalHeader } from '../base/modal-header';
 import { CodeEditor } from '../codemirror/code-editor';
 import { HelpTooltip } from '../help-tooltip';
-import { Notice } from '../notice';
 import { showModal } from './index';
 
 interface Config {
@@ -90,10 +89,10 @@ export class GenerateConfigModal extends PureComponent<{}, State> {
     if (config.error) {
       return (
         <TabPanel key={config.label}>
-          <Notice color="error" className="margin-md">
+          <p className="notice error margin-md">
             {config.error}
             {config.docsLink ? <><br /><Link href={config.docsLink}>Documentation {linkIcon}</Link></> : null}
-          </Notice>
+          </p>
         </TabPanel>
       );
     }

packages/insomnia/src/ui/components/notice.tsx

@@ -1,69 +0,0 @@
-import { autoBindMethodsForReact } from 'class-autobind-decorator';
-import classnames from 'classnames';
-import React, { PureComponent, ReactNode } from 'react';
-
-import { AUTOBIND_CFG } from '../../common/constants';
-const DISMISSED_VALUE = 'dismissed';
-
-interface Props {
-  dismissKey?: string;
-  color?: 'surprise' | 'success' | 'warning' | 'info' | 'error' | 'subtle';
-  children: ReactNode;
-  className?: string;
-}
-
-interface State {
-  visible: boolean;
-  localStorageKey: string | null;
-}
-
-@autoBindMethodsForReact(AUTOBIND_CFG)
-export class Notice extends PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    const { dismissKey } = props;
-    const localStorageKey = dismissKey ? 'insomnia::notice::' + dismissKey : null;
-    // It's visible if it's not dismissible
-    let visible = false;
-
-    if (localStorageKey) {
-      visible = window.localStorage.getItem(localStorageKey) !== DISMISSED_VALUE;
-    } else {
-      visible = true;
-    }
-
-    this.state = {
-      visible,
-      localStorageKey,
-    };
-  }
-
-  _dismissNotification() {
-    const { localStorageKey } = this.state;
-    // Hide the currently showing notification
-    this.setState({ visible: false });
-    if (localStorageKey !== null) {
-      window.localStorage.setItem(localStorageKey, DISMISSED_VALUE);
-    }
-  }
-
-  render() {
-    const { children, color, className } = this.props;
-    const { visible, localStorageKey } = this.state;
-
-    if (!visible) {
-      return null;
-    }
-
-    return (
-      <p className={classnames('notice', color, className)}>
-        {localStorageKey && (
-          <button className="icon pull-right" onClick={this._dismissNotification}>
-            <i className="fa fa-times" />
-          </button>
-        )}
-        {children}
-      </p>
-    );
-  }
-}

packages/insomnia/src/ui/components/wrapper-home.tsx

@@ -39,7 +39,6 @@ import { ProjectDropdown } from './dropdowns/project-dropdown';
 import { RemoteWorkspacesDropdown } from './dropdowns/remote-workspaces-dropdown';
 import { KeydownBinder } from './keydown-binder';
 import { showPrompt } from './modals';
-import { Notice } from './notice';
 import { PageLayout } from './page-layout';
 import { WorkspaceCard, WorkspaceCardProps } from './workspace-card';
 import type { WrapperProps } from './wrapper';
@@ -341,9 +340,9 @@ const WrapperHome: FC<Props> = (({ wrapperProps }) => {
             </div>
             <CardContainer>{cards}</CardContainer>
             {filter && cards.length === 0 && (
-              <Notice color="subtle">
+              <p className="notice subtle">
                 No documents found for <strong>{filter}</strong>
-              </Notice>
+              </p>
             )}
           </div>
           <div className="document-listing__footer vertically-center">