diff --git a/packages/extension/src/components/Icon.tsx b/packages/extension/src/components/Icon.tsx deleted file mode 100644 index 239538d0..00000000 --- a/packages/extension/src/components/Icon.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react" - -type Props = { - name: string - className?: string - style?: React.CSSProperties -} - -export function Icon(props: Props): JSX.Element { - const href = `#icon-${props.name}` - - const className = props.className ?? "h-full w-full" - - return ( - - - - ) -} diff --git a/packages/extension/src/components/OpenInTab.css b/packages/extension/src/components/OpenInTab.css index d58a048b..e82904cc 100644 --- a/packages/extension/src/components/OpenInTab.css +++ b/packages/extension/src/components/OpenInTab.css @@ -10,31 +10,20 @@ background: #f9f9f9; border-radius: 6px; border: none; - filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) - drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); + filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); display: flex; align-items: center; padding: 4px 8px; cursor: pointer; - color: var(--gray-400); - font-size: 12px; transition: color 250ms, background-color 250ms; } + .OpenInTab__button:hover { - color: var(--gray-700); background: #fff; } .OpenInTab__icon { - width: 20px; - height: 20px; - margin-right: 4px; - padding-bottom: 2px; - fill: var(--gray-400); - transition: fill 250ms; -} -.OpenInTab__icon:hover { - fill: var(--gray-700); + transition: color 250ms; } diff --git a/packages/extension/src/components/OpenInTab.tsx b/packages/extension/src/components/OpenInTab.tsx index 045faf5b..7abc2ef3 100644 --- a/packages/extension/src/components/OpenInTab.tsx +++ b/packages/extension/src/components/OpenInTab.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react" import { Ipc, BgCommand } from "@/services/ipc" -import { Icon } from "../components/Icon" +import { ExternalLink } from "lucide-react" import "./OpenInTab.css" let isPageUnloading = false @@ -47,10 +47,10 @@ export function OpenInTab(): JSX.Element {
diff --git a/packages/extension/src/components/menu/InvisibleItem.tsx b/packages/extension/src/components/menu/InvisibleItem.tsx index ba3b74ca..84a783ce 100644 --- a/packages/extension/src/components/menu/InvisibleItem.tsx +++ b/packages/extension/src/components/menu/InvisibleItem.tsx @@ -2,7 +2,7 @@ import React, { useRef, useEffect, useMemo } from "react" import { cn } from "@/lib/utils" import { ResultPopup } from "@/components/result/ResultPopup" -import { Icon } from "@/components/Icon" +import { RefreshCw, Check, AlertCircle } from "lucide-react" import { useContextMenu } from "@/hooks/useContextMenu" import { useSelectContext } from "@/hooks/useSelectContext" import { useCommandExecutor } from "@/hooks/useCommandExecutor" @@ -108,16 +108,15 @@ function IconWithState(props: ImageProps): JSX.Element { )} > {status === ExecState.EXECUTING && ( - )} {status === ExecState.SUCCESS && ( - + )} {status === ExecState.FAIL && ( - + )} ) diff --git a/packages/extension/src/components/menu/Menu.module.css b/packages/extension/src/components/menu/Menu.module.css index 90ae93d6..826f57a3 100644 --- a/packages/extension/src/components/menu/Menu.module.css +++ b/packages/extension/src/components/menu/Menu.module.css @@ -59,16 +59,16 @@ } .apiIconLoading { - fill: #666; + color: #666; cursor: wait; } .apiIconSuccess { - fill: var(--blue-500); + color: var(--blue-500); } .apiIconError { - fill: rgb(220 38 38); + color: rgb(220 38 38); } .iconWithState { @@ -100,8 +100,8 @@ .icon { width: 1.4em; height: 1.4em; - fill: var(--sc-font-color); - transition: fill 250ms; + color: var(--sc-font-color); + transition: color 250ms; } .menuImage svg { diff --git a/packages/extension/src/components/menu/Menu.tsx b/packages/extension/src/components/menu/Menu.tsx index b2270d87..2f63d035 100644 --- a/packages/extension/src/components/menu/Menu.tsx +++ b/packages/extension/src/components/menu/Menu.tsx @@ -10,7 +10,7 @@ import { ScrollAreaConditional } from "@/components/ui/scroll-area" import { STYLE, SIDE } from "@/const" import { TEST_IDS } from "@/testIds" import { MenuItem } from "./MenuItem" -import { Icon } from "@/components/Icon" +import { ChevronRight } from "lucide-react" import { HoverArea } from "@/components/menu/HoverArea" import { MenuImage } from "@/components/menu/MenuImage" import { popupContext } from "@/components/Popup" @@ -226,7 +226,7 @@ const MenuFolder = (props: { {!(folder.onlyIcon && isHorizontal) && ( {folder.title} )} - {!isHorizontal && } + {!isHorizontal && } )} {status === ExecState.EXECUTING && ( - )} {status === ExecState.SUCCESS && ( - + )} {status === ExecState.FAIL && ( - + )} ) diff --git a/packages/extension/src/components/result/ResultPopup.module.css b/packages/extension/src/components/result/ResultPopup.module.css index e07aee36..c41d3db1 100644 --- a/packages/extension/src/components/result/ResultPopup.module.css +++ b/packages/extension/src/components/result/ResultPopup.module.css @@ -14,7 +14,6 @@ cursor: pointer; transition: color, - fill, background ease-out 0.2s; border: none; border-radius: 6px; @@ -29,7 +28,6 @@ width: var(--icon-size); height: var(--icon-size); color: var(--gray-400); - fill: var(--gray-400); } &:hover { @@ -38,11 +36,10 @@ svg { color: var(--gray-600); - fill: var(--gray-600); } svg.buttonSuccess { - fill: var(--blue-500); + color: var(--blue-500); } } } diff --git a/packages/extension/src/components/result/ResultPopup.tsx b/packages/extension/src/components/result/ResultPopup.tsx index 01fa2bca..93fa3417 100644 --- a/packages/extension/src/components/result/ResultPopup.tsx +++ b/packages/extension/src/components/result/ResultPopup.tsx @@ -3,7 +3,7 @@ import { cn } from "@/lib/utils" import { Popover, PopoverContent, PopoverAnchor } from "@/components/ui/popover" import { useUserSettings } from "@/hooks/useSettings" -import { Icon } from "@/components/Icon" +import { X } from "lucide-react" import popupCss from "@/components/Popup.module.css" import { SIDE } from "@/const" import css from "./ResultPopup.module.css" @@ -40,7 +40,7 @@ export function ResultPopup(props: PopupProps) { className={cn(css.closeButton, css.resultPopupButton)} onClick={props.onClose} > - + )} diff --git a/packages/extension/src/components/result/TextStyle.tsx b/packages/extension/src/components/result/TextStyle.tsx index b1c3378f..8752754d 100644 --- a/packages/extension/src/components/result/TextStyle.tsx +++ b/packages/extension/src/components/result/TextStyle.tsx @@ -2,7 +2,7 @@ import { useState } from "react" import { sleep } from "@/lib/utils" import { ExecState } from "@/const" import css from "@/components/result/ResultPopup.module.css" -import { Icon } from "@/components/Icon" +import { Copy, Check } from "lucide-react" import { Tooltip } from "@/components/Tooltip" const toName = (str: string) => { @@ -45,9 +45,9 @@ export function TextStyle({ styles }: Props) { disabled={status === ExecState.SUCCESS} ref={setButtonElm} > - {status === ExecState.NONE && } + {status === ExecState.NONE && } {status === ExecState.SUCCESS && ( - + )} diff --git a/packages/extension/src/content_script.tsx b/packages/extension/src/content_script.tsx index 112dfcdb..70ddd7a6 100644 --- a/packages/extension/src/content_script.tsx +++ b/packages/extension/src/content_script.tsx @@ -1,7 +1,6 @@ import { createRoot } from "react-dom/client" import { APP_ID, isDebug, isE2E } from "./const" import { App } from "./components/App" -import icons from "./icons.svg?raw" import { initSentry, Sentry, ErrorBoundary } from "@/lib/sentry" import "@/services/connection" @@ -16,7 +15,6 @@ try { document.body.insertAdjacentElement("afterend", rootDom) const mode = isDebug || isE2E ? "open" : "closed" // 'open' for debugging and e2e const shadow = rootDom.attachShadow({ mode }) - shadow.innerHTML = icons const root = createRoot(shadow) root.render( @@ -41,7 +39,6 @@ try { if (!isDebug) { // Putting styles into ShadowDom - insertCss(shadow, "/assets/icons.css") insertCss(shadow, "/assets/content_script.css") } diff --git a/packages/extension/src/icons.svg b/packages/extension/src/icons.svg deleted file mode 100644 index 0bd6342e..00000000 --- a/packages/extension/src/icons.svg +++ /dev/null @@ -1,180 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/extension/src/options_page.tsx b/packages/extension/src/options_page.tsx index ce943198..6ca8cdba 100644 --- a/packages/extension/src/options_page.tsx +++ b/packages/extension/src/options_page.tsx @@ -1,7 +1,6 @@ import React from "react" import ReactDOM from "react-dom/client" import { Option } from "@/components/option/Option" -import icons from "./icons.svg?raw" import { getCurrentLocale } from "@/services/i18n" import { initSentry, Sentry, ErrorBoundary } from "@/lib/sentry" @@ -19,7 +18,6 @@ document.documentElement.lang = getCurrentLocale() const root = document.getElementById("root") if (root) { try { - root.insertAdjacentHTML("afterend", icons) ReactDOM.createRoot(root).render(