Nova preview notice

src/lib/constants.js

@@ -4,6 +4,9 @@ export const DOWNLOAD_FIREFOX_URL = `https://www.mozilla.org/firefox/new/?utm_ca
   process.env.DOWNLOAD_FIREFOX_UTM_SOURCE
 }`;
 
+export const NOVA_BLOG_POST_URL =
+  "https://blog.mozilla.org/addons/2026/09/29/nova-is-here-what-changes-for-your-firefox-theme/";
+
 export const CUSTOM_BACKGROUND_MAXIMUM_LENGTH = 3;
 
 export const CUSTOM_BACKGROUND_MAXIMUM_SIZE = 1000000;

src/web/lib/components/App/index.js

@@ -14,6 +14,7 @@ import ExportThemeDialog from "../ExportThemeDialog";
 import TermsPrivacyModal from "../TermsPrivacyModal";
 import Onboarding from "../Onboarding";
 import Banner from "../Banner";
+import PreviewNotice from "../PreviewNotice";
 import ThemeBuilder from "../ThemeBuilder";
 import Browser from "../Browser";
 import { getCustomImages } from "../../../../lib/utils";
@@ -122,6 +123,7 @@ export const AppComponent = props => {
             {shouldOfferPendingTheme && <SharedThemeDialog {...props} />}
             {<ExportThemeDialog {...props} />}
             <AppHeader {...props} />
+            <PreviewNotice />
             <main className="app__main">
               <Browser
                 {...{

src/web/lib/components/App/index.scss

@@ -1,7 +1,7 @@
 .app {
   display: grid;
   grid-gap: 32px;
-  grid-template-rows: 64px 1fr 72px;
+  grid-template-rows: 64px auto 1fr 72px;
   min-height: 100vh;
   width: 100%;
 }

src/web/lib/components/PreviewNotice/PreviewNotice-test.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { expect } from "chai";
+import { shallow, configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+
+import { PreviewNotice } from "./index";
+import { NOVA_BLOG_POST_URL } from "../../../../lib/constants";
+
+configure({ adapter: new Adapter() });
+
+describe("PreviewNotice", () => {
+  it("renders without exploding", () => {
+    expect(shallow(<PreviewNotice />).length).to.equal(1);
+  });
+
+  it("links to the Nova blog post", () => {
+    const wrapper = shallow(<PreviewNotice />);
+    expect(wrapper.find("a.preview-notice__link").prop("href")).to.equal(
+      NOVA_BLOG_POST_URL
+    );
+  });
+});

src/web/lib/components/PreviewNotice/index.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { NOVA_BLOG_POST_URL } from "../../../../lib/constants";
+
+import "./index.scss";
+
+export const PreviewNotice = () => (
+  <div className="preview-notice" role="note">
+    <p className="preview-notice__text">
+      Firefox has a new look called Nova. Firefox Color still shows the previous
+      design, so your theme may look slightly different in Firefox.{" "}
+      <a
+        className="preview-notice__link"
+        href={NOVA_BLOG_POST_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Learn more about Nova and the new changes
+      </a>
+    </p>
+  </div>
+);
+
+export default PreviewNotice;

src/web/lib/components/PreviewNotice/index.scss

@@ -0,0 +1,29 @@
+@import "../../common.scss";
+
+.preview-notice {
+  align-self: start;
+  background-color: var(--white-100);
+  border-left: 4px solid var(--blue-50);
+  border-radius: 4px;
+  box-shadow: 0 1px 4px var(--grey-90-a10);
+  margin: 0 auto;
+  max-width: 1080px;
+  padding: 10px 16px;
+  position: relative;
+  width: calc(100% - 40px);
+  z-index: 1;
+}
+
+.preview-notice__text {
+  color: var(--grey-90);
+  font-size: 14px;
+  line-height: 20px;
+  margin: 0;
+  text-align: center;
+}
+
+.preview-notice__link {
+  color: var(--blue-70);
+  font-weight: 600;
+  text-decoration: underline;
+}