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/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>