typescript-eslint · bradzacher · Sep 7, 2023 · Aug 21, 2023 · Aug 21, 2023
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
@@ -2,12 +2,13 @@ import {
   NavbarSecondaryMenuFiller,
   useWindowSize,
 } from '@docusaurus/theme-common';
-import Checkbox from '@site/src/components/inputs/Checkbox';
-import CopyIcon from '@site/src/icons/copy.svg';
+import CopyIcon from '@theme/Icon/Copy';
 import IconExternalLink from '@theme/Icon/ExternalLink';
+import SuccessIcon from '@theme/Icon/Success';
 import React, { useCallback } from 'react';
 
 import { useClipboard } from '../hooks/useClipboard';
+import Checkbox from './inputs/Checkbox';
 import Dropdown from './inputs/Dropdown';
 import Tooltip from './inputs/Tooltip';
 import ActionLabel from './layout/ActionLabel';
@@ -97,12 +98,20 @@ function OptionsSelectorContent({
       <Expander label="Actions">
         <ActionLabel name="Copy link" onClick={copyLinkToClipboard}>
           <Tooltip open={copyLink} text="Copied">
-            <CopyIcon width="13.5" height="13.5" />
+            {copyLink ? (
+              <SuccessIcon width="13.5" height="13.5" />
+            ) : (
+              <CopyIcon width="13.5" height="13.5" />
+            )}
           </Tooltip>
         </ActionLabel>
         <ActionLabel name="Copy Markdown" onClick={copyMarkdownToClipboard}>
           <Tooltip open={copyMarkdown} text="Copied">
-            <CopyIcon width="13.5" height="13.5" />
+            {copyMarkdown ? (
+              <SuccessIcon width="13.5" height="13.5" />
+            ) : (
+              <CopyIcon width="13.5" height="13.5" />
+            )}
           </Tooltip>
         </ActionLabel>
         <ActionLabel name="Report as Issue" onClick={openIssue}>

diff --git a/packages/website/src/components/inputs/CopyButton.tsx b/packages/website/src/components/inputs/CopyButton.tsx
@@ -1,5 +1,5 @@
-import CheckIcon from '@site/src/icons/check.svg';
-import CopyIcon from '@site/src/icons/copy.svg';
+import CopyIcon from '@theme/Icon/Copy';
+import CheckIcon from '@theme/Icon/Success';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -41,8 +41,8 @@ function CopyButton({ value, className }: CopyButtonProps): React.JSX.Element {
           aria-label={!on ? 'Copy code to clipboard' : 'Copied'}
           className={clsx(styles.copyButton, className, 'button')}
         >
-          <CopyIcon className={styles.copyIcon} />
-          <CheckIcon className={styles.checkIcon} />
+          <CopyIcon width="18" height="18" className={styles.copyIcon} />
+          <CheckIcon width="18" height="18" className={styles.checkIcon} />
         </button>
       </Tooltip>
     </div>

diff --git a/packages/website/src/components/inputs/Text.module.css b/packages/website/src/components/inputs/Text.module.css
@@ -1,28 +1,36 @@
 .textInput {
+  display: flex;
+  align-items: center;
   background-color: var(--ifm-color-emphasis-200);
   border: 1px solid var(--ifm-color-emphasis-100);
+  padding: 0 0.5rem;
+  cursor: text;
+  flex: 1;
+}
+
+.textInput:focus-within {
+  border-color: var(--ifm-color-primary);
+}
+
+.textInput input {
+  outline: none;
+  background-color: var(--ifm-color-emphasis-200);
+  border: transparent;
   color: var(--ifm-font-color-secondary);
   transition: border 0.3s ease;
   cursor: text;
   display: inline-block;
   height: 2rem;
-  padding: 0 0.5rem;
+  padding: 0;
   font-size: 0.9rem;
   border-radius: 0.2rem;
   flex: 1;
 }
 
-.textInput[type='search'] {
-  padding-left: 2.25rem;
-  background: var(--ifm-color-emphasis-200) var(--ifm-navbar-search-input-icon)
-    no-repeat 0.75rem center / 1rem 1rem;
-}
-
-.textInput::placeholder {
+.textInput input::placeholder {
   color: var(--ifm-color-emphasis-700);
 }
 
-.textInput:focus {
-  outline: none;
-  border-color: var(--ifm-color-primary);
+.textInput svg {
+  padding-right: 0.5rem;
 }
diff --git a/packages/website/src/components/inputs/Text.tsx b/packages/website/src/components/inputs/Text.tsx
@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import SearchIcon from '@site/src/icons/search.svg';
 import React from 'react';
 
 import styles from './Text.module.css';
@@ -16,16 +16,21 @@ export interface DropdownProps {
 const Text = React.forwardRef<HTMLInputElement, DropdownProps>(
   (props, ref): React.JSX.Element => {
     return (
-      <input
-        value={props.value}
-        onChange={(e): void => props.onChange(e.target.value)}
-        name={props.name}
-        className={clsx(styles.textInput, props.className)}
-        type={props.type ?? 'text'}
-        autoComplete="off"
-        placeholder={props.placeholder}
-        ref={ref}
-      />
+      <>
+        <label className={styles.textInput}>
+          {props.type === 'search' && <SearchIcon />}
+          <input
+            value={props.value}
+            onChange={(e): void => props.onChange(e.target.value)}
+            name={props.name}
+            className={props.className}
+            type={props.type ?? 'text'}
+            autoComplete="off"
+            placeholder={props.placeholder}
+            ref={ref}
+          />
+        </label>
+      </>
     );
   },
 );

diff --git a/packages/website/src/icons/check.svg b/packages/website/src/icons/check.svg
diff --git a/packages/website/src/icons/close.svg b/packages/website/src/icons/close.svg
diff --git a/packages/website/src/icons/copy.svg b/packages/website/src/icons/copy.svg
diff --git a/packages/website/src/icons/delete.svg b/packages/website/src/icons/delete.svg
diff --git a/packages/website/src/icons/search.svg b/packages/website/src/icons/search.svg