From 8bcfc9401fc12698cffc78a3c89a7b5d0142150f Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Mon, 21 Aug 2023 17:44:46 +0200
Subject: [PATCH 1/2] chore(website): reuse svgs from docosaurus

---
 .../src/components/OptionsSelector.tsx        | 17 ++++++++---
 .../src/components/inputs/CopyButton.tsx      |  8 ++---
 .../src/components/inputs/Text.module.css     | 30 ++++++++++++-------
 .../website/src/components/inputs/Text.tsx    | 27 ++++++++++-------
 packages/website/src/icons/check.svg          |  9 ------
 packages/website/src/icons/close.svg          |  9 ------
 packages/website/src/icons/copy.svg           |  9 ------
 packages/website/src/icons/delete.svg         |  9 ------
 packages/website/src/icons/search.svg         | 14 +++++++++
 9 files changed, 66 insertions(+), 66 deletions(-)
 delete mode 100644 packages/website/src/icons/check.svg
 delete mode 100644 packages/website/src/icons/close.svg
 delete mode 100644 packages/website/src/icons/copy.svg
 delete mode 100644 packages/website/src/icons/delete.svg
 create mode 100644 packages/website/src/icons/search.svg

diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
index 0233d83f75ee..698921bdb1da 100644
--- a/packages/website/src/components/OptionsSelector.tsx
+++ b/packages/website/src/components/OptionsSelector.tsx
@@ -2,12 +2,12 @@ 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 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';
@@ -16,6 +16,7 @@ import InputLabel from './layout/InputLabel';
 import { createMarkdown, createMarkdownParams } from './lib/markdown';
 import { fileTypes } from './options';
 import type { ConfigModel } from './types';
+import CheckIcon from '@theme/Icon/Success';
 
 export interface OptionsSelectorParams {
   readonly state: ConfigModel;
@@ -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 ? (
+              <CheckIcon 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 ? (
+              <CheckIcon 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
index e4879f14be97..79716fe09b37 100644
--- 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
index 31f898294aa4..7c1a03e0bb82 100644
--- 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
index 11d7b744b8a7..71f921fc67ec 100644
--- 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
deleted file mode 100644
index 7835588c4785..000000000000
--- a/packages/website/src/icons/check.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  width="18"
-  height="18"
-  fill="currentColor"
->
-  <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
-</svg>
diff --git a/packages/website/src/icons/close.svg b/packages/website/src/icons/close.svg
deleted file mode 100644
index 1a411b11748e..000000000000
--- a/packages/website/src/icons/close.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  width="22"
-  height="22"
-  fill="currentColor"
->
-  <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-</svg>
diff --git a/packages/website/src/icons/copy.svg b/packages/website/src/icons/copy.svg
deleted file mode 100644
index 6625354aa3fe..000000000000
--- a/packages/website/src/icons/copy.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  width="18"
-  height="18"
-  fill="currentColor"
->
-  <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
-</svg>
diff --git a/packages/website/src/icons/delete.svg b/packages/website/src/icons/delete.svg
deleted file mode 100644
index fa2ca3423140..000000000000
--- a/packages/website/src/icons/delete.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  width="18"
-  height="18"
-  fill="currentColor"
->
-  <path d="M9.3 2.2v2h5.4v-2zM4 5.5v2h1.3v14h13.4v-14h1.4v-2zm3.3 2h9.4v12H7.3zm1.7 2v8h2v-8zm4 0v8h2v-8z"/>
-</svg>
diff --git a/packages/website/src/icons/search.svg b/packages/website/src/icons/search.svg
new file mode 100644
index 000000000000..1942fb4edec4
--- /dev/null
+++ b/packages/website/src/icons/search.svg
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 20 20"
+>
+  <path
+    d="m14.39 14.39 4.08 4.08-4.08-4.08A7.53 7.53 0 1 1 3.73 3.73 7.53 7.53 0 0 1 14.4 14.4z"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+</svg>

From 85b50ba97c177de167e3fff36e735be5e042e463 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Mon, 21 Aug 2023 19:50:41 +0200
Subject: [PATCH 2/2] fix; correct linting error after merge

---
 packages/website/src/components/OptionsSelector.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
index 698921bdb1da..00870a850c35 100644
--- a/packages/website/src/components/OptionsSelector.tsx
+++ b/packages/website/src/components/OptionsSelector.tsx
@@ -4,6 +4,7 @@ import {
 } from '@docusaurus/theme-common';
 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';
@@ -16,7 +17,6 @@ import InputLabel from './layout/InputLabel';
 import { createMarkdown, createMarkdownParams } from './lib/markdown';
 import { fileTypes } from './options';
 import type { ConfigModel } from './types';
-import CheckIcon from '@theme/Icon/Success';
 
 export interface OptionsSelectorParams {
   readonly state: ConfigModel;
@@ -99,7 +99,7 @@ function OptionsSelectorContent({
         <ActionLabel name="Copy link" onClick={copyLinkToClipboard}>
           <Tooltip open={copyLink} text="Copied">
             {copyLink ? (
-              <CheckIcon width="13.5" height="13.5" />
+              <SuccessIcon width="13.5" height="13.5" />
             ) : (
               <CopyIcon width="13.5" height="13.5" />
             )}
@@ -108,7 +108,7 @@ function OptionsSelectorContent({
         <ActionLabel name="Copy Markdown" onClick={copyMarkdownToClipboard}>
           <Tooltip open={copyMarkdown} text="Copied">
             {copyMarkdown ? (
-              <CheckIcon width="13.5" height="13.5" />
+              <SuccessIcon width="13.5" height="13.5" />
             ) : (
               <CopyIcon width="13.5" height="13.5" />
             )}