7 files changed, 115 insertions, 130 deletions

diff --git a/packages/renderer/src/components/locationBar/ButtonAdornment.tsx b/packages/renderer/src/components/locationBar/ButtonAdornment.tsx
deleted file mode 100644
index 2cf230b..0000000
--- a/packages/renderer/src/components/locationBar/ButtonAdornment.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
- *
- * This file is part of Sophie.
- *
- * Sophie is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import InputAdornment from '@mui/material/InputAdornment';
-import { styled } from '@mui/material/styles';
-
-export const NO_LABEL_BUTTON_CLASS_NAME = 'ButtonAdornment-NoLabel';
-
-const ButtonAdornment = styled(InputAdornment, {
-  name: 'ButtonAdornment',
-})(({ theme, position }) => {
-  const { direction } = theme;
-  const left = direction === 'ltr' ? 'start' : 'end';
-  return {
-    ...(position === left
-      ? {
-          marginRight: 2,
-          marginLeft: -8,
-        }
-      : {
-          marginLeft: 2,
-          marginRight: -8,
-        }),
-    '.MuiButton-root': {
-      minWidth: 32,
-      height: 32,
-      paddingLeft: 6,
-      paddingRight: 6,
-      borderRadius: 16,
-    },
-    ...(direction === 'ltr'
-      ? {
-          '.MuiButton-startIcon': {
-            marginLeft: 0,
-          },
-          [`.${NO_LABEL_BUTTON_CLASS_NAME} .MuiButton-startIcon`]: {
-            marginRight: 0,
-          },
-        }
-      : {
-          '.MuiButton-startIcon': {
-            marginRight: 0,
-            marginLeft: theme.spacing(1),
-          },
-          [`.${NO_LABEL_BUTTON_CLASS_NAME} .MuiButton-startIcon`]: {
-            marginLeft: 0,
-          },
-        }),
-  };
-});
-
-export default ButtonAdornment;
diff --git a/packages/renderer/src/components/locationBar/GoAdornment.tsx b/packages/renderer/src/components/locationBar/GoButton.tsx
index f049b8e..32f715e 100644
--- a/packages/renderer/src/components/locationBar/GoAdornment.tsx
+++ b/packages/renderer/src/components/locationBar/GoButton.tsx
@@ -19,25 +19,33 @@
  */
 
 import IconGo from '@mui/icons-material/Send';
-import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
 import React, { MouseEventHandler } from 'react';
 
-import ButtonAdornment, { NO_LABEL_BUTTON_CLASS_NAME } from './ButtonAdornment';
+import LocationInputAdornment from './LocationInputAdornment';
 
