diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx index c3905d9ac..d1cc7a67f 100644 --- a/src/components/Icons.tsx +++ b/src/components/Icons.tsx @@ -16,6 +16,8 @@ * along with this program. If not, see . */ +import "./iconStyles.css"; + import { classes } from "@utils/misc"; import type { PropsWithChildren } from "react"; @@ -81,3 +83,34 @@ export function CopyIcon(props: IconProps) { ); } + +/** + * Discord's open external icon, as seen in the user profile connections + */ +export function OpenExternalIcon(props: IconProps) { + return ( + + + + ); +} + +export function ImageIcon(props: IconProps) { + return ( + + + + ); +} diff --git a/src/components/iconStyles.css b/src/components/iconStyles.css new file mode 100644 index 000000000..9f2ef8e8b --- /dev/null +++ b/src/components/iconStyles.css @@ -0,0 +1,3 @@ +.vc-open-external-icon { + transform: rotate(45deg); +} diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx index 7076085a8..f4c7c814a 100644 --- a/src/plugins/spotifyControls/PlayerComponent.tsx +++ b/src/plugins/spotifyControls/PlayerComponent.tsx @@ -20,6 +20,7 @@ import "./spotifyStyles.css"; import ErrorBoundary from "@components/ErrorBoundary"; import { Flex } from "@components/Flex"; +import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons"; import { Link } from "@components/Link"; import { debounce } from "@utils/debounce"; import { classes, copyWithToast } from "@utils/misc"; @@ -88,12 +89,14 @@ function CopyContextMenu({ name, path }: { name: string; path: string; }) { id={copyId} label={`Copy ${name} Link`} action={() => copyWithToast("https://open.spotify.com" + path)} + icon={LinkIcon} /> SpotifyStore.openExternal(path)} + icon={OpenExternalIcon} /> ); @@ -221,6 +224,7 @@ function AlbumContextMenu({ track }: { track: Track; }) { id="open-album" label="Open Album" action={() => SpotifyStore.openExternal(`/album/${track.album.id}`)} + icon={OpenExternalIcon} /> (Vencord.Plugins.plugins.ViewIcons as any).openImage(track.album.image.url)} + icon={ImageIcon} />