design: Location bar and other UI styling

InputBase paddings are idiosyncratic if there is both a start and an end
adornment. To simplify the styles, we override the styling from InputBase
and compute our own paddings.

The animated color change when switching from a secure site to an
insecure one was distracting, so we disable color animations in the
location bar.

1 files changed, 8 insertions, 8 deletions

diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index 82ed657..77b02b6 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -23,6 +23,7 @@ import IconArrowForward from '@mui/icons-material/ArrowForward';
 import IconStop from '@mui/icons-material/Close';
 import IconHome from '@mui/icons-material/HomeOutlined';
 import IconRefresh from '@mui/icons-material/Refresh';
+import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import { Service } from '@sophie/shared';
@@ -34,6 +35,8 @@ function NavigationButtons({
 }: {
   service: Service | undefined;
 }): JSX.Element {
+  const { direction } = useTheme();
+
   return (
     <Box
       sx={{
@@ -42,16 +45,16 @@ function NavigationButtons({
       }}
     >
       <IconButton
-        aria-label="Go back"
+        aria-label="Back"
         disabled={service === undefined || !service.canGoBack}
       >
-        <IconArrowBack />
+        {direction === 'ltr' ? <IconArrowBack /> : <IconArrowForward />}
       </IconButton>
       <IconButton
-        aria-label="Go forward"
+        aria-label="Forward"
         disabled={service === undefined || !service.canGoForward}
       >
-        <IconArrowForward />
+        {direction === 'ltr' ? <IconArrowForward /> : <IconArrowBack />}
       </IconButton>
       {service?.state === 'loading' ? (
         <IconButton aria-label="Stop">
@@ -62,10 +65,7 @@ function NavigationButtons({
           <IconRefresh />
         </IconButton>
       )}
-      <IconButton
-        aria-label="Go to service homepage"
-        disabled={service === undefined}
-      >
+      <IconButton aria-label="Home" disabled={service === undefined}>
         <IconHome />
       </IconButton>
     </Box>