Remove GetFirefoxCallout as it totally breaks the layout and is absolutely not worth it.

src/amo/components/GetFirefoxButton/index.js

@@ -154,18 +154,6 @@ export const GetFirefoxButtonBase = ({
   const buttonText = supportsRTAMO
     ? downloadTextForRTAMO
     : i18n.gettext('Download Firefox');
-  let calloutText =
-    addon.type === ADDON_TYPE_STATIC_THEME
-      ? i18n.gettext(`You'll need Firefox to use this theme`)
-      : i18n.gettext(`You'll need Firefox to use this extension`);
-  if (forIncompatibleAddon) {
-    calloutText =
-      addon.type === ADDON_TYPE_STATIC_THEME
-        ? i18n.gettext('You need an updated version of Firefox for this theme')
-        : i18n.gettext(
-            'You need an updated version of Firefox for this extension',
-          );
-  }
 
   const buttonContent = (
     <Button
@@ -181,10 +169,6 @@ export const GetFirefoxButtonBase = ({
 
   return (
     <div className={makeClassName('GetFirefoxButton', className)}>
-      <div className="GetFirefoxButton-callout">
-        <div className="GetFirefoxButton-callout-icon" />
-        <div className="GetFirefoxButton-callout-text">{calloutText}</div>
-      </div>
       {buttonContent}
     </div>
   );

src/amo/components/GetFirefoxButton/styles.scss

@@ -1,57 +1,16 @@
 @import '~amo/css/styles';
 
-$callout-color: $yellow-50;
-
 .GetFirefoxButton-button {
-  display: flex;
-  margin: auto;
-  white-space: nowrap;
-  width: 100%;
+  background: #ffe900;
+  // Button.tsx defines classes that override this color, so we need to use !important
+  color: black !important;
 
-  @include respond-to(medium) {
-    align-self: flex-end;
-    margin-bottom: 12px;
-    margin-top: 0;
-    width: fit-content;
+  @include respond-to(extraLarge) {
+    text-wrap: nowrap;
   }
-}
 
-.GetFirefoxButton-callout {
-  background-color: $callout-color;
-  border: 1px solid $callout-color;
-  border-radius: 4px;
-  color: $grey-90;
-  display: flex;
-  justify-content: center;
-  margin: 16px 0;
-  padding: 10px;
-  position: relative;
-  text-align: center;
   width: 100%;
-
-  @include respond-to(medium) {
-    margin: 16px auto;
-    width: fit-content;
-  }
-
-  &::before {
-    border: 0.8em solid transparent;
-    border-top: 10px solid $callout-color;
-    bottom: -20px;
-    content: '';
-    height: 0;
-    left: 45%;
-    position: absolute;
-    width: 0;
-  }
-}
-
-.GetFirefoxButton-callout-icon {
-  @include margin-end(4px);
-
-  background-image: url('../Notice/img/generic-info-mark.svg');
-  height: 16px;
-  margin: 2px 0 0;
-  min-width: 16px;
-  width: 16px;
+  text-wrap: wrap;
+  text-align: center;
+  padding: 12px 18px;
 }

src/amo/components/InstallButtonWrapper/styles.scss

@@ -1,29 +1,5 @@
 @import '~amo/css/styles';
 
-.InstallButtonWrapper {
-  display: flex;
-  flex-direction: column;
-
-  .GetFirefoxButton {
-    display: flex;
-    flex-direction: column;
-
-    .GetFirefoxButton-button,
-    .GetFirefoxButton-callout {
-      max-width: 100%;
-      text-align: center;
-      white-space: initial;
-      width: 100%;
-    }
-
-    @include respond-to(extraLarge) {
-      .GetFirefoxButton-button {
-        white-space: nowrap;
-      }
-    }
-  }
-}
-
 .InstallButtonWrapper-download {
   margin: 12px 0;
 

src/blog-utils/StaticAddonCard/styles.scss

@@ -93,20 +93,10 @@ $icon-size: 48px;
   text-align: center;
   width: 100%;
 
-  &,
-  .GetFirefoxButton-button,
-  .GetFirefoxButton-callout {
-    box-sizing: border-box;
-  }
-
   .GetFirefoxButton-button {
     margin-bottom: 0;
   }
 
-  .GetFirefoxButton-callout {
-    margin-top: 0;
-  }
-
   @include respond-to(medium) {
     margin-top: 10px;
   }

tests/unit/amo/components/TestInstallButtonWrapper.js

@@ -635,46 +635,6 @@ describe(__filename, () => {
         ).toBeInTheDocument();
       });
 
-      it('has the expected callout text for an extension', () => {
-        render();
-
-        expect(
-          screen.getByText(`You'll need Firefox to use this extension`),
-        ).toBeInTheDocument();
-      });
-
-      it('has the expected callout text for an extension, which is incompatible', () => {
-        renderAsIncompatible();
-
-        expect(
-          screen.getByText(
-            'You need an updated version of Firefox for this extension',
-          ),
-        ).toBeInTheDocument();
-      });
-
-      it('has the expected callout text for a theme', () => {
-        addon.type = ADDON_TYPE_STATIC_THEME;
-
-        render();
-
-        expect(
-          screen.getByText(`You'll need Firefox to use this theme`),
-        ).toBeInTheDocument();
-      });
-
-      it('has the expected callout text for a theme, which is incompatible', () => {
-        addon.type = ADDON_TYPE_STATIC_THEME;
-
-        renderAsIncompatible();
-
-        expect(
-          screen.getByText(
-            'You need an updated version of Firefox for this theme',
-          ),
-        ).toBeInTheDocument();
-      });
-
       it('sends a tracking event when the button is clicked', async () => {
         render();
 

tests/unit/blog-utils/test_index.js

@@ -50,7 +50,6 @@ describe(__filename, () => {
       expect(html('.StaticAddonCard')).toHaveLength(1);
       expect(html('.GetFirefoxButton')).toHaveLength(1);
       expect(html('.GetFirefoxButton-button')).toHaveLength(1);
-      expect(html('.GetFirefoxButton-callout')).toHaveLength(1);
     });
 
     it('lets the caller catch and handle errors', async () => {