@@ -211,29 +215,22 @@ export default function ProfilePage() {
}
case FOLLOWS: {
- if (isMe) {
- return (
-
;
@@ -308,20 +305,23 @@ export default function ProfilePage() {
}
const w = window.document.querySelector(".page")?.clientWidth;
+ const bannerStyle = user?.banner ? ({ "--img-url": `url(${user.banner})` } as CSSProperties) : {};
return (
<>
- {[ProfileTab.Notes, ProfileTab.Followers, ProfileTab.Follows, ProfileTab.Muted].map(renderTab)}
-
- {optionalTabs.map(renderTab)}
- {isMe && renderTab(ProfileTab.Blocked)}
+
+
+ {[ProfileTab.Notes, ProfileTab.Followers, ProfileTab.Follows].map(renderTab)}
+ {optionalTabs.map(renderTab)}
+ {isMe && blocked.length > 0 && renderTab(ProfileTab.Blocked)}
+
{tabContent()}
>
diff --git a/packages/app/src/Pages/messages.ts b/packages/app/src/Pages/messages.ts
index 4139bce8..b715720b 100644
--- a/packages/app/src/Pages/messages.ts
+++ b/packages/app/src/Pages/messages.ts
@@ -10,10 +10,15 @@ export default defineMessages({
Notes: { defaultMessage: "Notes" },
Reactions: { defaultMessage: "Reactions" },
Followers: { defaultMessage: "Followers" },
- Follows: { defaultMessage: "Follows" },
+ FollowersCount: { defaultMessage: "{n} Followers" },
+ Follows: { defaultMessage: "Following" },
+ FollowsCount: { defaultMessage: "{n} Following" },
Zaps: { defaultMessage: "Zaps" },
+ ZapsCount: { defaultMessage: "{n} Zaps" },
Muted: { defaultMessage: "Muted" },
+ MutedCount: { defaultMessage: "{n} Muted" },
Blocked: { defaultMessage: "Blocked" },
+ BlockedCount: { defaultMessage: "{n} Blocked" },
Sats: { defaultMessage: "{n} {n, plural, =1 {sat} other {sats}}" },
Following: { defaultMessage: "Following {n}" },
Settings: { defaultMessage: "Settings" },
@@ -36,6 +41,9 @@ export default defineMessages({
Relays: {
defaultMessage: "Relays",
},
+ RelaysCount: {
+ defaultMessage: "{n} Relays",
+ },
Bookmarks: { defaultMessage: "Bookmarks" },
- BookmarksCount: { defaultMessage: "Bookmarks ({n})" },
+ BookmarksCount: { defaultMessage: "{n} Bookmarks" },
});
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index 15712cd2..aa2c660b 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -3,6 +3,7 @@
--font-color: #fff;
--font-secondary-color: #a7a7a7;
--font-tertiary-color: #a3a3a3;
+ --border-color: rgba(163, 163, 163, 0.3);
--font-size: 16px;
--font-size-small: 14px;
--font-size-tiny: 12px;
@@ -39,10 +40,11 @@
}
html.light {
- --bg-color: #f1f1f1;
- --font-color: #57534e;
- --font-secondary-color: #7b7b7b;
- --font-tertiary-color: #a7a7a7;
+ --bg-color: #f8f8f8;
+ --font-color: #27272a;
+ --font-secondary-color: #71717a;
+ --font-tertiary-color: #71717a;
+ --border-color: rgba(167, 167, 167, 0.3);
--highlight-light: #16aac1;
--highlight: #0284c7;
@@ -215,9 +217,8 @@ button.icon:hover {
cursor: pointer;
color: var(--font-color);
user-select: none;
- background-color: var(--bg-color);
- color: var(--font-color);
- border: 1px solid;
+ background: none;
+ border: none;
display: inline-block;
}
@@ -230,18 +231,16 @@ button.icon:hover {
}
.btn.active {
- border: 2px solid;
- background-color: var(--gray-secondary);
color: var(--font-color);
font-weight: 700;
}
.btn.disabled {
- color: var(--gray-light);
+ opacity: 0.3;
}
.btn:hover {
- background-color: var(--gray);
+ color: var(--highlight);
}
.btn-sm {