Update focused border color on inputs (#4467)

ethyca · Nov 30, 2023 · 0f06766 · 0f06766
1 parent 4f990a3
commit 0f06766
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,6 +36,7 @@ The types of changes are:
 - Disallow setting `*` and other non URL values for `security.cors_origins` config property via the API [#4438](https://github.com/ethyca/fides/pull/4438)
 - Consent modal hides the opt-in/opt-out buttons if only one privacy notice is enabled [#4441](https://github.com/ethyca/fides/pull/4441)
 - Initialize TCF stub earlier [#4453](https://github.com/ethyca/fides/pull/4453)
+- Change focus outline color of form inputs [#4467](https://github.com/ethyca/fides/pull/4467)
 
 ### Fixed
 - Fixed a bug where selected vendors in "configure consent" add vendor modal were unstyled [#4454](https://github.com/ethyca/fides/pull/4454)

diff --git a/clients/admin-ui/src/features/common/form/inputs.tsx b/clients/admin-ui/src/features/common/form/inputs.tsx
@@ -103,6 +103,7 @@ export const TextInput = forwardRef(
           type={type}
           pr={isPassword ? "10" : "3"}
           background="white"
+          focusBorderColor="primary.600"
         />
         {isPassword ? (
           <InputRightElement pr="2">
@@ -287,6 +288,7 @@ export const SelectInput = ({
       size={size}
       classNamePrefix="custom-select"
       placeholder={placeholder}
+      focusBorderColor="primary.600"
       chakraStyles={{
         container: (provided) => ({
           ...provided,
@@ -433,6 +435,7 @@ const CreatableSelectInput = ({
       value={selected}
       size={size}
       classNamePrefix="custom-creatable-select"
+      focusBorderColor="primary.600"
       isDisabled={isDisabled}
       chakraStyles={{
         container: (provided) => ({
@@ -784,6 +787,7 @@ export const CustomTextArea = ({
       {...textAreaProps}
       ref={textareaRef}
       style={{ overflowY: resize ? "hidden" : "visible" }}
+      focusBorderColor="primary.600"
       onChange={(event) => {
         resizeTextarea();
         field.onChange(event);
@@ -933,7 +937,7 @@ export const CustomNumberInput = ({
           <Label htmlFor={props.id || props.name}>{label}</Label>
           <Flex alignItems="center">
             <Flex flexDir="column" flexGrow={1} mr="2">
-              <NumberInput>
+              <NumberInput focusBorderColor="primary.600">
                 <NumberInputField />
                 <NumberInputStepper>
                   <NumberIncrementStepper />
@@ -971,6 +975,7 @@ export const CustomNumberInput = ({
           isDisabled={isDisabled}
           data-testid={`input-${field.name}`}
           min={minValue || undefined}
+          focusBorderColor="primary.600"
         >
           <NumberInputField />
           <NumberInputStepper>

diff --git a/clients/admin-ui/src/features/system/VendorSelector.tsx b/clients/admin-ui/src/features/system/VendorSelector.tsx
@@ -192,6 +192,7 @@ const VendorSelector = ({
                 menuPosition="absolute"
                 isSearchable
                 isClearable
+                focusBorderColor="primary.600"
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 formatCreateLabel={(_value) => null}
                 chakraStyles={{

diff --git a/clients/admin-ui/src/features/system/dictionary-form/DictSuggestionInputs.tsx b/clients/admin-ui/src/features/system/dictionary-form/DictSuggestionInputs.tsx
@@ -184,6 +184,7 @@ export const DictSuggestionTextArea = ({
           {...field}
           size="sm"
           data-testid={`input-${field.name}`}
+          focusBorderColor="primary.600"
           color={
             isShowingSuggestions === "showing"
               ? "complimentary.500"
@@ -317,6 +318,7 @@ export const DictSuggestionSelect = ({
             data-testid={`input-${field.name}`}
             placeholder={placeholder}
             options={options}
+            focusBorderColor="primary.600"
             chakraStyles={{
               input: (provided) => ({
                 ...provided,
@@ -446,6 +448,7 @@ export const DictSuggestionCreatableSelect = ({
             data-testid={`input-${field.name}`}
             placeholder={placeholder}
             options={options}
+            focusBorderColor="primary.600"
             chakraStyles={{
               input: (provided) => ({
                 ...provided,
@@ -550,6 +553,7 @@ export const DictSuggestionNumberInput = ({
                 ? "complimentary.500"
                 : "gray.800"
             }
+            focusBorderColor="primary.600"
             isDisabled={disabled}
           >
             <NumberInputField />

diff --git a/clients/admin-ui/src/theme/index.ts b/clients/admin-ui/src/theme/index.ts
@@ -37,6 +37,16 @@ const theme = extendTheme({
         size: "xl",
       },
     },
+    Switch: {
+      baseStyle: {
+        track: {
+          _focus: {
+            boxShadow: "none",
+            outline: "2px solid #272B53",
+          },
+        },
+      },
+    },
   },
 });