diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx
new file mode 100644
index 000000000..d1a3ff9c1
--- /dev/null
+++ b/desktop/flipper-plugin/src/ui/PowerSearch/PowerSearchContainer.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import {css} from '@emotion/css';
+import {theme} from '../theme';
+
+const containerStyle = css`
+ display: flex;
+ flex-direction: row;
+ border-radius: ${theme.borderRadius};
+ border: 1px solid ${theme.borderColor};
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+ &:focus-within,
+ &:hover {
+ border-color: ${theme.primaryColor};
+ box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2);
+ }
+`;
+
+export const PowerSearchContainer: React.FC = ({children}) => {
+ return
{children}
;
+};
diff --git a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
index 4904af564..ccb23bbd3 100644
--- a/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
+++ b/desktop/flipper-plugin/src/ui/PowerSearch/index.tsx
@@ -15,6 +15,7 @@ import {
OperatorConfig,
} from './PowerSearchTypes';
import {CloseOutlined} from '@ant-design/icons';
+import {PowerSearchContainer} from './PowerSearchContainer';
export {PowerSearchConfig};
@@ -81,7 +82,7 @@ export const PowerSearch: React.FC = ({config}) => {
>(null);
return (
-
+
{searchExpression.map((searchTerm, i) => {
const isLastTerm = i === searchExpression.length - 1;
@@ -182,6 +183,6 @@ export const PowerSearch: React.FC = ({config}) => {
}
}}
/>
-
+
);
};
diff --git a/desktop/flipper-plugin/src/ui/theme.tsx b/desktop/flipper-plugin/src/ui/theme.tsx
index de6bb0de0..061d9b4d0 100644
--- a/desktop/flipper-plugin/src/ui/theme.tsx
+++ b/desktop/flipper-plugin/src/ui/theme.tsx
@@ -34,6 +34,7 @@ export const theme = {
buttonDefaultBackground: 'var(--flipper-button-default-background)',
backgroundTransparentHover: 'var(--flipper-background-transparent-hover)',
dividerColor: 'var(--flipper-divider-color)',
+ borderColor: 'var(--flipper-border-color)',
borderRadius: 'var(--flipper-border-radius)',
containerBorderRadius: 8,
inlinePaddingV: 6, // vertical padding on inline elements like buttons
diff --git a/desktop/themes/base.less b/desktop/themes/base.less
index 55aaab574..0cc2ed857 100644
--- a/desktop/themes/base.less
+++ b/desktop/themes/base.less
@@ -61,4 +61,5 @@
--flipper-diff-added-background: @diff-added-background;
--flipper-diff-removed-background: @diff-removed-background;
--flipper-border-radius: @border-radius-base;
+ --flipper-border-color: @normal-color;
}