refactor(renderer): Location bar security label

Since electron doesn't have an API to extract the current certificate,
except in the case of certificate errors, there's no point in making the
security warning / padlock icon clickable.

We instead display a plain icon and a warning message.
We will later display the certificate details in case of a validation
error (when we have access to the certificate) as part of an error
message.

Also makes the security labels more visible to people with protanopia
who use the dark mode of the UI.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

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;
+}