Page MenuHomePhabricator
Differential D3557

[web] Change `Button` component color on hover
ClosedPublic
Actions

Authored by atul on Mar 29 2022, 6:41 PM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Apr 21, 10:10 PM
Unknown Object (File)
Mon, Apr 21, 10:10 PM
Unknown Object (File)
Sat, Apr 19, 7:28 AM
Unknown Object (File)
Sat, Apr 19, 4:24 AM
Unknown Object (File)
Sat, Apr 19, 12:43 AM
Unknown Object (File)
Fri, Apr 18, 6:55 PM
Unknown Object (File)
Fri, Apr 18, 2:40 PM
Unknown Object (File)
Mon, Apr 14, 2:01 AM
View All Files
Subscribers
• abosh
• adrian
ashoat
• karol

Details

Reviewers
tomek
• jacek
• benschac
Commits
rCOMMcad5d9559458: [web] Change `Button` component color on hover
Summary

I looked through Figma and couldn't find any buttons in the "hover" state... but I still think buttons should change color on hover and it feels unnatural when they don't.

The button background was --violet-dark-100, so I went with --violet-dark-80 for background color on hover for now

Test Plan

Looks as expected:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul created this revision.Mar 29 2022, 6:41 PM
Herald added subscribers: • abosh, • karol, • adrian, ashoat. · View Herald TranscriptMar 29 2022, 6:41 PM
atul published this revision for review.Mar 29 2022, 6:41 PM
atul edited the test plan for this revision. (Show Details)
Harbormaster completed remote builds in B7703: Diff 10805.Mar 29 2022, 6:47 PM
tomek accepted this revision.Mar 30 2022, 3:17 AM
This revision is now accepted and ready to land.Mar 30 2022, 3:17 AM
atul updated this revision to Diff 10825.Mar 30 2022, 9:27 AM

rebase before landing

This revision was landed with ongoing or failed builds.Mar 30 2022, 9:30 AM
Closed by commit rCOMMcad5d9559458: [web] Change `Button` component color on hover (authored by atul). · Explain Why
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMMcad5d9559458: [web] Change `Button` component color on hover.
Harbormaster completed remote builds in B7723: Diff 10825.Mar 30 2022, 9:33 AM

Revision Contents
Changeset List

PathSize
web/
components/
6 lines
1 line

Diff 10826

View Options

web/components/button.css

