diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 47dc5d769b..cc4efe3fb2 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
import VerificationBadge from 'soapbox/components/verification_badge';
import ActionButton from 'soapbox/features/ui/components/action_button';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAppSelector, useOnScreen } from 'soapbox/hooks';
import { getAcct } from 'soapbox/utils/accounts';
import { displayFqn } from 'soapbox/utils/state';
@@ -52,8 +52,9 @@ const Account = ({
timestampUrl,
withRelationship = true,
}: IAccount) => {
- const overflowRef = React.useRef(null);
- const actionRef = React.useRef(null);
+ const overflowRef = React.useRef
(null);
+ const actionRef = React.useRef(null);
+ const isOnScreen = useOnScreen(overflowRef);
const [style, setStyle] = React.useState({ visibility: 'hidden' });
@@ -93,18 +94,19 @@ const Account = ({
};
React.useEffect(() => {
- const style: React.CSSProperties = {};
+ if (isOnScreen) {
+ const style: React.CSSProperties = {};
+ const actionWidth = actionRef.current?.clientWidth;
- const actionWidth = actionRef.current?.clientWidth;
+ if (overflowRef.current) {
+ style.maxWidth = overflowRef.current.clientWidth - 30 - avatarSize - actionWidth;
+ } else {
+ style.visibility = 'hidden';
+ }
- if (overflowRef.current) {
- style.maxWidth = overflowRef.current.clientWidth - 30 - avatarSize - actionWidth;
- } else {
- style.visibility = 'hidden';
+ setStyle(style);
}
-
- setStyle(style);
- }, [overflowRef, actionRef]);
+ }, [isOnScreen, overflowRef, actionRef]);
if (!account) {
return null;
@@ -161,8 +163,8 @@ const Account = ({
-
- @{username}
+
+ @{username}
{(timestamp) ? (
<>
diff --git a/app/soapbox/components/avatar.js b/app/soapbox/components/avatar.js
index a619172524..d5000264d0 100644
Binary files a/app/soapbox/components/avatar.js and b/app/soapbox/components/avatar.js differ
diff --git a/app/soapbox/components/avatar_overlay.js b/app/soapbox/components/avatar_overlay.js
index 01e35b4d13..ce9784c95b 100644
Binary files a/app/soapbox/components/avatar_overlay.js and b/app/soapbox/components/avatar_overlay.js differ
diff --git a/app/soapbox/components/display_name.js b/app/soapbox/components/display_name.js
index 87947af467..69a1c01775 100644
Binary files a/app/soapbox/components/display_name.js and b/app/soapbox/components/display_name.js differ
diff --git a/app/soapbox/components/dropdown_menu.js b/app/soapbox/components/dropdown_menu.js
index bddb47d1af..c471ac27b8 100644
Binary files a/app/soapbox/components/dropdown_menu.js and b/app/soapbox/components/dropdown_menu.js differ
diff --git a/app/soapbox/components/icon.js b/app/soapbox/components/icon.js
index 3f357a1a3a..7c76258062 100644
Binary files a/app/soapbox/components/icon.js and b/app/soapbox/components/icon.js differ
diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index bb293f4168..df1e4db42b 100644
Binary files a/app/soapbox/components/media_gallery.js and b/app/soapbox/components/media_gallery.js differ
diff --git a/app/soapbox/components/permalink.js b/app/soapbox/components/permalink.js
deleted file mode 100644
index 5bae087ac1..0000000000
Binary files a/app/soapbox/components/permalink.js and /dev/null differ
diff --git a/app/soapbox/components/permalink.tsx b/app/soapbox/components/permalink.tsx
new file mode 100644
index 0000000000..db68811e5b
--- /dev/null
+++ b/app/soapbox/components/permalink.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useHistory } from 'react-router-dom';
+
+interface IPermaLink extends Pick, 'dangerouslySetInnerHTML'> {
+ className?: string,
+ href: string,
+ title?: string,
+ to: string,
+}
+
+const Permalink: React.FC = (props) => {
+ const history = useHistory();
+
+ const { className, href, title, to, children, ...filteredProps } = props;
+
+ const handleClick = (event: React.MouseEvent) => {
+ if (event.button === 0 && !(event.ctrlKey || event.metaKey)) {
+ event.preventDefault();
+ history.push(to);
+ }
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default Permalink;
diff --git a/app/soapbox/components/profile_hover_card.js b/app/soapbox/components/profile_hover_card.js
index 0a7e575097..a1da1e4355 100644
Binary files a/app/soapbox/components/profile_hover_card.js and b/app/soapbox/components/profile_hover_card.js differ
diff --git a/app/soapbox/components/scrollable_list.js b/app/soapbox/components/scrollable_list.js
index 1c96b5d57a..8021acf321 100644
Binary files a/app/soapbox/components/scrollable_list.js and b/app/soapbox/components/scrollable_list.js differ
diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index 261ada64e0..a2c0869125 100644
Binary files a/app/soapbox/components/status.js and b/app/soapbox/components/status.js differ
diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index dbdb7f8d09..00937f00d8 100644
Binary files a/app/soapbox/components/status_action_bar.js and b/app/soapbox/components/status_action_bar.js differ
diff --git a/app/soapbox/components/status_content.js b/app/soapbox/components/status_content.js
index be07ed28d9..2e6105a523 100644
Binary files a/app/soapbox/components/status_content.js and b/app/soapbox/components/status_content.js differ
diff --git a/app/soapbox/components/status_list.js b/app/soapbox/components/status_list.js
index 65bbdba528..c8bcbb217b 100644
Binary files a/app/soapbox/components/status_list.js and b/app/soapbox/components/status_list.js differ
diff --git a/app/soapbox/components/status_reply_mentions.js b/app/soapbox/components/status_reply_mentions.js
index 0e9484aa04..76a48d5df6 100644
Binary files a/app/soapbox/components/status_reply_mentions.js and b/app/soapbox/components/status_reply_mentions.js differ
diff --git a/app/soapbox/components/thumb_navigation.js b/app/soapbox/components/thumb_navigation.js
index 17256569d5..caf6566f65 100644
Binary files a/app/soapbox/components/thumb_navigation.js and b/app/soapbox/components/thumb_navigation.js differ
diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx
index 224a322b58..d976976701 100644
--- a/app/soapbox/components/ui/hstack/hstack.tsx
+++ b/app/soapbox/components/ui/hstack/hstack.tsx
@@ -29,6 +29,7 @@ interface IHStack {
justifyContent?: 'between' | 'center',
space?: 0.5 | 1 | 1.5 | 2 | 3 | 4 | 6,
grow?: boolean,
+ style?: React.CSSProperties
}
const HStack: React.FC = (props) => {
diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index aad96badb2..3571a687dc 100644
Binary files a/app/soapbox/containers/soapbox.js and b/app/soapbox/containers/soapbox.js differ
diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index 42fcad65d7..65c2160c0e 100644
Binary files a/app/soapbox/features/account/components/header.js and b/app/soapbox/features/account/components/header.js differ
diff --git a/app/soapbox/features/account_timeline/components/header.js b/app/soapbox/features/account_timeline/components/header.js
index add4ff79f6..f827e93145 100644
Binary files a/app/soapbox/features/account_timeline/components/header.js and b/app/soapbox/features/account_timeline/components/header.js differ
diff --git a/app/soapbox/features/admin/components/report_status.js b/app/soapbox/features/admin/components/report_status.js
index 90c0d062f6..721dfdfb22 100644
Binary files a/app/soapbox/features/admin/components/report_status.js and b/app/soapbox/features/admin/components/report_status.js differ
diff --git a/app/soapbox/features/admin/components/unapproved_account.js b/app/soapbox/features/admin/components/unapproved_account.js
index f00b0dd6ab..80ca4821dd 100644
Binary files a/app/soapbox/features/admin/components/unapproved_account.js and b/app/soapbox/features/admin/components/unapproved_account.js differ
diff --git a/app/soapbox/features/admin/index.js b/app/soapbox/features/admin/index.js
index db76d44079..61e6e1211f 100644
Binary files a/app/soapbox/features/admin/index.js and b/app/soapbox/features/admin/index.js differ
diff --git a/app/soapbox/features/aliases/components/account.js b/app/soapbox/features/aliases/components/account.js
index fd0abd21b8..38bce11bb0 100644
Binary files a/app/soapbox/features/aliases/components/account.js and b/app/soapbox/features/aliases/components/account.js differ
diff --git a/app/soapbox/features/birthdays/account.js b/app/soapbox/features/birthdays/account.js
index e79273f891..b29d795891 100644
Binary files a/app/soapbox/features/birthdays/account.js and b/app/soapbox/features/birthdays/account.js differ
diff --git a/app/soapbox/features/compose/components/privacy_dropdown.js b/app/soapbox/features/compose/components/privacy_dropdown.js
index 415789ba50..23111ab1b6 100644
Binary files a/app/soapbox/features/compose/components/privacy_dropdown.js and b/app/soapbox/features/compose/components/privacy_dropdown.js differ
diff --git a/app/soapbox/features/compose/components/reply_indicator.js b/app/soapbox/features/compose/components/reply_indicator.js
index b3e8109be3..24deb89064 100644
Binary files a/app/soapbox/features/compose/components/reply_indicator.js and b/app/soapbox/features/compose/components/reply_indicator.js differ
diff --git a/app/soapbox/features/developers/apps/create.js b/app/soapbox/features/developers/apps/create.js
index a06aa98113..de237d4519 100644
Binary files a/app/soapbox/features/developers/apps/create.js and b/app/soapbox/features/developers/apps/create.js differ
diff --git a/app/soapbox/features/directory/components/account_card.js b/app/soapbox/features/directory/components/account_card.js
index 36b53d4169..cc64dbad1d 100644
Binary files a/app/soapbox/features/directory/components/account_card.js and b/app/soapbox/features/directory/components/account_card.js differ
diff --git a/app/soapbox/features/edit_profile/components/profile_preview.js b/app/soapbox/features/edit_profile/components/profile_preview.js
index ad1db11ed9..7fe1e8e4c9 100644
Binary files a/app/soapbox/features/edit_profile/components/profile_preview.js and b/app/soapbox/features/edit_profile/components/profile_preview.js differ
diff --git a/app/soapbox/features/edit_profile/index.js b/app/soapbox/features/edit_profile/index.js
index 008711462c..a656d6e0b3 100644
Binary files a/app/soapbox/features/edit_profile/index.js and b/app/soapbox/features/edit_profile/index.js differ
diff --git a/app/soapbox/features/follow_recommendations/components/account.js b/app/soapbox/features/follow_recommendations/components/account.js
index bca3c84007..c15fc6bcc3 100644
Binary files a/app/soapbox/features/follow_recommendations/components/account.js and b/app/soapbox/features/follow_recommendations/components/account.js differ
diff --git a/app/soapbox/features/follow_requests/components/account_authorize.js b/app/soapbox/features/follow_requests/components/account_authorize.js
index 8dd6a9252c..56aac382af 100644
Binary files a/app/soapbox/features/follow_requests/components/account_authorize.js and b/app/soapbox/features/follow_requests/components/account_authorize.js differ
diff --git a/app/soapbox/features/groups/timeline/index.js b/app/soapbox/features/groups/timeline/index.js
index 529c971ffa..0e60bd8869 100644
Binary files a/app/soapbox/features/groups/timeline/index.js and b/app/soapbox/features/groups/timeline/index.js differ
diff --git a/app/soapbox/features/list_adder/components/account.js b/app/soapbox/features/list_adder/components/account.js
index bbf792d17a..014f3ac22a 100644
Binary files a/app/soapbox/features/list_adder/components/account.js and b/app/soapbox/features/list_adder/components/account.js differ
diff --git a/app/soapbox/features/list_adder/index.js b/app/soapbox/features/list_adder/index.js
index 3283ac04fc..7df28d07f1 100644
Binary files a/app/soapbox/features/list_adder/index.js and b/app/soapbox/features/list_adder/index.js differ
diff --git a/app/soapbox/features/list_editor/components/account.js b/app/soapbox/features/list_editor/components/account.js
index eee56b97ab..8054bb52ff 100644
Binary files a/app/soapbox/features/list_editor/components/account.js and b/app/soapbox/features/list_editor/components/account.js differ
diff --git a/app/soapbox/features/notifications/components/follow_request.js b/app/soapbox/features/notifications/components/follow_request.js
index 2a2e792697..2bf25131b6 100644
Binary files a/app/soapbox/features/notifications/components/follow_request.js and b/app/soapbox/features/notifications/components/follow_request.js differ
diff --git a/app/soapbox/features/notifications/components/notification.js b/app/soapbox/features/notifications/components/notification.js
index 3c5462ce3b..7ff10cc2cc 100644
Binary files a/app/soapbox/features/notifications/components/notification.js and b/app/soapbox/features/notifications/components/notification.js differ
diff --git a/app/soapbox/features/report/components/status_check_box.js b/app/soapbox/features/report/components/status_check_box.js
index fcb73c9022..b74253f96b 100644
Binary files a/app/soapbox/features/report/components/status_check_box.js and b/app/soapbox/features/report/components/status_check_box.js differ
diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js
index 0e17739016..7ed5c4d088 100644
Binary files a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js and b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js differ
diff --git a/app/soapbox/features/status/components/action_bar.js b/app/soapbox/features/status/components/action_bar.js
index 317cdfe6ac..b3af67ca23 100644
Binary files a/app/soapbox/features/status/components/action_bar.js and b/app/soapbox/features/status/components/action_bar.js differ
diff --git a/app/soapbox/features/status/components/card.js b/app/soapbox/features/status/components/card.js
index c9f1ec3094..ac933ff429 100644
Binary files a/app/soapbox/features/status/components/card.js and b/app/soapbox/features/status/components/card.js differ
diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index 8d45af06ba..0ae6451294 100644
Binary files a/app/soapbox/features/status/components/detailed_status.js and b/app/soapbox/features/status/components/detailed_status.js differ
diff --git a/app/soapbox/features/status/components/quoted_status.js b/app/soapbox/features/status/components/quoted_status.js
index c3af169ce7..c31415a027 100644
Binary files a/app/soapbox/features/status/components/quoted_status.js and b/app/soapbox/features/status/components/quoted_status.js differ
diff --git a/app/soapbox/features/status/components/status_interaction_bar.js b/app/soapbox/features/status/components/status_interaction_bar.js
index 6c69699c04..e1f931865e 100644
Binary files a/app/soapbox/features/status/components/status_interaction_bar.js and b/app/soapbox/features/status/components/status_interaction_bar.js differ
diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js
index fc0359d69f..cf8fce97b7 100644
Binary files a/app/soapbox/features/status/index.js and b/app/soapbox/features/status/index.js differ
diff --git a/app/soapbox/features/ui/components/action_button.js b/app/soapbox/features/ui/components/action_button.js
index 2ccdb83091..926134c39c 100644
Binary files a/app/soapbox/features/ui/components/action_button.js and b/app/soapbox/features/ui/components/action_button.js differ
diff --git a/app/soapbox/features/ui/components/actions_modal.js b/app/soapbox/features/ui/components/actions_modal.js
index 3429c166eb..bcac0c67c9 100644
Binary files a/app/soapbox/features/ui/components/actions_modal.js and b/app/soapbox/features/ui/components/actions_modal.js differ
diff --git a/app/soapbox/features/ui/components/boost_modal.js b/app/soapbox/features/ui/components/boost_modal.js
index 49763625fb..8a3862b359 100644
Binary files a/app/soapbox/features/ui/components/boost_modal.js and b/app/soapbox/features/ui/components/boost_modal.js differ
diff --git a/app/soapbox/features/ui/components/compose_modal.js b/app/soapbox/features/ui/components/compose_modal.js
index 7d6bf119bf..ff9ce136eb 100644
Binary files a/app/soapbox/features/ui/components/compose_modal.js and b/app/soapbox/features/ui/components/compose_modal.js differ
diff --git a/app/soapbox/features/ui/components/link_footer.js b/app/soapbox/features/ui/components/link_footer.js
index 7861242b08..a049a6a188 100644
Binary files a/app/soapbox/features/ui/components/link_footer.js and b/app/soapbox/features/ui/components/link_footer.js differ
diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js
index 8e80535496..31571cde3b 100644
Binary files a/app/soapbox/features/ui/components/media_modal.js and b/app/soapbox/features/ui/components/media_modal.js differ
diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx
index 43f31cfa3c..7ff98ea1aa 100644
--- a/app/soapbox/features/ui/components/profile-dropdown.tsx
+++ b/app/soapbox/features/ui/components/profile-dropdown.tsx
@@ -116,7 +116,7 @@ const ProfileDropdown: React.FC = ({ account, children }) => {
const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, as: Link };
return (
-
+
{menuItem.text}
);
diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js
index 8a19dd83f1..41fef805e5 100644
Binary files a/app/soapbox/features/ui/components/profile_info_panel.js and b/app/soapbox/features/ui/components/profile_info_panel.js differ
diff --git a/app/soapbox/features/ui/components/profile_media_panel.js b/app/soapbox/features/ui/components/profile_media_panel.js
index dfdc70fff7..54482ad79f 100644
Binary files a/app/soapbox/features/ui/components/profile_media_panel.js and b/app/soapbox/features/ui/components/profile_media_panel.js differ
diff --git a/app/soapbox/features/ui/components/profile_stats.js b/app/soapbox/features/ui/components/profile_stats.js
index 1a43e858b6..325a9c72f9 100644
Binary files a/app/soapbox/features/ui/components/profile_stats.js and b/app/soapbox/features/ui/components/profile_stats.js differ
diff --git a/app/soapbox/features/ui/components/report_modal.js b/app/soapbox/features/ui/components/report_modal.js
index c9ecf622a8..4dc572d65c 100644
Binary files a/app/soapbox/features/ui/components/report_modal.js and b/app/soapbox/features/ui/components/report_modal.js differ
diff --git a/app/soapbox/features/ui/components/subscription_button.js b/app/soapbox/features/ui/components/subscription_button.js
index f8fec84366..1de1a6f881 100644
Binary files a/app/soapbox/features/ui/components/subscription_button.js and b/app/soapbox/features/ui/components/subscription_button.js differ
diff --git a/app/soapbox/features/ui/components/user_panel.js b/app/soapbox/features/ui/components/user_panel.js
index 0c849c1519..e77268614d 100644
Binary files a/app/soapbox/features/ui/components/user_panel.js and b/app/soapbox/features/ui/components/user_panel.js differ
diff --git a/app/soapbox/features/ui/components/video_modal.js b/app/soapbox/features/ui/components/video_modal.js
index a42cc76d2d..066aa9d796 100644
Binary files a/app/soapbox/features/ui/components/video_modal.js and b/app/soapbox/features/ui/components/video_modal.js differ
diff --git a/app/soapbox/features/ui/components/welcome_button.js b/app/soapbox/features/ui/components/welcome_button.js
index f4f352f2f2..c9c8fe3866 100644
Binary files a/app/soapbox/features/ui/components/welcome_button.js and b/app/soapbox/features/ui/components/welcome_button.js differ
diff --git a/app/soapbox/features/ui/util/react_router_helpers.js b/app/soapbox/features/ui/util/react_router_helpers.js
index 4942787b81..295e200199 100644
Binary files a/app/soapbox/features/ui/util/react_router_helpers.js and b/app/soapbox/features/ui/util/react_router_helpers.js differ
diff --git a/app/soapbox/hooks/index.ts b/app/soapbox/hooks/index.ts
index 88f47b4344..9fe270dd42 100644
--- a/app/soapbox/hooks/index.ts
+++ b/app/soapbox/hooks/index.ts
@@ -1 +1,2 @@
export { useAppSelector } from './useAppSelector';
+export { useOnScreen } from './useOnScreen';
diff --git a/app/soapbox/hooks/useOnScreen.ts b/app/soapbox/hooks/useOnScreen.ts
new file mode 100644
index 0000000000..1ae207326b
--- /dev/null
+++ b/app/soapbox/hooks/useOnScreen.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export const useOnScreen = (ref: React.MutableRefObject) => {
+ const [isIntersecting, setIntersecting] = React.useState(false);
+
+ const observer = new IntersectionObserver(
+ ([entry]) => setIntersecting(entry.isIntersecting),
+ );
+
+ React.useEffect(() => {
+ observer.observe(ref.current);
+
+ return () => {
+ observer.disconnect();
+ };
+ }, []);
+
+ return isIntersecting;
+};
diff --git a/app/soapbox/pages/groups_page.js b/app/soapbox/pages/groups_page.js
index 76a86c7147..e11096abfb 100644
Binary files a/app/soapbox/pages/groups_page.js and b/app/soapbox/pages/groups_page.js differ
diff --git a/app/soapbox/pages/profile_page.js b/app/soapbox/pages/profile_page.js
index 58c2d53bc5..05960b6fee 100644
Binary files a/app/soapbox/pages/profile_page.js and b/app/soapbox/pages/profile_page.js differ
diff --git a/app/styles/components/snackbar.scss b/app/styles/components/snackbar.scss
index da22a3ff3f..7a397ef1e5 100644
--- a/app/styles/components/snackbar.scss
+++ b/app/styles/components/snackbar.scss
@@ -40,7 +40,7 @@
}
.notification-bar-wrapper {
- @apply p-4 flex items-start;
+ @apply p-4 flex items-center justify-between w-full space-x-2;
}
.notification-bar-title {
@@ -50,3 +50,10 @@
.notification-bar-message {
@apply text-sm text-gray-700;
}
+
+.notification-bar-action a {
+ @apply inline-flex items-center px-2.5 py-1 border border-solid border-gray-300
+ shadow-sm text-xs font-medium rounded-full text-gray-700 bg-white
+ hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2
+ focus:ring-primary-500;
+}