+
+ {" "}
+
+
+
+
+
+ props.user.removeFriend()}>
+
+
+
+
+
+
+
+
+
+
-
+
(
@@ -103,17 +105,9 @@ export function ProfileActions(props: {
const Actions = styled("div", {
base: {
display: "flex",
- gap: "var(--gap-md)",
+ minWidth: "fit-content",
+ gap: "var(--gap-sm)",
justifyContent: "flex-end",
- },
- variants: {
- width: {
- 3: {
- gridColumn: "1 / 4",
- },
- 2: {
- gridColumn: "1 / 3",
- },
- },
+ alignItems: "center",
},
});
diff --git a/packages/client/components/ui/components/features/profiles/ProfileBadges.tsx b/packages/client/components/ui/components/features/profiles/ProfileBadges.tsx
index 5e6cbf6cc..79ca8d27b 100644
--- a/packages/client/components/ui/components/features/profiles/ProfileBadges.tsx
+++ b/packages/client/components/ui/components/features/profiles/ProfileBadges.tsx
@@ -1,7 +1,7 @@
import { BiSolidShield } from "solid-icons/bi";
import { Show } from "solid-js";
-import { Trans, useLingui } from "@lingui-solid/solid/macro";
+import { useLingui } from "@lingui-solid/solid/macro";
import { User, UserBadges } from "stoat.js";
import { styled } from "styled-system/jsx";
@@ -15,150 +15,137 @@ import badgePaw from "../../../../../public/assets/badges/paw.svg";
import badgeRaccoon from "../../../../../public/assets/badges/raccoon.svg";
import badgeSupporter from "../../../../../public/assets/badges/supporter.svg";
import badgeTranslator from "../../../../../public/assets/badges/translator.svg";
-import { Text } from "../../design";
-
-import { ProfileCard } from "./ProfileCard";
export function ProfileBadges(props: { user: User }) {
const { t } = useLingui();
return (
-
-
- Badges
-
-
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
-
- 
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- 
-
-
+
+
+
+
- 
-
-
- 
-
-
- 
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
@@ -166,12 +153,15 @@ export function ProfileBadges(props: { user: User }) {
const BadgeRow = styled("div", {
base: {
gap: "var(--gap-md)",
+ padding: "var(--gap-sm) var(--gap-md)",
display: "flex",
- flexWrap: "wrap",
+ overflowX: "scroll",
+ scrollbar: "hidden",
+ flexShrink: 5,
- "& img, & svg": {
- width: "24px",
- height: "24px",
+ "& img, & svg, & span": {
+ width: "16px",
+ height: "16px",
aspectRatio: "1/1",
},
},
diff --git a/packages/client/components/ui/components/features/profiles/ProfileBanner.tsx b/packages/client/components/ui/components/features/profiles/ProfileBanner.tsx
index 3af500389..181207bf6 100644
--- a/packages/client/components/ui/components/features/profiles/ProfileBanner.tsx
+++ b/packages/client/components/ui/components/features/profiles/ProfileBanner.tsx
@@ -4,8 +4,9 @@ import { ServerMember, User } from "stoat.js";
import { css } from "styled-system/css";
import { styled } from "styled-system/jsx";
-import { Avatar, Ripple, UserStatus, typography } from "../../design";
-import { Row } from "../../layout";
+import { Profile } from ".";
+import { Avatar, Ripple, typography } from "../../design";
+import { Column, Row } from "../../layout";
export function ProfileBanner(props: {
user: User;
@@ -28,34 +29,36 @@ export function ProfileBanner(props: {
-
- }
- />
-
-
-
- {props.member?.displayName ?? props.user.displayName}
+
+
+
+
+
+
+ {props.member?.displayName ?? props.user.displayName}
+
+
+
+ {props.user.username}
+
+ #{props.user.discriminator}
+
-
-
- {props.user.username}
-
- #{props.user.discriminator}
-
-
-
-
+
+
+
+
);
}
@@ -67,8 +70,8 @@ const Banner = styled("div", {
userSelect: "none",
- height: "120px",
- padding: "var(--gap-lg)",
+ height: "128px",
+ padding: "var(--gap-md) var(--gap-lg)",
display: "flex",
flexDirection: "column",
diff --git a/packages/client/components/ui/components/features/profiles/ProfileBio.tsx b/packages/client/components/ui/components/features/profiles/ProfileBio.tsx
index b983034e6..6ce5e663f 100644
--- a/packages/client/components/ui/components/features/profiles/ProfileBio.tsx
+++ b/packages/client/components/ui/components/features/profiles/ProfileBio.tsx
@@ -9,7 +9,6 @@ import { Ripple, Text, typography } from "../../design";
import { ProfileCard } from "./ProfileCard";
interface Props {
- full?: boolean;
content?: string;
onClick?: () => void;
}
@@ -23,8 +22,6 @@ export function ProfileBio(props: Props) {
diff --git a/packages/client/components/ui/components/features/profiles/ProfileCard.tsx b/packages/client/components/ui/components/features/profiles/ProfileCard.tsx
index fc9cfb083..f3ab10023 100644
--- a/packages/client/components/ui/components/features/profiles/ProfileCard.tsx
+++ b/packages/client/components/ui/components/features/profiles/ProfileCard.tsx
@@ -6,7 +6,7 @@ export const ProfileCard = styled("div", {
position: "relative",
minWidth: 0,
- height: "100%",
+ height: "fit-content",
width: "100%",
userSelect: "none",
@@ -21,31 +21,10 @@ export const ProfileCard = styled("div", {
flexDirection: "column",
},
variants: {
- width: {
- 1: {
- overflow: "hidden",
- aspectRatio: "1/1",
- },
- 2: {
- gridColumn: "1 / 3",
- },
- 3: {
- gridColumn: "1 / 4",
- },
- },
- constraint: {
- half: {
- overflow: "hidden",
- aspectRatio: "2/1",
- },
- },
isLink: {
true: {
cursor: "pointer",
},
},
},
- defaultVariants: {
- width: 1,
- },
});
diff --git a/packages/client/components/ui/components/features/profiles/ProfileRoles.tsx b/packages/client/components/ui/components/features/profiles/ProfileRoles.tsx
index 0e82562fb..a43eb6efd 100644
--- a/packages/client/components/ui/components/features/profiles/ProfileRoles.tsx
+++ b/packages/client/components/ui/components/features/profiles/ProfileRoles.tsx
@@ -1,68 +1,115 @@
import { For, Show } from "solid-js";
-import { Trans } from "@lingui-solid/solid/macro";
import { ServerMember } from "stoat.js";
import { styled } from "styled-system/jsx";
import { useModals } from "@revolt/modal";
-import { Ripple, Text, typography } from "../../design";
+import { Trans, useLingui } from "@lingui-solid/solid/macro";
+import { useState } from "@revolt/state";
+import { BiSolidPlusCircle } from "solid-icons/bi";
+import { typography } from "../../design";
import { dismissFloatingElements } from "../../floating";
import { Row } from "../../layout";
-
-import { ProfileCard } from "./ProfileCard";
+import { ColouredText } from "../../utils";
export function ProfileRoles(props: { member?: ServerMember }) {
const { openModal } = useModals();
+ const { t } = useLingui();
+ const state = useState();
function openRoles() {
openModal({ type: "user_profile_roles", member: props.member! });
dismissFloatingElements();
}
+ //TODO: Make this not a button
return (
-
-
-
+
+
+
+
+
+
+ Add Role
+
+
+
+
+ {(role) => (
+
+ {/* There is probably a better to do this if ... else ... */}
+
+ navigator.clipboard.writeText(role.id)}
+ cursor="pointer"
+ >
+
+
+ {role.name}
+
+
+
+
-
- Roles
-
-
-
- {(role) => (
-
- {role.name}
-
-
- )}
-
-
-
+
+
+
+ {role.name}
+
+
+
+
+ )}
+
+
);
}
const Role = styled("span", {
base: {
- flexGrow: 1,
+ display: "flex",
+ background: "var(--md-sys-color-surface-container-low)",
+ gap: "var(--gap-sm)",
+ alignItems: "center",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
+ userSelect: "none",
+ padding: "var(--gap-sm) var(--gap-md)",
+ borderRadius: "full",
+ height: "full",
...typography.raw({ class: "label" }),
},
});
-const RoleIcon = styled("div", {
+const RoleList = styled("div", {
base: {
- width: "8px",
- height: "8px",
- aspectRatio: "1/1",
- borderRadius: "100%",
+ display: "flex",
+ alignItems: "stretch",
+ gap: "var(--gap-sm)",
+ overflowX: "scroll",
+ scrollbar: "hidden",
},
});
diff --git a/packages/client/components/ui/components/features/profiles/ProfileStatus.tsx b/packages/client/components/ui/components/features/profiles/ProfileStatus.tsx
index e8b00e43a..71ab469f8 100644
--- a/packages/client/components/ui/components/features/profiles/ProfileStatus.tsx
+++ b/packages/client/components/ui/components/features/profiles/ProfileStatus.tsx
@@ -1,36 +1,30 @@
import { Show } from "solid-js";
-import { Trans, useLingui } from "@lingui-solid/solid/macro";
+import { useLingui } from "@lingui-solid/solid/macro";
import { User } from "stoat.js";
import { styled } from "styled-system/jsx";
-import { Text, typography } from "../../design";
-
-import { ProfileCard } from "./ProfileCard";
+import { typography, UserStatus } from "../../design";
export function ProfileStatus(props: { user: User }) {
const { t } = useLingui();
return (
-
-
- Status
-
-
- {props.user.statusMessage((s) =>
- s === "Online"
- ? t`Online`
- : s === "Busy"
- ? t`Busy`
- : s === "Focus"
- ? t`Focus`
- : s === "Idle"
- ? t`Idle`
- : t`Offline`,
- )}
-
-
+
+
+ {props.user.statusMessage((s) =>
+ s === "Online"
+ ? t`Online`
+ : s === "Busy"
+ ? t`Busy`
+ : s === "Focus"
+ ? t`Focus`
+ : s === "Idle"
+ ? t`Idle`
+ : t`Offline`,
+ )}
+
);
}
@@ -38,6 +32,9 @@ export function ProfileStatus(props: { user: User }) {
const Status = styled("span", {
base: {
...typography.raw(),
+ display: "flex",
+ alignItems: "center",
+ gap: "var(--gap-md)",
userSelect: "text",
},
});
diff --git a/packages/client/components/ui/components/floating/UserCard.tsx b/packages/client/components/ui/components/floating/UserCard.tsx
index 9a76c0ffa..90f6a0536 100644
--- a/packages/client/components/ui/components/floating/UserCard.tsx
+++ b/packages/client/components/ui/components/floating/UserCard.tsx
@@ -52,7 +52,7 @@ export function UserCard(
e.stopImmediatePropagation();
}}
>
-
+
-
-
-
-
+
+
-
+
+
);
}
-const Grid = styled("div", {
+const ProfileContents = styled("div", {
base: {
- display: "grid",
+ display: "flex",
+ flexDirection: "column",
gap: "var(--gap-md)",
padding: "var(--gap-md)",
- gridTemplateColumns: "repeat(2, 1fr)",
+ },
+});
+
+const BadgeAndActionsRow = styled("div", {
+ base: {
+ display: "flex",
+ gap: "var(--gap-sm)",
+ justifyContent: "space-between",
+ alignItems: "center",
+ padding: "var(--gap-xs) 0",
},
});