From fd72f693039499d3b8295855ab7f8448f003e62b Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Tue, 7 Feb 2023 12:31:06 +0800
Subject: [PATCH] chore: update style

---
 .../app/src/components/quick-search/index.tsx | 80 ++++++++++---------
 .../app/src/components/quick-search/style.ts  |  3 +-
 2 files changed, 46 insertions(+), 37 deletions(-)

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) => {
             />
             <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
-          {isPublic && query.length === 0 ? null : (
-            <>
-              <StyledModalDivider />
-              <Command.List>
-                <StyledContent>
-                  {!isPublic ? (
-                    <Results
-                      query={query}
-                      loading={loading}
-                      setLoading={setLoading}
-                      setShowCreatePage={setShowCreatePage}
-                    />
-                  ) : (
-                    <PublishedResults
-                      query={query}
-                      loading={loading}
-                      setLoading={setLoading}
-                      onClose={onClose}
-                      setPublishWorkspaceName={setPublishWorkspaceName}
-                    />
-                  )}
-                </StyledContent>
+          <>
+            <StyledModalDivider
+              style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+            />
+            <Command.List>
+              <StyledContent
+                style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+              >
                 {!isPublic ? (
-                  showCreatePage ? (
-                    <>
-                      <StyledModalDivider />
-                      <StyledModalFooter>
-                        <Footer query={query} />
-                      </StyledModalFooter>
-                    </>
-                  ) : null
-                ) : null}
-              </Command.List>
-            </>
-          )}
+                  <Results
+                    query={query}
+                    loading={loading}
+                    setLoading={setLoading}
+                    setShowCreatePage={setShowCreatePage}
+                  />
+                ) : (
+                  <PublishedResults
+                    query={query}
+                    loading={loading}
+                    setLoading={setLoading}
+                    onClose={onClose}
+                    setPublishWorkspaceName={setPublishWorkspaceName}
+                  />
+                )}
+              </StyledContent>
+              {!isPublic ? (
+                showCreatePage ? (
+                  <>
+                    <StyledModalDivider />
+                    <StyledModalFooter>
+                      <Footer query={query} />
+                    </StyledModalFooter>
+                  </>
+                ) : (
+                  <></>
+                )
+              ) : (
+                <></>
+              )}
+            </Command.List>
+          </>
         </Command>
       </ModalWrapper>
     </Modal>
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',
   };
 });