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/ToolPanel.tsx

@@ -41,7 +41,7 @@ export default function ToolPanel() {
         isRainbowMode ? rainbowStyles.rainbowPaper : ''
       }`}
       style={{
-        width: isPanelVisible ? '20rem' : '0',
+        width: isPanelVisible ? '18.5rem' : '0',
         padding: '0'
       }}
     >

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)",

frontend/src/components/tools/shared/FileStatusIndicator.tsx

@@ -14,7 +14,6 @@ export interface FileStatusIndicatorProps {
 
 const FileStatusIndicator = ({
   selectedFiles = [],
-  placeholder,
 }: FileStatusIndicatorProps) => {
   const { t } = useTranslation();
   const { openFilesModal, onFilesSelect } = useFilesModalContext();

frontend/src/components/tools/shared/ToolStep.tsx

@@ -50,7 +50,7 @@ const renderTooltipTitle = (
         sidebarTooltip={true}
       >
         <Flex align="center" gap="xs" onClick={(e) => e.stopPropagation()}>
-          <Text fw={500} size="lg">
+          <Text fw={400} size="sm">
             {title}
           </Text>
           <LocalIcon icon="gpp-maybe-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)' }} />
@@ -60,7 +60,7 @@ const renderTooltipTitle = (
   }
 
   return (
-    <Text fw={500} size="lg">
+    <Text fw={500} size="sm">
       {title}
     </Text>
   );
@@ -96,7 +96,7 @@ const ToolStep = ({
     <div>
       <div
         style={{
-          padding: '1rem',
+          padding: '0.5rem',
           opacity: isCollapsed ? 0.8 : 1,
           color: isCollapsed ? 'var(--mantine-color-dimmed)' : 'inherit',
           transition: 'opacity 0.2s ease, color 0.2s ease'
@@ -114,7 +114,7 @@ const ToolStep = ({
       >
         <Flex align="center" gap="sm">
           {shouldShowNumber && (
-            <Text fw={500} size="lg" c="dimmed">
+            <Text fw={500} size="sm" c="dimmed" mr="0.5rem">
               {stepNumber}
             </Text>
           )}
@@ -135,7 +135,7 @@ const ToolStep = ({
       </Flex>
 
       {!isCollapsed && (
-        <Stack gap="md" pl={_noPadding ? 0 : "md"}>
+        <Stack gap="sm" pl={_noPadding ? 0 : "sm"}>
           {helpText && (
             <Text size="sm" c="dimmed">
               {helpText}
@@ -145,7 +145,7 @@ const ToolStep = ({
         </Stack>
       )}
       </div>
-      <Divider style={{ marginLeft: '1rem', marginRight: '-0.5rem' }} />
+      <Divider style={{ color: '#E2E8F0', marginLeft: '1rem', marginRight: '-0.5rem' }} />
     </div>
   );
 }

frontend/src/components/tools/shared/renderToolButtons.tsx

@@ -19,7 +19,7 @@ export const renderToolButtons = (
     {showSubcategoryHeader && (
       <SubcategoryHeader label={getSubcategoryLabel(t, subcategory.subcategoryId)} />
     )}
-    <Stack gap="xs">
+    <div>
       {subcategory.tools.map(({ id, tool }) => (
         <ToolButton
           key={id}
@@ -29,6 +29,6 @@ export const renderToolButtons = (
           onSelect={onSelect}
         />
       ))}
-    </Stack>
+    </div>
   </Box>
 );

frontend/src/components/tools/toolPicker/ToolButton.tsx

@@ -12,8 +12,10 @@ interface ToolButtonProps {
   rounded?: boolean;
 }
 
-const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect, rounded = false }) => {
+const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect }) => {
+  const isUnavailable = !tool.component && !tool.link;
   const handleClick = (id: string) => {
+    if (isUnavailable) return;
     if (tool.link) {
       // Open external link in new tab
       window.open(tool.link, '_blank', 'noopener,noreferrer');
@@ -23,35 +25,30 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
     onSelect(id);
   };
 
+  const tooltipContent = isUnavailable
+    ? (<span><strong>Coming soon:</strong> {tool.description}</span>)
+    : tool.description;
+
   return (
-    <Tooltip content={tool.description} position="right" arrow={true} delay={500}>
+    <Tooltip content={tooltipContent} position="right" arrow={true} delay={500}>
       <Button
         variant={isSelected ? "filled" : "subtle"}
         onClick={()=> handleClick(id)}
-        size="md"
+        size="sm"
         radius="md"
-        leftSection={<div className="tool-button-icon" style={{ color: "var(--tools-text-and-icon-color)" }}>{tool.icon}</div>}
         fullWidth
         justify="flex-start"
         className="tool-button"
-        styles={{ 
-          root: { 
-            borderRadius: rounded ? 'var(--mantine-radius-lg)' : 0, 
-            color: "var(--tools-text-and-icon-color)",
-            ...(rounded && {
-              '&:hover': {
-                borderRadius: 'var(--mantine-radius-lg)',
-              }
-            })
-          } 
-        }}
+        aria-disabled={isUnavailable}
+        styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", cursor: isUnavailable ? 'not-allowed' : undefined } }}
       >
+        <div className="tool-button-icon" style={{ color: "var(--tools-text-and-icon-color)", marginRight: "0.5rem", transform: "scale(0.8)", transformOrigin: "center", opacity: isUnavailable ? 0.25 : 1 }}>{tool.icon}</div>
         <FitText
           text={tool.name}
           lines={1}
           minimumFontScale={0.8}
           as="span"
-          style={{ display: 'inline-block', maxWidth: '100%' }}
+          style={{ display: 'inline-block', maxWidth: '100%', opacity: isUnavailable ? 0.25 : 1 }}
         />
       </Button>
     </Tooltip>