V2 styling requests (#4288)

some of the requested changes warrant discussion so I haven't applied
all of them here. Making a draft PR for now, we can discuss the rest
later

# Description of Changes

See Matts todo list, the crossed out items are what were addressed in
this PR

---

## Checklist

### General

- [ ] 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)
- [ ] 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)
- [ ] I have performed a self-review of my own code
- [ ] 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)

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

### Testing (if applicable)

- [ ] 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.

---------

Co-authored-by: James Brunton <[email protected]>

frontend/src/components/tools/ToolPicker.tsx

@@ -131,7 +131,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
                 borderTop: `0.0625rem solid var(--tool-header-border)`,
                 borderBottom: `0.0625rem solid var(--tool-header-border)`,
                 padding: "0.5rem 1rem",
-                fontWeight: 700,
+                fontWeight: 600,
                 background: "var(--tool-header-bg)",
                 color: "var(--tool-header-text)",
                 cursor: "pointer",
@@ -141,7 +141,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
               }}
               onClick={() => scrollTo(quickAccessRef)}
             >
-              <span>{t("toolPicker.quickAccess", "QUICK ACCESS")}</span>
+              <span style={{ fontSize: "1rem" }}>{t("toolPicker.quickAccess", "QUICK ACCESS")}</span>
               <span
                 style={{
                   background: "var(--tool-header-badge-bg)",
@@ -156,7 +156,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
               </span>
             </div>
 
-            <Box ref={quickAccessRef} w="100%">
+            <Box ref={quickAccessRef} w="100%" my="sm">
               <Stack p="sm" gap="xs">
                 {quickSection?.subcategories.map(sc =>
                   renderToolButtons(t, sc, selectedToolKey, onSelect, false)
@@ -177,7 +177,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
                 borderTop: `0.0625rem solid var(--tool-header-border)`,
                 borderBottom: `0.0625rem solid var(--tool-header-border)`,
                 padding: "0.5rem 1rem",
-                fontWeight: 700,
+                fontWeight: 600,
                 background: "var(--tool-header-bg)",
                 color: "var(--tool-header-text)",
                 cursor: "pointer",
@@ -187,7 +187,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
               }}
               onClick={() => scrollTo(allToolsRef)}
             >
-              <span>{t("toolPicker.allTools", "ALL TOOLS")}</span>
+              <span style={{ fontSize: "1rem" }}>{t("toolPicker.allTools", "ALL TOOLS")}</span>
               <span
                 style={{
                   background: "var(--tool-header-badge-bg)",