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
F5026787: D3393.id10270.diff
Mon, Mar 24, 6:36 PM
F5026617: D3393.id.diff
Mon, Mar 24, 2:50 PM
Unknown Object (File)
Sun, Mar 23, 2:54 PM
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)
Feb 20 2025, 2:11 AM
Unknown Object (File)
Feb 2 2025, 1:37 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

Show First 20 Lines • Show All 64 Lines • ▼ Show 20 Lines createSelector(stateSyncSpecSelectors, (...specs) => {
return { specsPerHashKey, specPerInnerHashKey }; return { specsPerHashKey, specPerInnerHashKey };
}); });
const getClientResponsesSelector: ( const getClientResponsesSelector: (
state: AppState, state: AppState,
) => ( ) => (
calendarActive: boolean, calendarActive: boolean,
oneTimeKeyGenerator: ?OneTimeKeyGenerator, oneTimeKeyGenerator: ?OneTimeKeyGenerator,
getSignedIdentityKeysBlob: ?() => Promise<SignedIdentityKeysBlob>, getSignedIdentityKeysBlob: () => Promise<SignedIdentityKeysBlob>,
getInitialNotificationsEncryptedMessage: ?() => Promise<string>, getInitialNotificationsEncryptedMessage: ?() => Promise<string>,
serverRequests: $ReadOnlyArray<ClientServerRequest>, serverRequests: $ReadOnlyArray<ClientServerRequest>,
) => Promise<$ReadOnlyArray<ClientClientResponse>> = createSelector( ) => Promise<$ReadOnlyArray<ClientClientResponse>> = createSelector(
boundStateSyncSpecsSelector, boundStateSyncSpecsSelector,
currentCalendarQuery, currentCalendarQuery,
( (
{ specsPerHashKey, specPerInnerHashKey }, { specsPerHashKey, specPerInnerHashKey },
calendarQuery: (calendarActive: boolean) => CalendarQuery, calendarQuery: (calendarActive: boolean) => CalendarQuery,
) => { ) => {
return async ( return async (
calendarActive: boolean, calendarActive: boolean,
oneTimeKeyGenerator: ?OneTimeKeyGenerator, oneTimeKeyGenerator: ?OneTimeKeyGenerator,
getSignedIdentityKeysBlob: ?() => Promise<SignedIdentityKeysBlob>, getSignedIdentityKeysBlob: () => Promise<SignedIdentityKeysBlob>,
getInitialNotificationsEncryptedMessage: ?() => Promise<string>, getInitialNotificationsEncryptedMessage: ?() => Promise<string>,
serverRequests: $ReadOnlyArray<ClientServerRequest>, serverRequests: $ReadOnlyArray<ClientServerRequest>,
): Promise<$ReadOnlyArray<ClientClientResponse>> => { ): Promise<$ReadOnlyArray<ClientClientResponse>> => {
const clientResponses = []; const clientResponses = [];
const serverRequestedPlatformDetails = serverRequests.some( const serverRequestedPlatformDetails = serverRequests.some(
request => request.type === serverRequestTypes.PLATFORM_DETAILS, request => request.type === serverRequestTypes.PLATFORM_DETAILS,
); );
for (const serverRequest of serverRequests) { for (const serverRequest of serverRequests) {
▲ Show 20 Lines • Show All 68 Lines • ▼ Show 20 Lines ): Promise<$ReadOnlyArray<ClientClientResponse>> => {
for (let i = 0; i < minimumOneTimeKeysRequired; ++i) { for (let i = 0; i < minimumOneTimeKeysRequired; ++i) {
keys.push(oneTimeKeyGenerator(i)); keys.push(oneTimeKeyGenerator(i));
} }
clientResponses.push({ clientResponses.push({
type: serverRequestTypes.MORE_ONE_TIME_KEYS, type: serverRequestTypes.MORE_ONE_TIME_KEYS,
keys, keys,
}); });
} else if ( } else if (
serverRequest.type === serverRequestTypes.SIGNED_IDENTITY_KEYS_BLOB && serverRequest.type === serverRequestTypes.SIGNED_IDENTITY_KEYS_BLOB
getSignedIdentityKeysBlob
) { ) {
const signedIdentityKeysBlob = await getSignedIdentityKeysBlob(); const signedIdentityKeysBlob = await getSignedIdentityKeysBlob();
clientResponses.push({ clientResponses.push({
type: serverRequestTypes.SIGNED_IDENTITY_KEYS_BLOB, type: serverRequestTypes.SIGNED_IDENTITY_KEYS_BLOB,
signedIdentityKeysBlob, signedIdentityKeysBlob,
}); });
} else if ( } else if (
serverRequest.type === serverRequest.type ===
▲ Show 20 Lines • Show All 45 Lines • Show Last 20 Lines
View Options

landing/header.react.js

Show First 20 Lines • Show All 64 Lines • ▼ Show 20 Lines createSelector(stateSyncSpecSelectors, (...specs) => {
return { specsPerHashKey, specPerInnerHashKey }; return { specsPerHashKey, specPerInnerHashKey };
}); });
const getClientResponsesSelector: ( const getClientResponsesSelector: (
state: AppState, state: AppState,
) => ( ) => (
calendarActive: boolean, calendarActive: boolean,
oneTimeKeyGenerator: ?OneTimeKeyGenerator, oneTimeKeyGenerator: ?OneTimeKeyGenerator,
getSignedIdentityKeysBlob: ?() => Promise<SignedIdentityKeysBlob>, getSignedIdentityKeysBlob: () => Promise<SignedIdentityKeysBlob>,
getInitialNotificationsEncryptedMessage: ?() => Promise<string>, getInitialNotificationsEncryptedMessage: ?() => Promise<string>,
serverRequests: $ReadOnlyArray<ClientServerRequest>, serverRequests: $ReadOnlyArray<ClientServerRequest>,
) => Promise<$ReadOnlyArray<ClientClientResponse>> = createSelector( ) => Promise<$ReadOnlyArray<ClientClientResponse>> = createSelector(
boundStateSyncSpecsSelector, boundStateSyncSpecsSelector,
currentCalendarQuery, currentCalendarQuery,
( (
{ specsPerHashKey, specPerInnerHashKey }, { specsPerHashKey, specPerInnerHashKey },
calendarQuery: (calendarActive: boolean) => CalendarQuery, calendarQuery: (calendarActive: boolean) => CalendarQuery,
) => { ) => {
return async ( return async (
calendarActive: boolean, calendarActive: boolean,
oneTimeKeyGenerator: ?OneTimeKeyGenerator, oneTimeKeyGenerator: ?OneTimeKeyGenerator,
getSignedIdentityKeysBlob: ?() => Promise<SignedIdentityKeysBlob>, getSignedIdentityKeysBlob: () => Promise<SignedIdentityKeysBlob>,
getInitialNotificationsEncryptedMessage: ?() => Promise<string>, getInitialNotificationsEncryptedMessage: ?() => Promise<string>,
serverRequests: $ReadOnlyArray<ClientServerRequest>, serverRequests: $ReadOnlyArray<ClientServerRequest>,
): Promise<$ReadOnlyArray<ClientClientResponse>> => { ): Promise<$ReadOnlyArray<ClientClientResponse>> => {
const clientResponses = []; const clientResponses = [];
const serverRequestedPlatformDetails = serverRequests.some( const serverRequestedPlatformDetails = serverRequests.some(
request => request.type === serverRequestTypes.PLATFORM_DETAILS, request => request.type === serverRequestTypes.PLATFORM_DETAILS,
); );
for (const serverRequest of serverRequests) { for (const serverRequest of serverRequests) {
▲ Show 20 Lines • Show All 68 Lines • ▼ Show 20 Lines ): Promise<$ReadOnlyArray<ClientClientResponse>> => {
for (let i = 0; i < minimumOneTimeKeysRequired; ++i) { for (let i = 0; i < minimumOneTimeKeysRequired; ++i) {
keys.push(oneTimeKeyGenerator(i)); keys.push(oneTimeKeyGenerator(i));
} }
clientResponses.push({ clientResponses.push({
type: serverRequestTypes.MORE_ONE_TIME_KEYS, type: serverRequestTypes.MORE_ONE_TIME_KEYS,
keys, keys,
}); });
} else if ( } else if (
serverRequest.type === serverRequestTypes.SIGNED_IDENTITY_KEYS_BLOB && serverRequest.type === serverRequestTypes.SIGNED_IDENTITY_KEYS_BLOB
getSignedIdentityKeysBlob
) { ) {
const signedIdentityKeysBlob = await getSignedIdentityKeysBlob(); const signedIdentityKeysBlob = await getSignedIdentityKeysBlob();
clientResponses.push({ clientResponses.push({
type: serverRequestTypes.SIGNED_IDENTITY_KEYS_BLOB, type: serverRequestTypes.SIGNED_IDENTITY_KEYS_BLOB,
signedIdentityKeysBlob, signedIdentityKeysBlob,
}); });
} else if ( } else if (
serverRequest.type === serverRequest.type ===
▲ Show 20 Lines • Show All 45 Lines • Show Last 20 Lines