updated presence indicators

src/components/Avatar.tsx

@@ -11,26 +11,26 @@ import Floating from "./floating/Floating";
 import FloatingTrigger from "./floating/FloatingTrigger";
 
 const Wrapper = styled(Container)<{ size: number; hasClick?: boolean }>`
-	width: ${(props) => props.size}px;
-	height: ${(props) => props.size}px;
-	position: relative;
 	background-color: transparent;
-
-	&:hover {
-		text-decoration: underline;
-		cursor: ${(props) => (props.hasClick ? "pointer" : "default")};
-	}
+	display: flex;
+	flex-direction: column;
 `;
 
-const StatusDot = styled.span<{ color: string; width?: number; height?: number }>`
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	background-color: ${(props) => props.color};
+const StatusDot = styled.i<{ color: string; size?: number; left?: number; bottom?: number }>`
 	border-radius: 50%;
-	border: 2px solid var(--background-primary);
-	width: ${(props) => props.width ?? 10}px;
-	height: ${(props) => props.height ?? 10}px;
+	border: 0.3rem solid var(--background-secondary);
+	background-color: ${(props) => props.color};
+	height: ${(props) => props.size ?? 16}px;
+	width: ${(props) => props.size ?? 16}px;
+	position: relative;
+	bottom: ${(props) => props.bottom ?? 16}px;
+	left: ${(props) => props.left ?? 20}px;
+	display: block;
+`;
+
+const InnerWrapper = styled.div<{ width?: number; height?: number }>`
+	height: ${(props) => props.height ?? 40}px;
+	width: ${(props) => props.width ?? 40}px;
 `;
 
 function Yes(onClick: React.MouseEventHandler<HTMLDivElement>) {
@@ -47,10 +47,12 @@ interface Props {
 	popoutPlacement?: "left" | "right" | "top" | "bottom";
 	presence?: Presence;
 	statusDotStyle?: {
-		width?: number;
-		height?: number;
+		size?: number;
+		left?: number;
+		bottom?: number;
 	};
 	showPresence?: boolean;
+	innerWrapperSize?: number;
 }
 
 function Avatar(props: Props) {
@@ -74,21 +76,23 @@ function Avatar(props: Props) {
 		>
 			<Base>
 				<Wrapper size={props.size ?? 32} style={props.style} ref={ref} hasClick={props.onClick !== null}>
-					<img
-						style={{
-							borderRadius: "50%",
-						}}
-						src={user.avatarUrl}
-						width={props.size ?? 32}
-						height={props.size ?? 32}
-						loading="eager"
-					/>
-					{props.showPresence && (
-						<StatusDot
-							color={app.theme.getStatusColor(props.presence?.status ?? PresenceUpdateStatus.Offline)}
-							{...props.statusDotStyle}
+					<InnerWrapper width={props.innerWrapperSize} height={props.innerWrapperSize}>
+						<img
+							style={{
+								borderRadius: "50%",
+							}}
+							src={user.avatarUrl}
+							width={props.size ?? 32}
+							height={props.size ?? 32}
+							loading="eager"
 						/>
-					)}
+						{props.showPresence && (
+							<StatusDot
+								color={app.theme.getStatusColor(props.presence?.status ?? PresenceUpdateStatus.Offline)}
+								{...props.statusDotStyle}
+							/>
+						)}
+					</InnerWrapper>
 				</Wrapper>
 			</Base>
 		</Floating>

src/components/UserPanel.tsx

@@ -70,6 +70,7 @@ const ActionsWrapper = styled.div`
 
 function UserPanel() {
 	const app = useAppStore();
+	const presence = app.presences.get(app.account!.id);
 
 	const openSettingsModal = () => {
 		modalController.push({
@@ -88,7 +89,7 @@ function UserPanel() {
 			<Section>
 				<Container>
 					<AvatarWrapper>
-						<Avatar popoutPlacement="top" onClick={null} />
+						<Avatar popoutPlacement="top" onClick={null} showPresence presence={presence} />
 						<Name>
 							<Username>{app.account?.username}</Username>
 							<Subtext>#{app.account?.discriminator}</Subtext>

src/components/floating/UserProfilePopout.tsx

@@ -22,9 +22,7 @@ const Container = styled.div`
 	width: 340px;
 	max-height: 600px;
 	overflow: hidden;
-	box-shadow:
-		0 0 0 1px rgb(0 0 0 / 15%),
-		0 4px 8px rgb(0 0 0 / 15%);
+	box-shadow: 0 0 0 1px rgb(0 0 0 / 15%), 0 4px 8px rgb(0 0 0 / 15%);
 	color: var(--text);
 `;
 
@@ -185,10 +183,12 @@ function UserProfilePopout({ user, member }: Props) {
 					user={user}
 					presence={presence}
 					statusDotStyle={{
-						width: 16,
-						height: 16,
+						size: 25,
+						left: 55,
+						bottom: 28,
 					}}
 					showPresence
+					innerWrapperSize={92}
 				/>
 			</Top>
 			<Bottom>