diff --git a/src/renderer/components/+extensions/installed-extensions.tsx b/src/renderer/components/+extensions/installed-extensions.tsx index b45c39d6fd..3dca23016a 100644 --- a/src/renderer/components/+extensions/installed-extensions.tsx +++ b/src/renderer/components/+extensions/installed-extensions.tsx @@ -8,6 +8,7 @@ import { Spinner } from "../spinner"; import { ExtensionInstallationStateStore } from "./extension-install.store"; import { cssNames } from "../../utils"; import { observer } from "mobx-react"; +import type { Column, Row } from "react-table"; import type { LensExtensionId } from "../../../extensions/lens-extension"; interface Props { @@ -44,12 +45,21 @@ export const InstalledExtensions = observer(({ extensions, uninstall, enable, di (extension: InstalledExtension) => extension.manifest.version, ]; - const columns = useMemo( + const columns: Column[] = useMemo( () => [ { Header: "Name", accessor: "extension", - width: 200 + width: 200, + sortType: (rowA: Row, rowB: Row) => { // Custom sorting for extension name + const nameA = extensions[rowA.index].manifest.name; + const nameB = extensions[rowB.index].manifest.name; + + if (nameA > nameB) return -1; + if (nameB > nameA) return 1; + + return 0; + }, }, { Header: "Version", diff --git a/src/renderer/components/+extensions/notice.module.css b/src/renderer/components/+extensions/notice.module.css index 5cc5260092..81b90c48ad 100644 --- a/src/renderer/components/+extensions/notice.module.css +++ b/src/renderer/components/+extensions/notice.module.css @@ -21,7 +21,7 @@ .notice { @apply p-8 flex flex-col gap-2 mb-14 mt-3 rounded-lg; - background-color: var(--noticeBackground); + background-color: var(--inputControlBackground); border: 1px solid var(--boxShadow); color: var(--textColorTertiary); } \ No newline at end of file diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx index 74154505e3..74971ccaea 100644 --- a/src/renderer/components/hotbar/hotbar-icon.tsx +++ b/src/renderer/components/hotbar/hotbar-icon.tsx @@ -32,6 +32,7 @@ import { ConfirmDialog } from "../confirm-dialog"; import { Icon } from "../icon"; import { Menu, MenuItem } from "../menu"; import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip"; +import { observer } from "mobx-react"; interface Props extends DOMAttributes { uid: string; @@ -84,8 +85,8 @@ function getNameParts(name: string): string[] { return name.split(/@+/); } -export function HotbarIcon(props: Props) { - const { uid, title, className, source, active, remove, disabled, menuItems, onMenuOpen, children, ...rest } = props; +export const HotbarIcon = observer(({ menuItems = [], ...props }: Props) => { + const { uid, title, className, source, active, remove, disabled, onMenuOpen, children, ...rest } = props; const id = `hotbarIcon-${uid}`; const [menuOpen, setMenuOpen] = useState(false); @@ -150,8 +151,4 @@ export function HotbarIcon(props: Props) { ); -} - -HotbarIcon.defaultProps = { - menuItems: [] -}; +}); diff --git a/src/renderer/themes/lens-dark.json b/src/renderer/themes/lens-dark.json index 8eff972d9b..f96eb81453 100644 --- a/src/renderer/themes/lens-dark.json +++ b/src/renderer/themes/lens-dark.json @@ -129,7 +129,6 @@ "navSelectedBackground": "#262b2e", "navHoverColor": "#dcddde", "hrColor": "#ffffff0f", - "tooltipBackground": "#18191c", - "noticeBackground": "#00000045" + "tooltipBackground": "#18191c" } } diff --git a/src/renderer/themes/lens-light.json b/src/renderer/themes/lens-light.json index a19d4fac83..d3b5938de3 100644 --- a/src/renderer/themes/lens-light.json +++ b/src/renderer/themes/lens-light.json @@ -131,7 +131,6 @@ "navSelectedBackground": "#ffffff", "navHoverColor": "#2e3135", "hrColor": "#06060714", - "tooltipBackground": "#ffffff", - "noticeBackground": "#e3e5e8" + "tooltipBackground": "#ffffff" } }