Show First 20 Lines • Show All 100 Lines • ▼ Show 20 Lines): ClientAvatar {
if (memberInfos.length === 0) { if (memberInfos.length === 0) {
return defaultAnonymousUserEmojiAvatar; return defaultAnonymousUserEmojiAvatar;
} }
return getAvatarForUser(memberInfos[0]); return getAvatarForUser(memberInfos[0]);
} }
function useAvatarForThread(thread: RawThreadInfo | ThreadInfo): ClientAvatar { function getAvatarForThread(
const containingThreadID = thread.containingThreadID; thread: RawThreadInfo | ThreadInfo,
const containingThreadInfo = useSelector(state => containingThreadInfo: ?ThreadInfo,
containingThreadID ? threadInfoSelector(state)[containingThreadID] : null, ): ClientAvatar {
);
if (thread.avatar) { if (thread.avatar) {
return thread.avatar; return thread.avatar;
} }
if (thread.containingThreadID && thread.containingThreadID !== genesis.id) { if (containingThreadInfo && containingThreadInfo.id !== genesis.id) {
invariant(containingThreadInfo, 'containingThreadInfo should be set');
return containingThreadInfo.avatar return containingThreadInfo.avatar
? containingThreadInfo.avatar ? containingThreadInfo.avatar
: getDefaultAvatar(containingThreadInfo.id, containingThreadInfo.color); : getDefaultAvatar(containingThreadInfo.id, containingThreadInfo.color);
} }
return getDefaultAvatar(thread.id, thread.color); return getDefaultAvatar(thread.id, thread.color);
} }
function useAvatarForThread(thread: RawThreadInfo | ThreadInfo): ClientAvatar {
const containingThreadID = thread.containingThreadID;
const containingThreadInfo = useSelector(state =>
containingThreadID ? threadInfoSelector(state)[containingThreadID] : null,
);
return getAvatarForThread(thread, containingThreadInfo);
}
function useENSResolvedAvatar( function useENSResolvedAvatar(
avatarInfo: ClientAvatar, avatarInfo: ClientAvatar,
userInfo: ?UserInfo, userInfo: ?UserInfo,
): ResolvedClientAvatar { ): ResolvedClientAvatar {
const ethAddress = React.useMemo(() => { const ethAddress = React.useMemo(() => {
let address = null; let address = null;
if (userInfo && avatarInfo.type === 'ens') { if (userInfo && avatarInfo.type === 'ens') {
const { username } = userInfo; const { username } = userInfo;
Show All 22 Lines): ResolvedClientAvatar {
return resolvedAvatar; return resolvedAvatar;
} }
export { export {
getRandomDefaultEmojiAvatar, getRandomDefaultEmojiAvatar,
getAvatarForUser, getAvatarForUser,
getUserAvatarForThread, getUserAvatarForThread,
getAvatarForThread,
useAvatarForThread, useAvatarForThread,
useENSResolvedAvatar, useENSResolvedAvatar,
}; };
View Options

web/theme.css

Show First 20 Lines • Show All 100 Lines • ▼ Show 20 Lines): ClientAvatar {
if (memberInfos.length === 0) { if (memberInfos.length === 0) {
return defaultAnonymousUserEmojiAvatar; return defaultAnonymousUserEmojiAvatar;
} }
return getAvatarForUser(memberInfos[0]); return getAvatarForUser(memberInfos[0]);
} }
function useAvatarForThread(thread: RawThreadInfo | ThreadInfo): ClientAvatar { function getAvatarForThread(
const containingThreadID = thread.containingThreadID; thread: RawThreadInfo | ThreadInfo,
const containingThreadInfo = useSelector(state => containingThreadInfo: ?ThreadInfo,
containingThreadID ? threadInfoSelector(state)[containingThreadID] : null, ): ClientAvatar {
);
if (thread.avatar) { if (thread.avatar) {
return thread.avatar; return thread.avatar;
} }
if (thread.containingThreadID && thread.containingThreadID !== genesis.id) { if (containingThreadInfo && containingThreadInfo.id !== genesis.id) {
invariant(containingThreadInfo, 'containingThreadInfo should be set');
return containingThreadInfo.avatar return containingThreadInfo.avatar
? containingThreadInfo.avatar ? containingThreadInfo.avatar
: getDefaultAvatar(containingThreadInfo.id, containingThreadInfo.color); : getDefaultAvatar(containingThreadInfo.id, containingThreadInfo.color);
} }
return getDefaultAvatar(thread.id, thread.color); return getDefaultAvatar(thread.id, thread.color);
} }
function useAvatarForThread(thread: RawThreadInfo | ThreadInfo): ClientAvatar {
const containingThreadID = thread.containingThreadID;
const containingThreadInfo = useSelector(state =>
containingThreadID ? threadInfoSelector(state)[containingThreadID] : null,
);
return getAvatarForThread(thread, containingThreadInfo);
}
function useENSResolvedAvatar( function useENSResolvedAvatar(
avatarInfo: ClientAvatar, avatarInfo: ClientAvatar,
userInfo: ?UserInfo, userInfo: ?UserInfo,
): ResolvedClientAvatar { ): ResolvedClientAvatar {
const ethAddress = React.useMemo(() => { const ethAddress = React.useMemo(() => {
let address = null; let address = null;
if (userInfo && avatarInfo.type === 'ens') { if (userInfo && avatarInfo.type === 'ens') {
const { username } = userInfo; const { username } = userInfo;
Show All 22 Lines): ResolvedClientAvatar {
return resolvedAvatar; return resolvedAvatar;
} }
export { export {
getRandomDefaultEmojiAvatar, getRandomDefaultEmojiAvatar,
getAvatarForUser, getAvatarForUser,
getUserAvatarForThread, getUserAvatarForThread,
getAvatarForThread,
useAvatarForThread, useAvatarForThread,
useENSResolvedAvatar, useENSResolvedAvatar,
}; };