fix: in dark mode, the background color of search results (#67)

* fix: in dark mode, the background color of search results * style: search * fix: not border-top
sanyuan0704 · Oct 8, 2022 · 643df60 · 643df60 · vercel · Oct 8, 2022
1 parent 4b7e979
commit 643df60
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 12 deletions.
diff --git a/src/theme-default/components/Nav/index.module.scss b/src/theme-default/components/Nav/index.module.scss
@@ -30,7 +30,6 @@
     padding-right: 32px;
     -webkit-backdrop-filter: saturate(50%) blur(8px);
     backdrop-filter: saturate(50%) blur(8px);
-    background: rgba(255, 255, 255, 0.7);
   }
 
   :global(.dark) .has-sidebar .content {

diff --git a/src/theme-default/components/Nav/index.tsx b/src/theme-default/components/Nav/index.tsx
@@ -159,7 +159,7 @@ export function Nav() {
         relative=""
         p="l-8 sm:x-8"
         transition="background-color duration-500"
-        className="divider-bottom lg:border-b-transparent"
+        className="divider-bottom sm:border-b-transparent lg:border-b-transparent"
         nav-h="mobile lg:desktop"
       >
         <div

diff --git a/src/theme-default/components/Search/Suggestion.tsx b/src/theme-default/components/Search/Suggestion.tsx
@@ -45,11 +45,15 @@ export function SuggestionContent(props: {
   };
   return (
     <div
-      border-1=""
+      border-b-1=""
+      border-t-1=""
       table-cell=""
       p="x-3 y-2"
-      hover="bg-[#f3f4f5]"
-      className={`border-right-none ${props.isCurrent ? 'bg-[#f3f4f5]' : ''}`}
+      hover="bg-[#f3f4f5] "
+      text="#2c3e50"
+      className={`border-right-none border-[#eaecef] ${
+        props.isCurrent ? 'bg-[#f3f4f5]' : 'bg-white'
+      }`}
       transition="bg duration-200"
     >
       <div font="medium" text="sm">

diff --git a/src/theme-default/components/Search/index.tsx b/src/theme-default/components/Search/index.tsx
@@ -122,26 +122,34 @@ export function Search(
           z="60"
           pos="top-8"
           border-1=""
+          border-rd-1=""
           p="2"
           list="none"
-          bg="bg-default"
-          className="min-w-500px max-w-700px"
+          className="min-w-500px max-w-700px bg-white"
         >
           {/* Show the suggestions */}
           {suggestions.map((item, index) => (
-            <li key={item.title} rounded="sm" cursor="pointer" w="100%">
+            <li
+              key={item.title}
+              rounded="sm"
+              cursor="pointer"
+              w="100%"
+              className="border-collapse"
+            >
               <a block="" href={item.link} className="whitespace-normal">
                 <div table="" w="100%" className="border-collapse">
                   <div
                     w="35%"
-                    border-1=""
+                    border-t-1=""
+                    border-b-1=""
+                    border-r-1=""
                     border-left="none"
                     table-cell=""
                     align="middle right"
                     p="1.2"
-                    text="sm right"
+                    text="sm right [#2c3e50]"
                     font="semibold"
-                    className="bg-[#f5f5f5]"
+                    className="bg-[#f5f5f5] border-[#eaecef]"
                   >
                     {item.title}
                   </div>
@@ -157,7 +165,7 @@ export function Search(
           {/* Show the not found info */}
           {showNotFound && (
             <li flex="center">
-              <div p="2" text="sm gray-light">
+              <div p="2" text="sm #2c3e50">
                 No results found
               </div>
             </li>