fix: Input focus styles for editor and public UI (#2531)

theopensystemslab · Dec 4, 2023 · e4f255f · e4f255f
1 parent c5c5214
commit e4f255f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -70,13 +70,19 @@ export const focusStyle = {
   outline: "3px solid transparent",
 };
 
-// Ensure that if the element already has a border, the border gets thicker
-export const borderedFocusStyle = {
+// Default focus style for input
+export const inputFocusStyle = {
   outline: `3px solid ${DEFAULT_PALETTE.action?.focus}`,
-  outlineOffset: 0,
+  outlineOffset: -1,
   zIndex: 1,
   boxShadow: `inset 0 0 0 2px ${DEFAULT_PALETTE.text?.primary}`,
-  backgroundColor: "transparent",
+};
+
+// Ensure that if the element already has a border, the border gets thicker
+export const borderedFocusStyle = {
+  ...inputFocusStyle,
+  outlineOffset: 0,
+  background: "transparent",
 };
 
 export const linkStyle = (primaryColor?: string) => ({

diff --git a/editor.planx.uk/src/ui/Input.tsx b/editor.planx.uk/src/ui/Input.tsx
@@ -6,7 +6,11 @@ import React, {
   useImperativeHandle,
   useRef,
 } from "react";
-import { borderedFocusStyle, FONT_WEIGHT_SEMI_BOLD } from "theme";
+import {
+  borderedFocusStyle,
+  FONT_WEIGHT_SEMI_BOLD,
+  inputFocusStyle,
+} from "theme";
 
 import ErrorWrapper from "./ErrorWrapper";
 
@@ -51,11 +55,6 @@ const StyledInputBase = styled(InputBase, {
     color: theme.palette.text.secondary,
     opacity: "0.5",
   },
-  "&:focus-within": {
-    border: `1px solid ${theme.palette.border.input}`,
-    boxShadow: `inset 0px 0px 0px 1px ${theme.palette.border.input}`,
-    outline: `3px solid ${theme.palette.action.focus}`,
-  },
   ...(bordered && {
     border: `2px solid ${theme.palette.text.primary}`,
   }),
@@ -80,6 +79,7 @@ const StyledInputBase = styled(InputBase, {
     },
   },
   [`&.${classes.focused}`]: {
+    ...inputFocusStyle,
     ...(bordered && borderedFocusStyle),
   },
 }));

diff --git a/editor.planx.uk/src/ui/RichTextInput.tsx b/editor.planx.uk/src/ui/RichTextInput.tsx
@@ -47,6 +47,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { inputFocusStyle } from "theme";
 import tippy, { type Instance } from "tippy.js";
 import { create } from "zustand";
 
@@ -105,9 +106,7 @@ export const RichContentContainer = styled(Box)(({ theme }) => ({
     },
     // Focus styles
     "&.ProseMirror-focused": {
-      border: `1px solid ${theme.palette.border.input}`,
-      boxShadow: `inset 0px 0px 0px 1px ${theme.palette.border.input}`,
-      outline: `3px solid ${theme.palette.action.focus}`,
+      ...inputFocusStyle,
     },
     // Styles for injected passport/mention
     "& .passport": {