diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index 5ac68fa0..1db3b2d7 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -1,10 +1,15 @@
.list {
- padding: 16px;
+ padding: 0 20px 20px 20px;
user-select: none;
overflow-y: scroll;
.overline {
display: flex;
+ position: sticky;
+ top: 0;
+ background: var(--primary-background);
+ padding: 8px 0;
+ z-index: 10;
}
&[data-empty="true"] {
@@ -67,7 +72,7 @@
display: flex;
gap: 12px;
- > div {
+ > a {
height: 40px;
width: 40px;
diff --git a/src/pages/friends/Friend.tsx b/src/pages/friends/Friend.tsx
index 6a6bbdc3..dd51b263 100644
--- a/src/pages/friends/Friend.tsx
+++ b/src/pages/friends/Friend.tsx
@@ -29,18 +29,18 @@ export function Friend({ user }: Props) {
subtext =
actions.push(
<>
-
-
+
+
-
-
-
-
+
+
+
+
-
-
+
+
>
);
}
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index c331f34a..c59bb9c8 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -1,5 +1,5 @@
import styles from "./Friend.module.scss";
-import { UserPlus } from "@styled-icons/boxicons-regular";
+import { Conversation, UserPlus } from "@styled-icons/boxicons-solid";
import { Friend } from "./Friend";
import { Text } from "preact-i18n";
@@ -34,11 +34,12 @@ export default function Friends() {
-
- openScreen({ id: 'special_input', type: 'add_friend' })}>
-
-
-
+ openScreen({ id: 'special_input', type: 'add_friend' })}> {/* TOFIX: Make sure this opens the "Start Group DM" window on click */}
+
+
+ openScreen({ id: 'special_input', type: 'add_friend' })}>
+
+
)}
{pending.length > 0 && (
-
- –{" "}
+
+ —{" "}
{pending.length}
)}
@@ -62,8 +63,8 @@ export default function Friends() {
))}
{friends.length > 0 && (
-
- –{" "}
+
+ —{" "}
{friends.length}
)}
@@ -71,8 +72,8 @@ export default function Friends() {
))}
{blocked.length > 0 && (
-
- –{" "}
+
+ —{" "}
{blocked.length}
)}