Fascinated/Vencord
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

PlatformIndicators: Fix weird spacing in badges

Browse Source
This commit is contained in:
V 2023-05-12 03:54:57 +02:00
parent ade31f993b
commit 7dcd32e838
No known key found for this signature in database
GPG Key ID: A1DC0CFB5615D905
1 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/plugins/platformIndicators.tsx
View File

@ -30,7 +30,7 @@ import { User } from "discord-types/general";
const SessionsStore = findStoreLazy("SessionsStore"); const SessionsStore = findStoreLazy("SessionsStore");
function Icon(path: string, viewBox = "0 0 24 24") { function Icon(path: string, viewBox = "0 0 24 24") {
return ({ color, tooltip, wantMargin }: { color: string; tooltip: string; wantMargin: boolean; }) => ( return ({ color, tooltip }: { color: string; tooltip: string; }) => (
<Tooltip text={tooltip} > <Tooltip text={tooltip} >
{(tooltipProps: any) => ( {(tooltipProps: any) => (
<svg <svg
@ -39,12 +39,6 @@ function Icon(path: string, viewBox = "0 0 24 24") {
width="20" width="20"
viewBox={viewBox} viewBox={viewBox}
fill={color} fill={color}
style={{
marginLeft: wantMargin ? 4 : 0,
verticalAlign: "top",
position: "relative",
top: wantMargin ? 1 : 0,
}}
> >
<path d={path} /> <path d={path} />
</svg> </svg>
@ -63,11 +57,11 @@ type Platform = keyof typeof Icons;
const getStatusColor = findByCodeLazy(".TWITCH", ".STREAMING", ".INVISIBLE"); const getStatusColor = findByCodeLazy(".TWITCH", ".STREAMING", ".INVISIBLE");
const PlatformIcon = ({ platform, status, wantMargin }: { platform: Platform, status: string; wantMargin: boolean; }) => { const PlatformIcon = ({ platform, status }: { platform: Platform, status: string; }) => {
const tooltip = platform[0].toUpperCase() + platform.slice(1); const tooltip = platform[0].toUpperCase() + platform.slice(1);
const Icon = Icons[platform] ?? Icons.desktop; const Icon = Icons[platform] ?? Icons.desktop;
return <Icon color={`var(--${getStatusColor(status)}`} tooltip={tooltip} wantMargin={wantMargin} />; return <Icon color={`var(--${getStatusColor(status)}`} tooltip={tooltip} />;
}; };
const getStatus = (id: string): Record<Platform, string> => PresenceStore.getState()?.clientStatuses?.[id]; const getStatus = (id: string): Record<Platform, string> => PresenceStore.getState()?.clientStatuses?.[id];
@ -105,14 +99,26 @@ const PlatformIndicator = ({ user, wantMargin = true }: { user: User; wantMargin
key={platform} key={platform}
platform={platform as Platform} platform={platform as Platform}
status={status} status={status}
wantMargin={wantMargin}
/> />
)); ));
if (!icons.length) return null; if (!icons.length) return null;
return ( return (
<span className="vc-platform-indicator"> <span
className="vc-platform-indicator"
style={{
display: "inline-flex",
justifyContent: "center",
marginLeft: wantMargin ? 4 : 0,
verticalAlign: "top",
position: "relative",
top: wantMargin ? 1 : 0,
padding: !wantMargin ? 2 : 0,
gap: 4
}}
>
{icons} {icons}
</span> </span>
); );