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 <jbrunton96@gmail.com>

frontend/src/components/shared/AllToolsNavButton.tsx

@@ -26,7 +26,7 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
 
   const iconNode = (
     <span className="iconContainer">
-      <AppsIcon sx={{ fontSize: '1.5rem' }} />
+      <AppsIcon sx={{ fontSize: '2rem' }} />
     </span>
   );
 

frontend/src/components/shared/LandingPage.tsx

@@ -36,7 +36,7 @@ const LandingPage = () => {
   };
 
   return (
-    <Container size="lg" p={0} h="100%" className="flex items-center justify-center" style={{ position: 'relative' }}>
+    <Container size="70rem" p={0} h="102%" className="flex items-center justify-center" style={{ position: 'relative' }}>
       {/* White PDF Page Background */}
       <Dropzone
         onDrop={handleFileDrop}
@@ -48,7 +48,7 @@ const LandingPage = () => {
           left: '50%',
           transform: 'translateX(-50%)',
           bottom: 0,
-          borderRadius: '0.5rem 0.5rem 0 0',
+          borderRadius: '0.25rem 0.25rem 0 0',
           filter: 'var(--drop-shadow-filter)',
           backgroundColor: 'var(--landing-paper-bg)',
           transition: 'background-color 0.4s ease',
@@ -66,7 +66,7 @@ const LandingPage = () => {
           style={{
             position: 'absolute',
             top: 0,
-            right: ".5rem",
+            right: 0,
             zIndex: 10,
 
           }}
@@ -75,15 +75,13 @@ const LandingPage = () => {
             src={colorScheme === 'dark' ? '/branding/StirlingPDFLogoNoTextDark.svg' : '/branding/StirlingPDFLogoNoTextLight.svg'}
             alt="Stirling PDF Logo"
             style={{
-              width: '10rem',
               height: 'auto',
               pointerEvents: 'none',
-              marginTop: '-0.5rem'
             }}
           />
         </div>
         <div
-          className={`min-h-[25vh] flex flex-col items-center justify-center px-8 py-8 w-full min-w-[360px] border transition-all duration-200 dropzone-inner relative`}
+          className={`min-h-[45vh] flex flex-col items-center justify-center px-8 py-8 w-full min-w-[30rem] max-w-[calc(100%-2rem)] border transition-all duration-200 dropzone-inner relative`}
           style={{
             borderRadius: '0.5rem',
             backgroundColor: 'var(--landing-inner-paper-bg)',

frontend/src/components/shared/QuickAccessBar.tsx

@@ -68,7 +68,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     {
       id: 'automate',
       name: t("quickAccess.automate", "Automate"),
-      icon: <LocalIcon icon="automation-outline" width="1.25rem" height="1.25rem" />,
+      icon: <LocalIcon icon="automation-outline" width="1.6rem" height="1.6rem" />,
       size: 'lg',
       isRound: false,
       type: 'navigation',
@@ -80,7 +80,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
     {
       id: 'files',
       name: t("quickAccess.files", "Files"),
-      icon: <LocalIcon icon="folder-rounded" width="1.25rem" height="1.25rem" />,
+      icon: <LocalIcon icon="folder-rounded" width="1.6rem" height="1.6rem" />,
       isRound: true,
       size: 'lg',
       type: 'modal',
@@ -151,7 +151,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
 
                   <div className="flex flex-col items-center gap-1" style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}>
                     <ActionIcon
-                      size={isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView) ? (config.size || 'xl') : 'lg'}
+                      size={isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView) ? (config.size || 'lg') : 'lg'}
                       variant="subtle"
                        onClick={() => {
                          config.onClick();

frontend/src/components/shared/TopControls.tsx

@@ -6,6 +6,7 @@ import VisibilityIcon from "@mui/icons-material/Visibility";
 import EditNoteIcon from "@mui/icons-material/EditNote";
 import FolderIcon from "@mui/icons-material/Folder";
 import { ModeType, isValidMode } from '../../contexts/NavigationContext';
+import { Tooltip } from "./Tooltip";
 
 const viewOptionStyle = {
   display: 'inline-flex',
@@ -17,8 +18,8 @@ const viewOptionStyle = {
 }
 
 
-// Create view options with icons and loading states
-const createViewOptions = (switchingTo: ModeType | null) => [
+// Build view options showing text only for current view; others icon-only with tooltip
+const createViewOptions = (currentView: ModeType, switchingTo: ModeType | null) => [
   {
     label: (
       <div style={viewOptionStyle as React.CSSProperties}>
@@ -34,27 +35,35 @@ const createViewOptions = (switchingTo: ModeType | null) => [
   },
   {
     label: (
-      <div style={viewOptionStyle as React.CSSProperties}>
-        {switchingTo === "pageEditor" ? (
-          <Loader size="xs" />
-        ) : (
-          <EditNoteIcon fontSize="small" />
-        )}
-        <span>Page Editor</span>
-      </div>
+      <Tooltip content="Page Editor" position="bottom" arrow={true}>
+        <div style={viewOptionStyle as React.CSSProperties}>
+          {currentView === "pageEditor" ? (
+            <>
+              {switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />}
+              <span>Page Editor</span>
+            </>
+          ) : (
+            switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />
+          )}
+        </div>
+      </Tooltip>
     ),
     value: "pageEditor",
   },
   {
     label: (
-      <div style={viewOptionStyle as React.CSSProperties}>
-        {switchingTo === "fileEditor" ? (
-          <Loader size="xs" />
-        ) : (
-          <FolderIcon fontSize="small" />
-        )}
-        <span>File Manager</span>
-      </div>
+      <Tooltip content="Active Files" position="bottom" arrow={true}>
+        <div style={viewOptionStyle as React.CSSProperties}>
+          {currentView === "fileEditor" ? (
+            <>
+              {switchingTo === "fileEditor" ? <Loader size="xs" /> : <FolderIcon fontSize="small" />}
+              <span>Active Files</span>
+            </>
+          ) : (
+            switchingTo === "fileEditor" ? <Loader size="xs" /> : <FolderIcon fontSize="small" />
+          )}
+        </div>
+      </Tooltip>
     ),
     value: "fileEditor",
   },
@@ -103,11 +112,10 @@ const TopControls = ({
       {!isToolSelected && (
         <div className="flex justify-center mt-[0.5rem]">
             <SegmentedControl
-              data={createViewOptions(switchingTo)}
+              data={createViewOptions(currentView, switchingTo)}
               value={currentView}
               onChange={handleViewChange}
               color="blue"
-              radius="xl"
               fullWidth
               className={isRainbowMode ? rainbowStyles.rainbowSegmentedControl : ''}
               style={{
@@ -118,13 +126,18 @@ const TopControls = ({
               styles={{
                 root: {
                   borderRadius: 9999,
+                  maxHeight: '2.6rem',
                 },
                 control: {
                   borderRadius: 9999,
                 },
                 indicator: {
                   borderRadius: 9999,
+                  maxHeight: '2rem',
                 },
+                label: {
+                  paddingTop: '0rem',
+                }
               }}
             />
         </div>