Paths

Table of Contentst

[landing] added hover effect to investor profile cards
ClosedPublic
Actions

Authored by ginsu on Oct 25 2022, 1:11 PM.

Details

Reviewers

atul
rohan

Commits

rCOMMcc18e7f1170e: [landing] added hover effect to investor profile cards

Summary

added color to profile photos and a subtle glow effect whenever the cards are hovered over. One thing to note: some photos are B&W or have very little saturation already, so the hover effect sometimes doesn't seem very apparent.

Linear Task: ENG-2105

Test Plan

Please watch the before and after video demos to see the changes I made:

Before:

After:

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ginsu created this revision.Oct 25 2022, 1:11 PM

Herald added subscribers: • abosh, atul, tomek, ashoat. · View Herald TranscriptOct 25 2022, 1:11 PM

ginsu retitled this revision from [landing] added color photo on hover effect to [landing] added color to profile photo on hover effect.Oct 25 2022, 1:15 PM

ginsu edited the summary of this revision. (Show Details)

ginsu edited the test plan for this revision. (Show Details)

ginsu added reviewers: atul, rohan.

ginsu attached a referenced file: F207863: Screen Recording 2022-10-25 at 4.09.09 PM.mov. (Show Details)

ginsu attached a referenced file: F207859: Screen Recording 2022-10-25 at 4.01.58 PM.mov. (Show Details)

Harbormaster completed remote builds in B13042: Diff 17912.Oct 25 2022, 1:25 PM

ginsu requested review of this revision.Oct 25 2022, 1:25 PM

want to make add some more hover effects

added a glow effect to cards when hovered

ginsu retitled this revision from [landing] added color to profile photo on hover effect to [landing] added hover effect to investor profile cards.Oct 25 2022, 2:24 PM

ginsu edited the summary of this revision. (Show Details)

ginsu edited the test plan for this revision. (Show Details)

ginsu attached a referenced file: F207953: Screen Recording 2022-10-25 at 5.20.24 PM.mov. (Show Details)

Harbormaster completed remote builds in B13044: Diff 17914.Oct 25 2022, 2:36 PM

One thing to note: some photos are B&W or have very little saturation already, so the hover effect sometimes doesn't seem very apparent.

Good point... should we stick to glow/outline for the entire card on hover then? Maybe leave the "profile pictures" as is on hover?

(cc @ashoat)

landing/investor-profile.css
13	Can we try adding like `transition: 200ms;` to see if that makes the animation a bit less jarring?

This revision now requires changes to proceed.Oct 26 2022, 10:34 AM

Okay with any reasonable approach here!! Agree that the current effect doesn't seem visible when the avatar is already B&W

removed investor profile going from bw to color and made glow a bit brighter when card is hovered over

ginsu edited the test plan for this revision. (Show Details)Oct 27 2022, 7:23 AM

ginsu attached a referenced file: F208893: Screen Recording 2022-10-27 at 10.21.48 AM.mov. (Show Details)

Harbormaster completed remote builds in B13073: Diff 17949.Oct 27 2022, 7:34 AM

atul accepted this revision.Oct 27 2022, 9:52 AM

This revision is now accepted and ready to land.Oct 27 2022, 9:52 AM

Closed by commit rCOMMcc18e7f1170e: [landing] added hover effect to investor profile cards (authored by ginsu). · Explain WhyOct 27 2022, 10:23 AM

This revision was automatically updated to reflect the committed changes.

ginsu added a commit: rCOMMcc18e7f1170e: [landing] added hover effect to investor profile cards.

Revision Contents
Changeset List

Path

Size

landing/

investor-profile.css

8 lines

Diff 17914

View Options

landing/investor-profile.css

[landing] added hover effect to investor profile cardsClosedPublicActions