PlatformIndicators: Fix weird spacing in badges
This commit is contained in:
parent
ade31f993b
commit
7dcd32e838
@ -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>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user