-export default function GoAdornment({
+export default function GoButton({
   onClick,
+  position,
 }: {
   onClick: MouseEventHandler<HTMLButtonElement>;
+  position: 'start' | 'end';
 }): JSX.Element {
   return (
-    <ButtonAdornment position="end">
-      <Button
+    <LocationInputAdornment position={position}>
+      <IconButton
         aria-label="Go"
         color="inherit"
-        startIcon={<IconGo />}
-        className={NO_LABEL_BUTTON_CLASS_NAME}
         onClick={onClick}
-      />
-    </ButtonAdornment>
+        sx={{
+          minWidth: '32px',
+          height: '32px',
+          paddingX: '6px',
+          borderRadius: '16px',
+        }}
+      >
+        <IconGo fontSize="small" />
+      </IconButton>
+    </LocationInputAdornment>
   );
 }
diff --git a/packages/renderer/src/components/locationBar/IconAdornment.tsx b/packages/renderer/src/components/locationBar/LocationInputAdornment.tsx
index 1a2fa83..a3cd2c5 100644
--- a/packages/renderer/src/components/locationBar/IconAdornment.tsx
+++ b/packages/renderer/src/components/locationBar/LocationInputAdornment.tsx
@@ -21,21 +21,21 @@
 import InputAdornment from '@mui/material/InputAdornment';
 import { styled } from '@mui/material/styles';
 
-const IconAdornment = styled(InputAdornment, {
-  name: 'IconAdornment',
+const LocationInputAdornment = styled(InputAdornment, {
+  name: 'LocationInputAdornment',
 })(({ theme: { direction }, position }) => {
   const left = direction === 'ltr' ? 'start' : 'end';
-  return {
-    ...(position === left
-      ? {
-          marginLeft: -2,
-          marginRight: 8,
-        }
-      : {
-          marginLeft: 8,
-          marginRight: -2,
-        }),
-  };
+  const marginStart = -8;
+  const marginEnd = 2;
+  return position === left
+    ? {
+        marginLeft: marginStart,
+        marginRight: marginEnd,
+      }
+    : {
+        marginLeft: marginEnd,
+        marginRight: marginStart,
+      };
 });
 
-export default IconAdornment;
+export default LocationInputAdornment;
diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index e711abc..3a4f7f5 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -26,9 +26,9 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import Service from '../../stores/Service';
 
-import GoAdornment from './GoAdornment';
+import GoButton from './GoButton';
 import LocationOverlayInput from './LocationOverlayInput';
-import UrlAdornment from './UrlAdornment';
+import SecurityLabel from './SecurityLabel';
 import UrlOverlay from './UrlOverlay';
 import splitUrl from './splitUrl';
 
@@ -113,10 +113,16 @@ function LocationTextField({
       hiddenLabel
       disableUnderline
       startAdornment={
-        <UrlAdornment changed={changed} splitResult={splitResult} />
+        <SecurityLabel
+          changed={changed}
+          splitResult={splitResult}
+          position="start"
+        />
       }
       endAdornment={
-        changed ? <GoAdornment onClick={() => service?.go(value)} /> : undefined
+        changed ? (
+          <GoButton onClick={() => service?.go(value)} position="end" />
+        ) : undefined
       }
       value={value}
     />
diff --git a/packages/renderer/src/components/locationBar/UrlAdornment.tsx b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
index 6ede378..6e27e6b 100644
--- a/packages/renderer/src/components/locationBar/UrlAdornment.tsx
+++ b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
@@ -19,68 +19,79 @@
  */
 
 import IconHttps from '@mui/icons-material/HttpsOutlined';
+import IconHttp from '@mui/icons-material/NoEncryption';
 import IconGlobe from '@mui/icons-material/Public';
 import IconWarning from '@mui/icons-material/Warning';
-import { styled } from '@mui/material';
-import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 
-import ButtonAdornment, { NO_LABEL_BUTTON_CLASS_NAME } from './ButtonAdornment';
-import IconAdornment from './IconAdornment';
+import LocationInputAdornment from './LocationInputAdornment';
+import getAlertColor from './getAlertColor';
 import type { SplitResult } from './splitUrl';
 
-const FastColorChangingButton = styled(Button)(({ theme }) => ({
-  transition: theme.transitions.create(
-    ['background-color', 'box-shadow', 'border-color'],
-    {
-      duration: theme.transitions.duration.short,
-      easing: theme.transitions.easing.easeInOut,
-    },
-  ),
+const SecurityLabelRoot = styled(LocationInputAdornment, {
+  name: 'SecurityLabel',
+  slot: 'Root',
+  shouldForwardProp: (prop) => prop !== 'alert',
+})<{ alert: boolean }>(({ theme, alert }) => ({
+  padding: 6,
+  color: getAlertColor(theme, alert),
+  // Clicking on the security label should focus the text field instead.
+  pointerEvents: 'none',
 }));
 
-export default function UrlAdornment({
+const SecurityLabelText = styled('span', {
+  name: 'SecurityLabel',
+  slot: 'Text',
+})(({ theme }) => ({
+  marginInlineStart: theme.spacing(1),
+  // Keep the same baseline as the input box text.
+  paddingBottom: 1,
+  fontWeight: theme.typography.fontWeightMedium,
+  userSelect: 'none',
+}));
+
+export default function SecurityLabel({
   splitResult,
   changed,
+  position,
 }: {
   splitResult: SplitResult;
   changed: boolean;
+  position: 'start' | 'end';
 }): JSX.Element {
   const { type } = splitResult;
   if (changed || type === 'empty') {
     return (
-      <IconAdornment position="start">
+      <SecurityLabelRoot alert={false} position={position} aria-hidden>
         <IconGlobe fontSize="small" />
-      </IconAdornment>
+      </SecurityLabelRoot>
     );
   }
   switch (type) {
     case 'valid': {
       const { secure } = splitResult;
       return secure ? (
-        <ButtonAdornment position="start">
-          <FastColorChangingButton
-            aria-label="Show certificate"
-            color="inherit"
-            className={NO_LABEL_BUTTON_CLASS_NAME}
-            startIcon={<IconHttps />}
-          />
-        </ButtonAdornment>
+        <SecurityLabelRoot
+          alert={false}
+          position={position}
+          aria-label="Secure connection"
+        >
+          <IconHttps fontSize="small" />
+        </SecurityLabelRoot>
       ) : (
-        <ButtonAdornment position="start">
-          <FastColorChangingButton color="error" startIcon={<IconWarning />}>
-            Not secure
-          </FastColorChangingButton>
-        </ButtonAdornment>
+        <SecurityLabelRoot alert position={position}>
+          <IconHttp fontSize="small" />
+          <SecurityLabelText>Not secure</SecurityLabelText>
+        </SecurityLabelRoot>
       );
     }
     case 'invalid':
       return (
-        <ButtonAdornment position="start">
-          <FastColorChangingButton color="error" startIcon={<IconWarning />}>
-            Unknown site
-          </FastColorChangingButton>
-        </ButtonAdornment>
+        <SecurityLabelRoot alert position={position}>
+          <IconWarning fontSize="small" />
+          <SecurityLabelText>Unknown site</SecurityLabelText>
+        </SecurityLabelRoot>
       );
     default:
       /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions --
diff --git a/packages/renderer/src/components/locationBar/UrlOverlay.tsx b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
index f7a3c4c..d590709 100644
--- a/packages/renderer/src/components/locationBar/UrlOverlay.tsx
+++ b/packages/renderer/src/components/locationBar/UrlOverlay.tsx
@@ -21,6 +21,7 @@
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
+import getAlertColor from './getAlertColor';
 import type { SplitResult } from './splitUrl';
 
 const PrimaryFragment = styled('span', {
@@ -28,7 +29,7 @@ const PrimaryFragment = styled('span', {
   slot: 'PrimaryFragment',
   shouldForwardProp: (prop) => prop !== 'alert',
 })<{ alert: boolean }>(({ theme, alert }) => ({
-  color: alert ? theme.palette.error.main : theme.palette.text.primary,
+  color: getAlertColor(theme, alert),
 }));
 
 const SecondaryFragment = styled('span', {
diff --git a/packages/renderer/src/components/locationBar/getAlertColor.ts b/packages/renderer/src/components/locationBar/getAlertColor.ts
new file mode 100644
index 0000000..82b5f55
--- /dev/null
+++ b/packages/renderer/src/components/locationBar/getAlertColor.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C)  2022 Kristóf Marussy <kristof@marussy.com>
+ *
+ * This file is part of Sophie.
+ *
+ * Sophie is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Theme } from '@mui/material/styles';
+
+export default function getAlertColor({ palette }: Theme, alert: boolean) {
+  if (alert) {
+    return palette.mode === 'dark' ? palette.error.light : palette.error.main;
+  }
+  return palette.text.primary;
+}