Page MenuHomePhabricator
Differential D9408

[web] introduce XL and XXL sizes to the avatar component
ClosedPublic
Actions

Authored by ginsu on Oct 8 2023, 11:28 PM.
Tags
None
Referenced Files
F3524009: D9408.id31768.diff
Mon, Dec 23, 10:57 AM
F3523974: D9408.id32046.diff
Mon, Dec 23, 10:53 AM
F3523971: D9408.id32060.diff
Mon, Dec 23, 10:52 AM
F3522439: D9408.diff
Mon, Dec 23, 6:46 AM
F3521298: D9408.id32060.diff
Mon, Dec 23, 2:47 AM
F3521297: D9408.id32046.diff
Mon, Dec 23, 2:47 AM
F3521296: D9408.id31977.diff
Mon, Dec 23, 2:47 AM
F3521295: D9408.id31768.diff
Mon, Dec 23, 2:47 AM
View All Files
Subscribers
ashoat
tomek
will

Details

Reviewers
atul
inka
Commits
rCOMM8ae26ed8914d: [web] introduce XL and XXL sizes to the avatar component
Summary

When building the user profiles on native we needed to introduce two new size variants: XL and XXL for our avatar component. We will need these two new variants for the avatar on the user profile and the avatar for the full screen view.

Since one of the newly introduced variants (100x100) is going to be smaller than the current L size (112x112), the current L size will now be "XL".

L => 100x100
XL => 112x112
XXL => 480x480

Depends on D9407

Test Plan

Please see screenshots below

L (100x100):

Screenshot 2023-10-09 at 2.37.58 AM.png (2×3 px, 761 KB)

XL (112x112):

Screenshot 2023-10-09 at 2.36.49 AM.png (2×3 px, 821 KB)

XXL (480x480):

Screenshot 2023-10-12 at 5.39.17 PM.png (1×3 px, 1 MB)

Screenshot 2023-10-12 at 5.41.28 PM.png (2×3 px, 969 KB)

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu created this revision.Oct 8 2023, 11:28 PM
Herald added subscribers: will, tomek, ashoat. · View Herald TranscriptOct 8 2023, 11:28 PM
ginsu edited the summary of this revision. (Show Details)Oct 8 2023, 11:29 PM
ginsu added reviewers: atul, inka.
ginsu added a parent revision: D9407: [web] update web avatars to use t shirt sizes.
ginsu edited the summary of this revision. (Show Details)Oct 8 2023, 11:41 PM
ginsu edited the test plan for this revision. (Show Details)
ginsu edited the test plan for this revision. (Show Details)
ginsu attached a referenced file: F804299: Screenshot 2023-10-09 at 2.36.49 AM.png. (Show Details)
ginsu attached a referenced file: F804302: Screenshot 2023-10-09 at 2.37.58 AM.png. (Show Details)
Harbormaster completed remote builds in B23075: Diff 31768.Oct 8 2023, 11:45 PM
ginsu requested review of this revision.Oct 8 2023, 11:45 PM
ginsu planned changes to this revision.Oct 8 2023, 11:46 PM

finish test plan

ginsu added a child revision: D9409: [web] introduce UserProfile component.Oct 8 2023, 11:55 PM
ginsu updated this revision to Diff 31977.Oct 12 2023, 2:43 PM

update

ginsu edited the test plan for this revision. (Show Details)Oct 12 2023, 2:44 PM
ginsu attached a referenced file: F811165: Screenshot 2023-10-12 at 5.41.28 PM.png. (Show Details)
ginsu attached a referenced file: F811166: Screenshot 2023-10-12 at 5.39.17 PM.png. (Show Details)
Harbormaster completed remote builds in B23221: Diff 31977.Oct 12 2023, 3:01 PM
atul accepted this revision.Oct 16 2023, 8:53 AM
This revision is now accepted and ready to land.Oct 16 2023, 8:53 AM
ginsu updated this revision to Diff 32046.Oct 16 2023, 9:46 PM

rebase before landing

Harbormaster completed remote builds in B23269: Diff 32046.Oct 16 2023, 10:03 PM
Closed by commit rCOMM8ae26ed8914d: [web] introduce XL and XXL sizes to the avatar component (authored by ginsu). · Explain WhyOct 16 2023, 10:58 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMM8ae26ed8914d: [web] introduce XL and XXL sizes to the avatar component.

Revision Contents
Changeset List

Diff 31768

View Options

web/avatars/avatar.css

Loading...
View Options

web/avatars/avatar.react.js

Loading...
View Options

web/avatars/edit-thread-avatar.react.js

Loading...
View Options

web/avatars/edit-user-avatar.react.js

Loading...
View Options

web/avatars/emoji-avatar-selection-modal.react.js

Loading...
View Options

web/sidebar/community-creation/community-creation-modal.react.js

Loading...