Page MenuHomePhabricator
Differential D7943 Diff 26978 landing/assets/comm-logo.react.js

Changeset View

Standalone View

View Options

landing/assets/comm-logo.react.js

  • This file was added.
// @flow
import * as React from 'react';
function CommLogo(): React.Node {
return (
<svg
width="50"
height="50"
viewBox="0 0 51 50"
ginsuAuthorUnsubmitted
Done
Inline Actions

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)

ginsu: Noticed that the comm logo looked like this (on the right the circle gets cut off): {F556666}…
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="25.9641" cy="25" r="25" fill="#0A0A0A" />
<path
d="M26.7559 40.0763C24.7029 40.0763 22.8524 39.7662 21.2042 39.1459C19.556 38.4975 18.1537 37.553 16.9971 36.3124C15.8405 35.0437 14.9441 33.4789 14.308 31.6181C13.6718 29.7291 13.3538 27.5299 13.3538 25.0206C13.3538 22.5395 13.6718 20.3404 14.308 18.4232C14.9441 16.4778 15.8405 14.8566 16.9971 13.5597C18.1537 12.2345 19.556 11.2336 21.2042 10.557C22.8524 9.88032 24.7029 9.54199 26.7559 9.54199C29.5607 9.54199 31.8739 10.1059 33.6955 11.2336C35.5172 12.3332 36.9774 14.0813 38.0762 16.4778L32.3944 19.3536C31.9895 18.113 31.3534 17.1262 30.486 16.3932C29.6474 15.6319 28.4041 15.2513 26.7559 15.2513C24.8186 15.2513 23.2572 15.8716 22.0717 17.1121C20.9151 18.3245 20.3368 20.1007 20.3368 22.4409V27.1775C20.3368 29.5176 20.9151 31.3079 22.0717 32.5485C23.2572 33.7608 24.8186 34.367 26.7559 34.367C28.3752 34.367 29.6619 33.9441 30.6161 33.0983C31.5992 32.2242 32.3221 31.1811 32.7847 29.9687L38.1629 33.0137C37.0352 35.2692 35.5461 37.0173 33.6955 38.2578C31.8739 39.4702 29.5607 40.0763 26.7559 40.0763Z"
fill="white"
/>
<path
d="M26.7559 40.0763C24.7029 40.0763 22.8524 39.7662 21.2042 39.1459C19.556 38.4975 18.1537 37.553 16.9971 36.3124C15.8405 35.0437 14.9441 33.4789 14.308 31.6181C13.6718 29.7291 13.3538 27.5299 13.3538 25.0206C13.3538 22.5395 13.6718 20.3404 14.308 18.4232C14.9441 16.4778 15.8405 14.8566 16.9971 13.5597C18.1537 12.2345 19.556 11.2336 21.2042 10.557C22.8524 9.88032 24.7029 9.54199 26.7559 9.54199C29.5607 9.54199 31.8739 10.1059 33.6955 11.2336C35.5172 12.3332 36.9774 14.0813 38.0762 16.4778L32.3944 19.3536C31.9895 18.113 31.3534 17.1262 30.486 16.3932C29.6474 15.6319 28.4041 15.2513 26.7559 15.2513C24.8186 15.2513 23.2572 15.8716 22.0717 17.1121C20.9151 18.3245 20.3368 20.1007 20.3368 22.4409V27.1775C20.3368 29.5176 20.9151 31.3079 22.0717 32.5485C23.2572 33.7608 24.8186 34.367 26.7559 34.367C28.3752 34.367 29.6619 33.9441 30.6161 33.0983C31.5992 32.2242 32.3221 31.1811 32.7847 29.9687L38.1629 33.0137C37.0352 35.2692 35.5461 37.0173 33.6955 38.2578C31.8739 39.4702 29.5607 40.0763 26.7559 40.0763Z"
fill="url(#paint0_linear_3613_40170)"
/>
<defs>
<linearGradient
id="paint0_linear_3613_40170"
x1="25.7583"
y1="20.4199"
x2="25.7583"
y2="40.0763"
gradientUnits="userSpaceOnUse"
>
atulUnsubmitted
Not Done
Inline Actions

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

atul: Looks like we're applying a linear gradient to the "c." I don't think we usually style it that…
ashoatUnsubmitted
Not Done
Inline Actions

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

ashoat: Yeah the linear gradient is new... @ginsu, can you point to where that's used in the designs?
ginsuAuthorUnsubmitted
Done
Inline Actions

https://www.figma.com/file/HAAQwcEIjM32gnEMy2d0k5/Comm-%2F-Landing?type=design&node-id=3265-42298&t=MyzjWicfpcrKZQzN-4

ginsu: https://www.figma.com/file/HAAQwcEIjM32gnEMy2d0k5/Comm-%2F-Landing?type=design&node-id=3265…
ginsuAuthorUnsubmitted
Done
Inline Actions

cc @ted

ginsu: cc @ted
tedUnsubmitted
Done
Inline Actions

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.

ted: Yo! When I was finding some assets for the Comm C Icon, I found some in the web app loading…
ashoatUnsubmitted
Not Done
Inline Actions

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

ashoat: Upload didn't get attached, see [here](https://www.notion.so/commapp/Attaching-files-and-images…
<stop stopColor="#121727" stopOpacity="0" />
<stop offset="1" stopColor="#121727" stopOpacity="0.25" />
</linearGradient>
</defs>
</svg>
);
}
export default CommLogo;