search

newrelic / instant-observability-website

Dashboards, alerts, and integrations all in one place. Our quickstarts bundle everything you need to start monitoring like a pro right out of the box.
https://newrelic.com/instant-observability/
Apache License 2.0
5 stars 20 forks source link

NR-18828: For smooth animations on buttons #233

Closed dikshab0202 closed 2 years ago

dikshab0202 commented 2 years ago

JIRA : https://issues.newrelic.com/browse/NR-18828 Description: css fix for smooth animations

  1. worked mainly on 'animatedText.js' component for the task
  2. 'InstallButton.js' and 'LandingPageFooter.js' , touched both files for respective buttons to maintain height and width
  3. 'GetstartedFooter.js' -> observe height is 8px more than newrelic.com, so modified height.

Updated changes Highlights:

  1. Style.scss -> format document and added animation of buttons, other changes highlighted because of formatting.
  2. animatedText.js -> removed this component because this code shifted to style.scss
  3. EmptyTab.js, LandingPageFooter.js, GetStartedFooter.js, InstallButton.js -> added className and styles for buttons
  4. Worked on focus for all buttons (No focus on 'Get Demo' button as newrelic.com
  5. Worked on animating buttons, before animated text on buttons were there
  6. Worked on Smooth animation and button's icons hover
gatsby-cloud[bot] commented 2 years ago

Gatsby Cloud Build Report

instant-observability-website

:tada: Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

:clock1: Build time: 2m

Performance

Lighthouse report

Metric Score
Performance :large_orange_diamond: 28
Accessibility :green_heart: 100
Best Practices :green_heart: 92
SEO :large_orange_diamond: 85

:link: View full report

pkosanam commented 2 years ago

As mentioned, kindly apply animation to the button and not to text inside the button.

dikshab0202 commented 2 years ago

Looks good.

In the upcoming versions, let us create a component named "Animated Button", just like "AnimatedText" and use it where ever required. 😃

@pkosanam , sure we will create a component next time, but it will be a rework. As suggested by you, I removed the component I created earlier.

dikshab0202 commented 2 years ago

Please resolve conflicts

Hi @pkosanam , conflicts has been resolved.

nr-opensource-bot commented 2 years ago

:tada: This PR is included in version 1.2.2 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: