diff --git a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx
index eac01cceb8..c7bf355e45 100644
--- a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx
+++ b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx
@@ -13,32 +13,33 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
-import { wrapInTestApp } from '@backstage/test-utils';
import {
+ DefaultResultListItem,
+ MockSearchApi,
+ searchApiRef,
+ SearchBar,
+ SearchContextProvider,
+ SearchResult,
+ SearchResultPager,
+} from '@backstage/plugin-search-react';
+import { TestApiProvider, wrapInTestApp } from '@backstage/test-utils';
+import {
+ Box,
Button,
DialogActions,
DialogContent,
DialogTitle,
Grid,
+ IconButton,
List,
- Paper,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
+import CloseIcon from '@material-ui/icons/Close';
import React, { ComponentType } from 'react';
+
import { rootRouteRef } from '../../plugin';
-import {
- SearchBar,
- DefaultResultListItem,
- searchApiRef,
- MockSearchApi,
- SearchContextProvider,
- SearchResult,
- SearchResultPager,
-} from '@backstage/plugin-search-react';
-import { TestApiProvider } from '@backstage/test-utils';
-import { SearchModal } from './SearchModal';
import { SearchType } from '../SearchType';
+import { SearchModal } from './SearchModal';
import { useSearchModal } from './useSearchModal';
const mockResults = {
@@ -103,10 +104,10 @@ export const Default = () => {
};
const useStyles = makeStyles(theme => ({
- container: {
- borderRadius: 30,
+ titleContainer: {
display: 'flex',
- height: '2.4em',
+ alignItems: 'center',
+ gap: theme.spacing(1),
},
input: {
flex: 1,
@@ -127,9 +128,13 @@ export const CustomModal = () => {
{() => (
<>
-
+
-
+
+
+
+
+