Page MenuHomePhabricator
Differential D3393

[landing] Reintroduce hover styling for `Header` nav links
ClosedPublic
Actions

Authored by atul on Mar 9 2022, 5:10 PM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Mar 14, 12:24 AM
Unknown Object (File)
Mon, Mar 3, 11:38 PM
Unknown Object (File)
Tue, Feb 25, 1:59 PM
Unknown Object (File)
Thu, Feb 20, 2:11 AM
Unknown Object (File)
Feb 2 2025, 1:37 AM
Unknown Object (File)
Feb 1 2025, 10:16 AM
Unknown Object (File)
Feb 1 2025, 10:16 AM
Unknown Object (File)
Jan 28 2025, 4:34 AM
View All Files
Subscribers
• adrian
ashoat
• karol

Details

Reviewers
• jacek
varun
• benschac
tomek
Commits
rCOMMba52e334ec4f: [landing] Reintroduce hover styling for `Header` nav links
Summary

Bring back hover styling for Header nav links

Test Plan

Here's how it looks:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul created this revision.Mar 9 2022, 5:10 PM
Herald added subscribers: • karol, • adrian, ashoat. · View Herald TranscriptMar 9 2022, 5:10 PM
atul added inline comments.Mar 9 2022, 5:12 PM
landing/header.react.js
25 ↗(On Diff #10256)

I don't think we should change fontWeight when a tab becomes active. It causes the text to shift around ever so slightly and it looks kind of tacky/unsettling. Happy to revert this change if there's disagreement.

atul published this revision for review.Mar 9 2022, 5:13 PM
atul edited the test plan for this revision. (Show Details)
Harbormaster completed remote builds in B7274: Diff 10256.Mar 9 2022, 5:15 PM
tomek accepted this revision.Mar 10 2022, 2:15 AM
tomek added inline comments.
landing/header.react.js
25 ↗(On Diff #10256)

Agree. If we want to have this effect, we can take a look at text-shadow

This revision is now accepted and ready to land.Mar 10 2022, 2:15 AM
atul added a comment.Mar 10 2022, 9:14 AM

If we want to have this effect, we can take a look at text-shadow

Oh nice, this looks neat.. I'll take a look

atul updated this revision to Diff 10270.Mar 10 2022, 9:29 AM
atul marked an inline comment as done.

rebase before landing

This revision was landed with ongoing or failed builds.Mar 10 2022, 9:31 AM
Closed by commit rCOMMba52e334ec4f: [landing] Reintroduce hover styling for `Header` nav links (authored by atul). · Explain Why
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMMba52e334ec4f: [landing] Reintroduce hover styling for `Header` nav links.
Harbormaster completed remote builds in B7283: Diff 10270.Mar 10 2022, 9:33 AM

Revision Contents
Changeset List

PathSize
landing/
10 lines
1 line

Diff 10271

View Options

landing/header.css

// @flow // @flow
import Clipboard from '@react-native-clipboard/clipboard'; import Clipboard from '@react-native-clipboard/clipboard';
import * as React from 'react'; import * as React from 'react';
import { Text, View } from 'react-native'; import { Text, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler'; import { TouchableOpacity } from 'react-native-gesture-handler';
import { inviteLinkUrl } from 'lib/facts/links.js'; import { inviteLinkURL } from 'lib/facts/links.js';
import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js'; import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js';
import { threadHasPermission } from 'lib/shared/thread-utils.js'; import { threadHasPermission } from 'lib/shared/thread-utils.js';
import type { InviteLink } from 'lib/types/link-types.js'; import type { InviteLink } from 'lib/types/link-types.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js'; import { threadPermissions } from 'lib/types/thread-permission-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js';
import SingleLine from '../components/single-line.react.js'; import SingleLine from '../components/single-line.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js'; import SWMansionIcon from '../components/swmansion-icon.react.js';
Show All 20 Lines
function ViewInviteLinksScreen(props: Props): React.Node { function ViewInviteLinksScreen(props: Props): React.Node {
const { community } = props.route.params; const { community } = props.route.params;
const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[ const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[
community.id community.id
]; ];
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const { modalForegroundLabel } = useColors(); const { modalForegroundLabel } = useColors();
const linkUrl = inviteLinkUrl(inviteLink?.name ?? ''); const linkUrl = inviteLinkURL(inviteLink?.name ?? '');
const onPressCopy = React.useCallback(() => { const onPressCopy = React.useCallback(() => {
Clipboard.setString(linkUrl); Clipboard.setString(linkUrl);
setTimeout(confirmCopy); setTimeout(confirmCopy);
}, [linkUrl]); }, [linkUrl]);
const { navigate } = props.navigation; const { navigate } = props.navigation;
const onEditButtonClick = React.useCallback(() => { const onEditButtonClick = React.useCallback(() => {
navigate<'ManagePublicLink'>({ navigate<'ManagePublicLink'>({
▲ Show 20 Lines • Show All 116 Lines • Show Last 20 Lines
View Options

landing/header.react.js

// @flow // @flow
import Clipboard from '@react-native-clipboard/clipboard'; import Clipboard from '@react-native-clipboard/clipboard';
import * as React from 'react'; import * as React from 'react';
import { Text, View } from 'react-native'; import { Text, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler'; import { TouchableOpacity } from 'react-native-gesture-handler';
import { inviteLinkUrl } from 'lib/facts/links.js'; import { inviteLinkURL } from 'lib/facts/links.js';
import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js'; import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js';
import { threadHasPermission } from 'lib/shared/thread-utils.js'; import { threadHasPermission } from 'lib/shared/thread-utils.js';
import type { InviteLink } from 'lib/types/link-types.js'; import type { InviteLink } from 'lib/types/link-types.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js'; import { threadPermissions } from 'lib/types/thread-permission-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js';
import SingleLine from '../components/single-line.react.js'; import SingleLine from '../components/single-line.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js'; import SWMansionIcon from '../components/swmansion-icon.react.js';
Show All 20 Lines
function ViewInviteLinksScreen(props: Props): React.Node { function ViewInviteLinksScreen(props: Props): React.Node {
const { community } = props.route.params; const { community } = props.route.params;
const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[ const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[
community.id community.id
]; ];
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const { modalForegroundLabel } = useColors(); const { modalForegroundLabel } = useColors();
const linkUrl = inviteLinkUrl(inviteLink?.name ?? ''); const linkUrl = inviteLinkURL(inviteLink?.name ?? '');
const onPressCopy = React.useCallback(() => { const onPressCopy = React.useCallback(() => {
Clipboard.setString(linkUrl); Clipboard.setString(linkUrl);
setTimeout(confirmCopy); setTimeout(confirmCopy);
}, [linkUrl]); }, [linkUrl]);
const { navigate } = props.navigation; const { navigate } = props.navigation;
const onEditButtonClick = React.useCallback(() => { const onEditButtonClick = React.useCallback(() => {
navigate<'ManagePublicLink'>({ navigate<'ManagePublicLink'>({
▲ Show 20 Lines • Show All 116 Lines • Show Last 20 Lines