Page MenuHomePhabricator

[landing] introduce logo svg assets for competitor comparison
ClosedPublic

Authored by ginsu on May 23 2023, 6:32 AM.
Tags
None
Referenced Files
F1433487: D7943.id27477.diff
Thu, Mar 28, 7:15 AM
F1430875: D7943.id.diff
Wed, Mar 27, 11:54 PM
Unknown Object (File)
Tue, Mar 5, 9:38 PM
Unknown Object (File)
Feb 10 2024, 7:01 PM
Unknown Object (File)
Feb 10 2024, 7:01 PM
Unknown Object (File)
Feb 10 2024, 7:01 PM
Unknown Object (File)
Feb 10 2024, 7:01 PM
Unknown Object (File)
Feb 10 2024, 7:01 PM

Details

Summary

Based on some feedback received in D7905 and some discussion in the design channel we decided that a better way to get the competitor logo assets would be to bundle the svgs directly instead of fetching them over the network. To get the svgs I downloaded them straight from the Figma file and copy and pasted the svg contents into its own react component. In a subsequent diff I will make some modifications to each component to allow for a size prop so that we can modify the size of the logos depending on its usage.

Screenshot 2023-05-23 at 4.39.47 PM.png (2×3 px, 730 KB)

Test Plan

Rendered the logos on the landing page

Screenshot 2023-05-23 at 4.13.30 PM.png (2×3 px, 1 MB)

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, kamil.
landing/assets/comm-logo.react.js
16 ↗(On Diff #26880)

In background-illustration.react.js the line length also extended past 80 characters

ginsu requested review of this revision.May 23 2023, 6:51 AM
ginsu edited the summary of this revision. (Show Details)

fix comm logo svg

landing/assets/comm-logo.react.js
10

Noticed that the comm logo looked like this (on the right the circle gets cut off):

Screenshot 2023-05-24 at 3.06.48 PM.png (426×478 px, 17 KB)

I went into Figma and instead of exporting the frame with the logo, I just exported the group of assets and the value of the viewbox did change. However, the comm logo now looks like this:

Screenshot 2023-05-24 at 3.16.46 PM.png (532×590 px, 20 KB)

atul added a subscriber: ted.

Guessing the icons in Figma were sourced directly from each brand's "media kit" or whatever?

landing/assets/comm-logo.react.js
24–31

Looks like we're applying a linear gradient to the "c."

I don't think we usually style it that way (app icon, favicon, etc).

Guessing this has been signed off on by @ashoat/@ted

This revision is now accepted and ready to land.May 24 2023, 9:13 AM
landing/assets/comm-logo.react.js
24–31

Yeah the linear gradient is new... @ginsu, can you point to where that's used in the designs? Generally defer to Ted, but want to make sure we're consistent about branding

landing/assets/comm-logo.react.js
24–31

cc @ted

landing/assets/comm-logo.react.js
24–31

Yo!

When I was finding some assets for the Comm C Icon, I found some in the web app loading screen designs. https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?type=design&node-id=6285-104248&t=DwoVfm5J4jahseeq-4

Those C SVGs do have a subtle gradient which I believe shows in our current loading screen.
{F572570}

I don't think this gradient version shows up anywhere else, so we can remove it.

landing/assets/comm-logo.react.js
24–31

Upload didn't get attached, see here

I don't think we should treat the loading screen as a logo. It was never intended as such and I personally don't love the look enough

remove gradient from comm logo

Screenshot 2023-06-06 at 11.52.56 AM.png (338×508 px, 12 KB)