chore(issue-template): improve bug report template (#8673)

* chore(issue-template): improve bug report template

* chore(issue-template): small fix to align text with logo

* chore(issue-template): fix img not showing

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -4,35 +4,76 @@ body:
   - type: markdown
     attributes:
       value: |
-        Thank you for filing a bug report!
+        <p align="center">
+          <a href="https://zen-browser.app">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/zen-browser/desktop/dev/docs/assets/zen-light.svg">
+              <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/zen-browser/desktop/dev/docs/assets/zen-dark.svg">
+              <img src="https://raw.githubusercontent.com/zen-browser/desktop/dev/docs/assets/zen-light.svg" alt="Zen Logo" width="64" height="64">
+            </picture>
+            <img src="https://raw.githubusercontent.com/zen-browser/desktop/dev/docs/assets/zen-browser.svg" alt="Zen Browser Text" width="156" height="64">
+          </a>
+        </p>
 
-        ## IMPORTANT READ
-        - Please provide descriptive titles. Bad titles do more harm than good.
-        - Please search existing issues to avoid creating duplicates.
-        - For enhancement requests, please use GitHub Discussions.
-        - Please fill out the template below to the best of your ability.
-        - Please describe the issue as much as possible and provide steps to reproduce it along with visual aids if possible.
+        <p align="center"><em>Thank you for filing a bug report!</em></p>
+
+        > [!IMPORTANT]
+        > - Please provide descriptive titles. Bad titles do more harm than good.
+        > - Please search existing issues to avoid creating duplicates.
+        > - For enhancement requests, please use GitHub Discussions.
+        > - Please fill out the template below to the best of your ability.
+        > - Please describe the issue as much as possible and provide steps to reproduce it along with visual aids if possible.
   - type: checkboxes
     id: captchas
     attributes:
-      label: Captchas
-      description: Just making sure you did actually read the instructions.
+      label: Preliminary Checks
+      description: Please confirm the following before submitting a bug report. This helps us triage and resolve issues more efficiently.
       options:
-        - label: I have read the instructions.
+        - label: I have read and understood the important section above.
+          required: true
         - label: I have searched existing issues and avoided creating duplicates.
+          required: true
         - label: I am not filing an enhancement request.
+          required: true
         - label: I have checked that this issue cannot be reproduced on Mozilla Firefox.
+          required: true
         - label: I have checked that this issue can be reproduced once I removed all my Mods and Custom CSS.
-    validations:
-      required: true
+          required: true
   - type: textarea
     id: what-happened
     attributes:
       label: What happened?
-      description: Also tell us, what did you expect to happen?
+      description: Describe the bug clearly and concisely.
       placeholder: Tell us what you see!
     validations:
       required: true
+  - type: input
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: Please write a description of what was supposed to happen.
+    validations:
+      required: true
+  - type: input
+    id: actual-behavior
+    attributes:
+      label: Actual behavior
+      description: Please write a description of what actually happened.
+    validations:
+      required: true
+  - type: textarea
+    id: how-to-reproduce
+    attributes:
+      label: Steps to reproduce
+      description: Please Provide numbered steps to reproduce this issue so developers can replicate them easily.
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots and videos
+      description: |
+        If applicable, add screenshots or videos to help explain your problem.
   - type: input
     id: version
     attributes:
@@ -52,8 +93,8 @@ body:
         - Linux (Tarball)
         - macOS - aarch64
         - macOS - Intel
-        - Windows - x64
         - Windows - aarch64
+        - Windows - x64
         - Other
     validations:
       required: true
@@ -63,26 +104,26 @@ body:
       label: What component is this issue related to?
       options:
         - Other
-        - Compact Mode
-        - Workspaces
-        - Mods / Themes
-        - Glance
-        - URL Bar
-        - Tabs
-        - Split View
-        - Settings
-        - Privacy
-        - Performance
-        - Media Controler
-        - Tab unloading
-        - Tab Folders
-        - Keyboard Shortcuts
-        - Security
-        - Extensions
-        - Customizable UI / Toolbars
-        - Localization
         - Bookmarks
+        - Compact Mode
+        - Customizable UI / Toolbars
+        - Extensions
+        - Glance
+        - Keyboard Shortcuts
+        - Localization
+        - Media Controler
+        - Mods / Themes
+        - Performance
+        - Privacy
+        - Security
+        - Settings
+        - Split View
         - Sync
+        - Tab Folders
+        - Tab unloading
+        - Tabs
+        - URL Bar
+        - Workspaces
     validations:
       required: true
 

docs/assets/zen-browser.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 64" height="64" width="156">
+  <defs>
+    <style>
+      .label {
+        font-size: 1.5rem;
+        font-family: sans-serif;
+        font-weight: 700;
+        text-align: center;
+        fill: #1f1f1f;
+      }
+      @media (prefers-color-scheme: dark) {
+        .label {
+          fill: #d1cfc0;
+        }
+      }
+    </style>
+  </defs>
+  <text class="label" y="38" x="5">Zen Browser</text>
+</svg>