chore: Update welcome page CSS and build configurations

.github/workflows/linux-alpha-build.yml

@@ -16,7 +16,7 @@ jobs:
       fail-fast: false
       matrix:
         generic: [true, false]
-    name: Build Linux - ${{ matrix.generic == 'true' && 'Generic' || 'Specific' }}
+    name: Build Linux - ${{ matrix.generic == true && 'Generic' || 'Specific' }}
 
     steps:
       - name: Install Node.js
@@ -92,7 +92,7 @@ jobs:
 
       - name: Import
         env:
-          SURFER_COMPAT: ${{ matrix.generic == 'true' }}
+          SURFER_COMPAT: ${{ matrix.generic == true }}
         run: pnpm surfer import
 
       - name: Bootstrap
@@ -103,19 +103,19 @@ jobs:
 
       - name: Build
         env:
-          SURFER_COMPAT: ${{ matrix.generic == 'true' }}
+          SURFER_COMPAT: ${{ matrix.generic == true }}
         continue-on-error: true
         run: sh .github/workflows/src/alpha-build.sh
 
       - name: Build again if it failed
         if: failure()
         env:
-          SURFER_COMPAT: ${{ matrix.generic == 'true' }}
+          SURFER_COMPAT: ${{ matrix.generic == true }}
         run: sh .github/workflows/src/alpha-build.sh
 
       - name: Package
         env:
-          SURFER_COMPAT: ${{ matrix.generic == 'true' }}
+          SURFER_COMPAT: ${{ matrix.generic == true }}
         run: pnpm package
 
       - name: Rename artifacts
@@ -126,17 +126,17 @@ jobs:
       - name: Upload binary
         uses: actions/upload-artifact@v4
         with:
-          name: zen.linux-${{ matrix.generic == 'true' && 'generic' || 'specific' }}.tar.bz2
+          name: zen.linux-${{ matrix.generic == true && 'generic' || 'specific' }}.tar.bz2
           path: ./zen.linux.tar.bz2
 
       - name: Upload mar
         uses: actions/upload-artifact@v4
         with:
-          name: linux${{ matrix.generic == 'true' && '-generic' || '' }}.mar
+          name: linux${{ matrix.generic == true && '-generic' || '' }}.mar
           path: ./linux.mar
 
       - name: Upload update manifests
         uses: actions/upload-artifact@v4
         with:
-          name: linux_update_manifest_${{ matrix.generic == 'true' && 'generic' || 'specific' }}
+          name: linux_update_manifest_${{ matrix.generic == true && 'generic' || 'specific' }}
           path: ./dist/update

.github/workflows/windows-alpha-build.yml

@@ -16,7 +16,7 @@ on:
 
 jobs:
   windows-build:
-    name: Build Windows - ${{ matrix.generic == 'true' && 'Generic' || 'Specific' }}
+    name: Build Windows - ${{ matrix.generic == true && 'Generic' || 'Specific' }}
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
@@ -137,12 +137,12 @@ jobs:
 
       - name: Import
         env:
-          SURFER_COMPAT: ${{ matrix.generic == 'true' }}
+          SURFER_COMPAT: ${{ matrix.generic == true }}
         run: pnpm surfer import --verbose
 
       - name: Build
         env:
-          SURFER_COMPAT: ${{ matrix.generic == 'true' }}
+          SURFER_COMPAT: ${{ matrix.generic == true }}
         run: |
           set -x
           dos2unix configs/windows/mozconfig
@@ -155,7 +155,7 @@ jobs:
 
       - name: Package
         env:
-          SURFER_COMPAT: ${{ matrix.generic == 'true' }}
+          SURFER_COMPAT: ${{ matrix.generic == true }}
         run: |
           set -x
           export SURFER_PLATFORM="win32"
@@ -175,7 +175,7 @@ jobs:
         uses: actions/upload-artifact@v4
         if: ${{ !inputs.generate-gpo }}
         with:
-          name: zen.win-${{ matrix.generic == 'true' && 'generic' || 'specific' }}.zip
+          name: zen.win-${{ matrix.generic == true && 'generic' || 'specific' }}.zip
           path: ./zen.win64.zip
 
       - name: Upload PGO build
@@ -189,14 +189,14 @@ jobs:
         uses: actions/upload-artifact@v4
         if: ${{ !inputs.generate-gpo }}
         with:
-          name: windows${{ matrix.generic == 'true' && '-generic' || '' }}.mar
+          name: windows${{ matrix.generic == true && '-generic' || '' }}.mar
           path: ./windows.mar
 
       - name: Upload installer
         uses: actions/upload-artifact@v4
         if: ${{ !inputs.generate-gpo }}
         with:
-          name: zen.installer${{ matrix.generic == 'true' && '-generic' || '' }}.exe
+          name: zen.installer${{ matrix.generic == true && '-generic' || '' }}.exe
           path: ./dist/zen.installer.exe
 
       - name: Upload installer stub
@@ -210,5 +210,5 @@ jobs:
         uses: actions/upload-artifact@v4
         if: ${{ !inputs.generate-gpo }}
         with:
-          name: windows_update_manifest_${{ matrix.generic == 'true' && 'generic' || 'specific' }}
+          name: windows_update_manifest_${{ matrix.generic == true && 'generic' || 'specific' }}
           path: ./dist/update

src/browser/components/zen-welcome/welcome.css

