Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui): remove gradients from logo svg components #17214

Merged
merged 4 commits into from
Mar 12, 2020
Merged

Conversation

alexpaxton
Copy link
Contributor

@alexpaxton alexpaxton commented Mar 11, 2020

Closes #16906

  • Using <linearGradient> within an inline SVG does not work in Safari so long as a <base/> tag is present in the DOM (which it is)
  • Instead of removing the <base /> tag we removed the gradients in favor of flat colors

Screen Shot 2020-03-11 at 1 51 59 PM
Here is the working svgs in Safari

  • CHANGELOG.md updated with a link to the PR (not the Issue)
  • Well-formatted commit messages
  • Rebased/mergeable
  • Tests pass
  • http/swagger.yml updated (if modified Go structs or API)
  • Documentation updated or issue created (provide link to issue/pr)
  • Signed CLA (if not already signed)

@alexpaxton alexpaxton requested review from a team and asalem1 and removed request for a team March 11, 2020 20:58
Copy link
Contributor

@asalem1 asalem1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

General request. Can we move the styles into an scss file? Can we also make the classNames a bit more descriptive?

@@ -9,6 +9,7 @@ const GoLogo: SFC = () => {
height="100%"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300"
xmlSpace="preserve"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.js9{fill:url(#SVGID_5_);}
.js10{fill:url(#SVGID_6_);}
.js5{fill:#699F63;}
.js6{fill:#699F63;}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move these to a stylesheet?

Copy link
Contributor

@russorat russorat Mar 11, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this matches the format of our other logo files. They are autogenerated, so i don't know how useful this would be.

Copy link
Contributor

@asalem1 asalem1 Mar 11, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

True, but we can also make things a little clearer if we wanted to. It's definitely not a deal breaker but something to keep in mind since we are doing it here:

https://github.com/influxdata/influxdb/blob/master/ui/src/clientLibraries/graphics/GoogleLogo.tsx

.js7{fill:#699F63;}
.js8{fill:#699F63;}
.js9{fill:#699F63;}
.js10{fill:#699F63;}
`}
</style>
<rect className="js0" width={300} height={300} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we rename these classes to be a bit more descriptive?

Copy link
Contributor

@russorat russorat Mar 11, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this matches the format of our other logo files. They are autogenerated, so i don't know how useful this would be.

@russorat russorat merged commit b845d6a into master Mar 12, 2020
@russorat russorat deleted the fix/svg-logos branch March 12, 2020 16:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

InfluxDB 2: Ruby logo for client library is not correctly displayed [Safari, macOS]
4 participants