Changed the UI to a new refreshed one

src/browser/base/content/browser-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
-index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..3b588199c8ab98157cc423e47fa209d7899d8656 100644
+index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..01ebb483e6d9632588578b8b05195250ca26968a 100644
 --- a/browser/base/content/browser.js
 +++ b/browser/base/content/browser.js
 @@ -13,6 +13,15 @@ ChromeUtils.importESModule("resource://gre/modules/NotificationDB.sys.mjs");
@@ -18,15 +18,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..3b588199c8ab98157cc423e47fa209d7
  ChromeUtils.defineESModuleGetters(this, {
    AMTelemetry: "resource://gre/modules/AddonManager.sys.mjs",
    AboutNewTab: "resource:///modules/AboutNewTab.sys.mjs",
-@@ -1610,6 +1619,7 @@ var gBrowserInit = {
-     // Update the chromemargin attribute so the window can be sized correctly.
-     window.TabBarVisibility.update();
-     TabsInTitlebar.init();
-+    ZenThemeHandler.init();
- 
-     new LightweightThemeConsumer(document);
- 
-@@ -1735,6 +1745,11 @@ var gBrowserInit = {
+@@ -1735,6 +1744,11 @@ var gBrowserInit = {
      }
  
      // Misc. inits.
@@ -38,15 +30,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..3b588199c8ab98157cc423e47fa209d7
      gUIDensity.init();
      TabletModeUpdater.init();
      CombinedStopReload.ensureInitialized();
-@@ -2489,6 +2504,7 @@ var gBrowserInit = {
-     TabsInTitlebar.uninit();
- 
-     ToolbarIconColor.uninit();
-+    ZenThemeHandler.uninit();
- 
-     // In certain scenarios it's possible for unload to be fired before onload,
-     // (e.g. if the window is being closed after browser.js loads but before the
-@@ -6660,7 +6676,7 @@ function setToolbarVisibility(
+@@ -6660,7 +6674,7 @@ function setToolbarVisibility(
        );
      }
  
@@ -55,7 +39,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..3b588199c8ab98157cc423e47fa209d7
      switch (isVisible) {
        case true:
        case "always":
-@@ -9780,6 +9796,13 @@ var gDialogBox = {
+@@ -9780,6 +9794,13 @@ var gDialogBox = {
      parentElement.style.removeProperty("width");
      parentElement.style.removeProperty("height");
      document.documentElement.setAttribute("window-modal-open", true);
@@ -69,7 +53,7 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..3b588199c8ab98157cc423e47fa209d7
      // Call this first so the contents show up and get layout, which is
      // required for SubDialog to work.
      parentElement.showModal();
-@@ -10157,3 +10180,45 @@ var FirefoxViewHandler = {
+@@ -10157,3 +10178,15 @@ var FirefoxViewHandler = {
      this.button?.toggleAttribute("attention", shouldShow);
    },
  };
@@ -85,33 +69,3 @@ index 4f145c494973374e87f3a3ed5eb6b33a43c518c8..3b588199c8ab98157cc423e47fa209d7
 +  // TODO: actually use profile data to generate the avatar, instead of just using the name
 +  mainWindowEl.style.setProperty("--avatar-image-url", `url(${profile.zenAvatarPath})`);
 +} 
-+
-+var ZenThemeHandler = {
-+  init() {
-+    window.addEventListener("windowlwthemeupdate", this);
-+    window.addEventListener("nativethemechange", this);
-+    this.executeAllUpdates();
-+  },
-+
-+  uninit() {
-+    window.removeEventListener("windowlwthemeupdate", this);
-+    window.removeEventListener("nativethemechange", this);
-+  },
-+
-+  handleEvent(event) {
-+    this.executeAllUpdates();
-+  },
-+
-+  executeAllUpdates() {
-+    this.updateAccentColorPref();
-+  },
-+
-+  updateAccentColorPref() {
-+    let root = document.documentElement;
-+    const themeAccent = Services.prefs.getStringPref(
-+      "zen.theme.accent-color",
-+      "#0b57d0"
-+    );
-+    root.style.setProperty("--zen-primary-color", themeAccent);
-+  },
-+}

src/browser/themes/shared/zen-browser-shared.css

@@ -60,7 +60,7 @@
 #urlbar, #urlbar .urlbar-page-action, 
 #urlbar #tracking-protection-icon-container,
 #urlbar:not([extend="true"]) #identity-box:not(.chromeUI) #identity-icon-box {
-  border-radius: 999px !important;
+  border-radius: 999px;
 }
 
 #urlbar #identity-box.chromeUI #identity-icon-box {
@@ -120,6 +120,46 @@ toolbar .toolbarbutton-1 {
   }
 }
 
+#identity-permission-box {
+  margin: 0 5px 0 0 !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+#identity-box:has(#identity-permission-box[hasPermissions]) #identity-icon-box {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  margin-right: 0 !important;
+}
+
+#notification-popup-box {
+  border-radius: 999px;
+  margin-right: 5px;
+  transition: .2s;
+  height: 100%;
+  padding: 7px;
+}
+
+button.popup-notification-dropmarker {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.panel-footer:has(button.popup-notification-dropmarker:not([hidden="true"])) button.popup-notification-secondary-button {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.searchbar-engine-one-off-item {
+  max-width: 20px;
+  min-width: 20px !important;
+  justify-content: center;
+}
+
+#downloadsHistory {
+  margin-top: 5px
+}
+
 /* Toolbars customization */
 
 #titlebar {
@@ -306,8 +346,8 @@ toolbarbutton#scrollbutton-up {
   color: var(--zen-secondary-btn-color) !important;
 }
 
-.footer-button[default] {
-  outline-color: var(--button-primary-bgcolor);
+.footer-button:is([default], .primary) {
+  --focus-outline-color: var(--zen-primary-btn-color) !important;
 }
 
 menuseparator {

src/toolkit/modules/LightweightThemeConsumer-sys-mjs.patch

@@ -0,0 +1,27 @@
+diff --git a/toolkit/modules/LightweightThemeConsumer.sys.mjs b/toolkit/modules/LightweightThemeConsumer.sys.mjs
+index cf388eb3d393403c077f2a01c3e670cefad7db59..747095a95fc87837093ec7c85437f289450b4486 100644
+--- a/toolkit/modules/LightweightThemeConsumer.sys.mjs
++++ b/toolkit/modules/LightweightThemeConsumer.sys.mjs
+@@ -315,6 +315,7 @@ LightweightThemeConsumer.prototype = {
+       theme.additionalBackgrounds
+     );
+     _setProperties(root, active, theme, hasTheme);
++    this._zenSetAccentColor(root);
+ 
+     if (hasTheme) {
+       if (updateGlobalThemeData) {
+@@ -406,6 +407,14 @@ LightweightThemeConsumer.prototype = {
+       this._lastExperimentData.stylesheet = stylesheet;
+     }
+   },
++
++  _zenSetAccentColor(root) {
++    const themeAccent = Services.prefs.getStringPref(
++      "zen.theme.accent-color",
++      "#0b57d0"
++    );
++    root.style.setProperty("--zen-primary-color", themeAccent);
++  },
+ };
+ 
+ function _getContentProperties(doc, active, data) {

src/toolkit/themes/shared/in-content/zen-common-shared.css

@@ -10,6 +10,7 @@
    */
 
   /** Primary color will be injected by the theme as `--zen-primary-color` */
+  --zen-primary-color: #0b57d0; /* This is the default blue color */
 
   /** Zen colors are generated automatically from the primary color */
   --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
@@ -52,7 +53,10 @@
   --zen-in-content-dialog-background: var(--zen-colors-tertiary);
 
   --zen-button-border-radius: 999px;
-  --zen-button-padding: 0.7em 2.3em;
+  --zen-button-padding: 0.9em 2.3em;
+
+  /* Other colors */
+  --urlbar-box-bgcolor: light-dark(white, rgb(66, 65, 77)) !important;
 
   /* TODO: Support dark themes! */
 }

src/toolkit/themes/shared/zen-global-shared.css

@@ -11,10 +11,6 @@
   &:-moz-lwtheme {
     color: var(--lwt-text-color);
     --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
-
-    @media not (prefers-contrast) {
-      --focus-outline-color: light-dark(rgb(92, 91, 91), rgb(166, 166, 166)) !important;
-    }
   }
 }