From 6bb44504f9fcc9f1f16bfa5df05b65bf483eae20 Mon Sep 17 00:00:00 2001 From: Kyrre Gjerstad Date: Tue, 18 Nov 2025 15:21:23 +0100 Subject: [PATCH 1/2] Refactor input field styles to remove borders and manage focus state with NotchedBorder component --- .../Providers/AppBoundary/bitfocus-custom-styles.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/experience/src/Providers/AppBoundary/bitfocus-custom-styles.css b/packages/experience/src/Providers/AppBoundary/bitfocus-custom-styles.css index 192a6e1bd..e958d7224 100644 --- a/packages/experience/src/Providers/AppBoundary/bitfocus-custom-styles.css +++ b/packages/experience/src/Providers/AppBoundary/bitfocus-custom-styles.css @@ -124,7 +124,7 @@ font-size: 1.125rem; /* text-lg */ font-weight: 400; color: #d4d4d8; /* text-neutral-300 */ - border: 1px solid #404040; /* subtle border */ + border: none; /* Remove border - NotchedBorder component handles this */ border-radius: 4px; /* rounded-sm */ padding: 4px 16px; width: 100%; @@ -135,8 +135,14 @@ #app form div[class*='inputField'] input:focus, #app form div[class*='inputField'] div[class$='countryCodeSelector']:focus { outline: none; - border-color: #3b82f6; /* focus ring color */ - box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); + /* Removed blue border - let NotchedBorder component handle focus state */ + /* border-color: #3b82f6; */ + /* box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); */ +} + +/* Hide the purple outline to prevent double border on focus */ +#app form div[class*='inputField'] ~ div fieldset[class*='outline'] { + display: none !important; } /* Placeholder styling */ From 873910ef0ce2e909cd48df7d47f79587f8207374 Mon Sep 17 00:00:00 2001 From: Kyrre Gjerstad Date: Tue, 18 Nov 2025 15:22:01 +0100 Subject: [PATCH 2/2] cleanup --- .../src/Providers/AppBoundary/bitfocus-custom-styles.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/experience/src/Providers/AppBoundary/bitfocus-custom-styles.css b/packages/experience/src/Providers/AppBoundary/bitfocus-custom-styles.css index e958d7224..5c4886141 100644 --- a/packages/experience/src/Providers/AppBoundary/bitfocus-custom-styles.css +++ b/packages/experience/src/Providers/AppBoundary/bitfocus-custom-styles.css @@ -135,9 +135,6 @@ #app form div[class*='inputField'] input:focus, #app form div[class*='inputField'] div[class$='countryCodeSelector']:focus { outline: none; - /* Removed blue border - let NotchedBorder component handle focus state */ - /* border-color: #3b82f6; */ - /* box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); */ } /* Hide the purple outline to prevent double border on focus */