diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx
index 88f1b7e12..39a9ec036 100644
--- a/packages/app/src/components/quick-search/index.tsx
+++ b/packages/app/src/components/quick-search/index.tsx
@@ -30,7 +30,9 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
const [publishWorkspaceName, setPublishWorkspaceName] = useState('');
const [showCreatePage, setShowCreatePage] = useState(true);
const { triggerQuickSearchModal } = useModal();
-
+ const isPublicAndNoQuery = () => {
+ return isPublic && query.length === 0;
+ };
// Add ââ+Kâ shortcut keys as switches
useEffect(() => {
const down = (e: KeyboardEvent) => {
@@ -72,7 +74,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
width={620}
style={{
maxHeight: '80vh',
- minHeight: isPublic && query.length === 0 ? '72px' : '350px',
+ minHeight: isPublicAndNoQuery() ? '72px' : '350px',
top: '12vh',
}}
>
@@ -100,41 +102,47 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
/>
{isMac() ? 'â + K' : 'Ctrl + K'}
- {isPublic && query.length === 0 ? null : (
- <>
-
-
-
- {!isPublic ? (
-
- ) : (
-
- )}
-
+ <>
+
+
+
{!isPublic ? (
- showCreatePage ? (
- <>
-
-
-
-
- >
- ) : null
- ) : null}
-
- >
- )}
+
+ ) : (
+
+ )}
+
+ {!isPublic ? (
+ showCreatePage ? (
+ <>
+
+
+
+
+ >
+ ) : (
+ <>>
+ )
+ ) : (
+ <>>
+ )}
+
+ >
diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts
index 492b7988c..3c949aaaa 100644
--- a/packages/app/src/components/quick-search/style.ts
+++ b/packages/app/src/components/quick-search/style.ts
@@ -9,6 +9,7 @@ export const StyledContent = styled('div')(({ theme }) => {
marginBottom: '10px',
...displayFlex('center', 'flex-start'),
color: theme.colors.popoverColor,
+ transition: 'all 0.15s',
letterSpacing: '0.06em',
'[cmdk-group-heading]': {
margin: '5px 16px',
@@ -16,7 +17,6 @@ export const StyledContent = styled('div')(({ theme }) => {
fontWeight: '500',
},
'[aria-selected="true"]': {
- transition: 'background .15s, color .15s',
borderRadius: '5px',
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
@@ -103,6 +103,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
margin: '6px 16px 6.5px 16px',
position: 'relative',
borderTop: `0.5px solid ${theme.colors.placeHolderColor}`,
+ transition: 'all 0.15s',
};
});