@@ -12,7 +12,6 @@ html {
 body {
   display: flex;
   position: relative;
-  flex-flow: row nowrap;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -20,6 +19,25 @@ body {
   -moz-transform: scale(1.1); /* zoom */
 }
 
+#first-view {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  margin: 20px;
+  background: var(--zen-dialog-background);
+  width: 100%;
+  position: relative;
+}
+
+#second-view {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
 button {
   padding: 10px 40px;
 }

src/browser/components/zen-welcome/welcome.html

@@ -27,85 +27,91 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     <script src="chrome://browser/content/zenThemeModifier.js"></script>
   </head>
   <body>
-    <div class="page" id="welcome">
-      <img class="icon" src="chrome://branding/content/about-logo.png" />
-      <h1 data-l10n-id="welcome-dialog-welcome"></h1>
-
-      <p data-l10n-id="welcome-dialog-welcome-subtext"></p>
-
-      <button
-        id="welcomeNext"
-        class="primary"
-        data-l10n-id="welcome-dialog-get-started"
-      ></button>
-    </div>
-
-    <div class="page page-split" id="import">
-      <div>
-        <h1 data-l10n-id="welcome-dialog-import"></h1>
-        <p data-l10n-id="welcome-dialog-import-subtext"></p>
+    <div id="first-view">
+      <div class="page" id="welcome">
+        <img class="icon" src="chrome://branding/content/about-logo.png" />
+        <h1 data-l10n-id="welcome-dialog-welcome"></h1>
+  
+        <p data-l10n-id="welcome-dialog-welcome-subtext"></p>
+  
+        <button
+          id="welcomeNext"
+          class="primary"
+          data-l10n-id="welcome-dialog-get-started"
+        ></button>
       </div>
-      <div>
-        <hbox>
-          <button
-            class="primary"
-            id="importBrowser"
-            data-l10n-id="welcome-dialog-import-action"
-          ></button>
-          <button
-            class="text-link ghost-button"
-            id="importNext"
-            data-l10n-id="welcome-dialog-skip"
-          ></button>
-        </hbox>
-      </div>
-    </div>
-
-    <div class="page page-split" id="theme">
-      <div>
-        <h1 data-l10n-id="welcome-dialog-theme"></h1>
-        <p data-l10n-id="welcome-dialog-theme-subtext"></p>
-      </div>
-      <div>
-        <h1 data-l10n-id="welcome-dialog-theme-header-1"></h1>
-        <div id="themeList" class="cardGroup"></div>
-        <h1 data-l10n-id="welcome-dialog-theme-header-2"></h1>
-        <div id="colorListWrapper">
-          <canvas id="colorList" class="cardGroup"></canvas>
-          <div id="dragBall"></div>
-          <div id="colorPreview"></div>
+  
+      <div class="page page-split" id="import">
+        <div>
+          <h1 data-l10n-id="welcome-dialog-import"></h1>
+          <p data-l10n-id="welcome-dialog-import-subtext"></p>
         </div>
+        <div>
+          <hbox>
+            <button
+              class="primary"
+              id="importBrowser"
+              data-l10n-id="welcome-dialog-import-action"
+            ></button>
+            <button
+              class="text-link ghost-button"
+              id="importNext"
+              data-l10n-id="welcome-dialog-skip"
+            ></button>
+          </hbox>
+        </div>
+      </div>
+  
+      <div class="page page-split" id="theme">
+        <div>
+          <h1 data-l10n-id="welcome-dialog-theme"></h1>
+          <p data-l10n-id="welcome-dialog-theme-subtext"></p>
+        </div>
+        <div>
+          <h1 data-l10n-id="welcome-dialog-theme-header-1"></h1>
+          <div id="themeList" class="cardGroup"></div>
+          <h1 data-l10n-id="welcome-dialog-theme-header-2"></h1>
+          <div id="colorListWrapper">
+            <canvas id="colorList" class="cardGroup"></canvas>
+            <div id="dragBall"></div>
+            <div id="colorPreview"></div>
+          </div>
+          <button
+            id="themeNext"
+            class="primary"
+            data-l10n-id="welcome-dialog-theme-action"
+          ></button>
+        </div>
+      </div>
+  
+      <div class="page page-split" id="search">
+        <div>
+          <h1 data-l10n-id="welcome-dialog-search"></h1>
+          <p data-l10n-id="welcome-dialog-search-subtext"></p>
+        </div>
+        <div>
+          <div id="searchList" class="cardGroup"></div>
+          <button
+            id="searchNext"
+            class="primary"
+            data-l10n-id="welcome-dialog-search-action"
+          ></button>
+        </div>
+      </div>
+  
+      <div class="page" id="thanks">
+        <h1 data-l10n-id="welcome-dialog-thanks"></h1>
+        <p data-l10n-id="welcome-dialog-thanks-subtext"></p>
         <button
-          id="themeNext"
+          id="thanksNext"
           class="primary"
-          data-l10n-id="welcome-dialog-theme-action"
+          data-l10n-id="welcome-dialog-thanks-action"
         ></button>
       </div>
     </div>
 
-    <div class="page page-split" id="search">
-      <div>
-        <h1 data-l10n-id="welcome-dialog-search"></h1>
-        <p data-l10n-id="welcome-dialog-search-subtext"></p>
-      </div>
-      <div>
-        <div id="searchList" class="cardGroup"></div>
-        <button
-          id="searchNext"
-          class="primary"
-          data-l10n-id="welcome-dialog-search-action"
-        ></button>
-      </div>
-    </div>
+    <div id="second-view">
 
-    <div class="page" id="thanks">
-      <h1 data-l10n-id="welcome-dialog-thanks"></h1>
-      <p data-l10n-id="welcome-dialog-thanks-subtext"></p>
-      <button
-        id="thanksNext"
-        class="primary"
-        data-l10n-id="welcome-dialog-thanks-action"
-      ></button>
     </div>
 
     <div id="dots"></div>