V2: Design Navbar (#4017)

# Description of Changes

- Changed the navbar styling to include all the icons that were on our
figma design
- Added a new link to our index.html to include the MUI symbols. 
- I chose to keep the automate and read icons the same as they were
already because I feel as though they make more sense

```
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,700,0,0" />
```
---

figma vs app dark
<img width="422" height="1038" alt="Screenshot 2025-07-21 at 5 44 19 PM"
src="https://github.com/user-attachments/assets/15d5583f-ce3c-418f-81c6-6e6022f5f4d0"
/>

figma vs app light
<img width="244" height="926" alt="Screenshot 2025-07-21 at 5 57 27 PM"
src="https://github.com/user-attachments/assets/c855d02b-20ee-4ccf-af1f-a3c1a4c2a154"
/>



## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [x] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/src/styles/theme.css

@@ -72,6 +72,8 @@
   --bg-surface: #ffffff;
   --bg-raised: #f9fafb;
   --bg-muted: #f3f4f6;
+  --bg-background: #f9fafb;
+  --bg-toolbar: #ffffff;
   --text-primary: #111827;
   --text-secondary: #4b5563;
   --text-muted: #6b7280;
@@ -80,51 +82,101 @@
   --border-strong: #9ca3af;
   --hover-bg: #f9fafb;
   --active-bg: #f3f4f6;
+
+  /* Icon colors for light mode */
+  --icon-user-bg: #9CA3AF;
+  --icon-user-color: #FFFFFF;
+  --icon-notifications-bg: #9CA3AF;
+  --icon-notifications-color: #FFFFFF;
+  --icon-tools-bg: #1E88E5;
+  --icon-tools-color: #FFFFFF;
+  --icon-read-bg: #4CAF50;
+  --icon-read-color: #FFFFFF;
+  --icon-sign-bg: #3BA99C;
+  --icon-sign-color: #FFFFFF;
+  --icon-automate-bg: #A576E3;
+  --icon-automate-color: #FFFFFF;
+  --icon-files-bg: #D3E7F7;
+  --icon-files-color: #0A8BFF;
+  --icon-activity-bg: #D3E7F7;
+  --icon-activity-color: #0A8BFF;
+  --icon-config-bg: #9CA3AF;
+  --icon-config-color: #FFFFFF;
+
+  /* Inactive icon colors for light mode */
+  --icon-inactive-bg: #9CA3AF;
+  --icon-inactive-color: #FFFFFF;
 }
 
 [data-mantine-color-scheme="dark"] {
   /* Dark theme gray scale (inverted) */
   --gray-50: 17 24 39;
-  --gray-100: 31 41 55;
-  --gray-200: 55 65 81;
-  --gray-300: 75 85 99;
-  --gray-400: 107 114 128;
-  --gray-500: 156 163 175;
-  --gray-600: 209 213 219;
-  --gray-700: 229 231 235;
-  --gray-800: 243 244 246;
-  --gray-900: 249 250 251;
+  --gray-100: 31 35 41;
+  --gray-200: 42 47 54;
+  --gray-300: 55 65 81;
+  --gray-400: 75 85 99;
+  --gray-500: 107 114 128;
+  --gray-600: 156 163 175;
+  --gray-700: 209 213 219;
+  --gray-800: 229 231 235;
+  --gray-900: 243 244 246;
 
   /* Dark semantic colors for Tailwind */
-  --surface: 31 41 55;
-  --background: 17 24 39;
-  --border: 75 85 99;
+  --surface: 31 35 41;
+  --background: 42 47 54;
+  --border: 55 65 81;
 
   /* Dark theme Mantine colors */
   --color-gray-50: #111827;
-  --color-gray-100: #1f2937;
-  --color-gray-200: #374151;
-  --color-gray-300: #4b5563;
-  --color-gray-400: #6b7280;
-  --color-gray-500: #9ca3af;
-  --color-gray-600: #d1d5db;
-  --color-gray-700: #e5e7eb;
-  --color-gray-800: #f3f4f6;
-  --color-gray-900: #f9fafb;
+  --color-gray-100: #1F2329;
+  --color-gray-200: #2A2F36;
+  --color-gray-300: #374151;
+  --color-gray-400: #4b5563;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #9ca3af;
+  --color-gray-700: #d1d5db;
+  --color-gray-800: #e5e7eb;
+  --color-gray-900: #f3f4f6;
 
   /* Dark theme semantic colors */
-  --bg-surface: #1f2937;
-  --bg-raised: #374151;
-  --bg-muted: #374151;
+  --bg-surface: #2A2F36;
+  --bg-raised: #1F2329;
+  --bg-muted: #1F2329;
+  --bg-background: #2A2F36;
+  --bg-toolbar: #272A2E;
   --text-primary: #f9fafb;
   --text-secondary: #d1d5db;
   --text-muted: #9ca3af;
-  --border-subtle: #374151;
-  --border-default: #4b5563;
-  --border-strong: #6b7280;
+  --border-subtle: #2A2F36;
+  --border-default: #374151;
+  --border-strong: #4b5563;
   --hover-bg: #374151;
   --active-bg: #4b5563;
 
+  /* Icon colors for dark mode */
+  --icon-user-bg: #2A2F36;
+  --icon-user-color: #6E7581;
+  --icon-notifications-bg: #2A2F36;
+  --icon-notifications-color: #6E7581;
+  --icon-tools-bg: #4B525A;
+  --icon-tools-color: #EAEAEA;
+  --icon-read-bg: #4B525A;
+  --icon-read-color: #EAEAEA;
+  --icon-sign-bg: #4B525A;
+  --icon-sign-color: #EAEAEA;
+  --icon-automate-bg: #4B525A;
+  --icon-automate-color: #EAEAEA;
+  --icon-files-bg: #4B525A;
+  --icon-files-color: #EAEAEA;
+  --icon-activity-bg: #4B525A;
+  --icon-activity-color: #EAEAEA;
+  --icon-config-bg: #4B525A;
+  --icon-config-color: #EAEAEA;
+
+  /* Inactive icon colors for dark mode */
+  --icon-inactive-bg: #2A2F36;
+  --icon-inactive-color: #6E7581;
+
   /* Adjust shadows for dark mode */
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);