Guided install design changes

[mickeyryan42]

https://issues.newrelic.com/browse/NR-43198

Changing the text to 18px to match the other tiles works without a word break/ellipsis until about 311px screen width. If we want we can maybe ellipsis at a breakpoint here but the smallest screen size we should encounter is 320px.

Since GuidedInstallTileMostPopular was the one being used, I deleted the other and renamed it GuidedInstallTile. This caused a weird diff but the main changes are:

• Added hover css to the tile
• Added the onClick to the tile itself
• Removed the css to break word and ellipsis the text

Note The GuidedInstallTile component has an event called clickSuperTile. Since we are removing SuperTiles, should we rename this or would that cause problems with tracking events?

[gatsby-cloud[bot]]

Gatsby Cloud Build Report

:triangular_flag_on_post: Your build failed. See the build logs here

Errors

getNodeAndSavePathDependency failed for node id: 2509a503-00b4-5892-baf8-9022542321c6 as it was not found in cache

getNodeAndSavePathDependency failed for node id: 2509a503-00b4-5892-baf8-9022542321c6 as it was not found in cache

getNodeAndSavePathDependency failed for node id: 2509a503-00b4-5892-baf8-9022542321c6 as it was not found in cache

getNodeAndSavePathDependency failed for node id: 2509a503-00b4-5892-baf8-9022542321c6 as it was not found in cache

There was an error in your GraphQL query:

Cannot read properties of undefined (reading 'base')

   9 |       gatsbyImageData(height: 45, placeholder: BLURRED, formats: [AUTO, WEBP])
  10 |     }
  11 |   }
  12 | }
  13 |
  14 | fragment QuickstartDashboards_quickstart on Quickstarts {
  15 |   dashboards {
  16 |     description
  17 |     name
  18 |     screenshots {
> 19 |       publicURL
     |       ^
  20 |       childImageSharp {
  21 |         gatsbyImageData(
  22 |           placeholder: BLURRED
  23 |           layout: CONSTRAINED
  24 |           formats: [AUTO, WEBP]
  25 |           height: 272
  26 |         )
  27 |       }
  28 |     }
  29 |   }

File path: /usr/src/app/www/src/templates/QuickstartDetails.js
Url path: /guzzle/6b6b1702-7636-4b60-a2b8-d5765d11ec13
Plugin: none

An error occurred during parallel query running.
Go here for troubleshooting tips: https://gatsby.dev/pqr-feedback

[tabathadelane]

Adding the hover feels so much better. These are nitpicks, but I'm curious what the team thinks:

Is there enough difference between the main text and the "install New Relic" text with this change?

Did we know there is a spinner on this tile when you click it?