chore: update style

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,11 +102,14 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
             />
             <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
-          {isPublic && query.length === 0 ? null : (
           <>
-              <StyledModalDivider />
+            <StyledModalDivider
+              style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+            />
             <Command.List>
-                <StyledContent>
+              <StyledContent
+                style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+              >
                 {!isPublic ? (
                   <Results
                     query={query}
@@ -130,11 +135,14 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
                       <Footer query={query} />
                     </StyledModalFooter>
                   </>
-                  ) : null
+                ) : (
-                ) : null}
+                  <></>
+                )
+              ) : (
+                <></>
+              )}
             </Command.List>
           </>
-          )}
         </Command>
       </ModalWrapper>
     </Modal>

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',
   };
 });