From 3ac50f188b78e6ad91842d82a7645d70cffdfa43 Mon Sep 17 00:00:00 2001
From: Andrew Milne <andrew_milne@stormrook.com>
Date: Sat, 15 Mar 2025 20:59:56 +0000
Subject: [PATCH] Updates to search and darkmode styling, add mini-search mode,
 add tags button (run prettier)

---
 quartz.layout.ts                     |  4 ++--
 quartz/components/Search.tsx         |  8 ++++++--
 quartz/components/Tags.tsx           | 12 +++---------
 quartz/components/styles/search.scss | 16 ++++++++--------
 quartz/components/styles/tags.scss   |  5 ++---
 5 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/quartz.layout.ts b/quartz.layout.ts
index 39ee2b382..2e3188647 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -28,7 +28,7 @@ export const defaultContentPageLayout: PageLayout = {
     Component.Flex({
       components: [
         {
-          Component: Component.Search({miniButton: false}),
+          Component: Component.Search(),
           grow: true,
         },
         { Component: Component.Tags() },
@@ -54,7 +54,7 @@ export const defaultListPageLayout: PageLayout = {
     Component.Flex({
       components: [
         {
-          Component: Component.Search({miniButton: false}),
+          Component: Component.Search(),
           grow: true,
         },
         { Component: Component.Tags() },
diff --git a/quartz/components/Search.tsx b/quartz/components/Search.tsx
index 0b595576c..a6febb400 100644
--- a/quartz/components/Search.tsx
+++ b/quartz/components/Search.tsx
@@ -19,11 +19,15 @@ export default ((userOpts?: Partial<SearchOptions>) => {
   const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     const opts = { ...defaultOptions, ...userOpts }
     const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
-    const searchButtonText = opts.miniButton ? "" : <p>{i18n(cfg.locale).components.search.title}</p>
+    const searchButtonText = opts.miniButton ? (
+      ""
+    ) : (
+      <p>{i18n(cfg.locale).components.search.title}</p>
+    )
     return (
       <div class={classNames(displayClass, "search") + (opts.miniButton ? " search-mini" : "")}>
         <button class={"search-button" + (opts.miniButton ? " search-button-mini" : "")}>
-        {searchButtonText}
+          {searchButtonText}
           <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
             <title>Search</title>
             <g class="search-path" fill="none">
diff --git a/quartz/components/Tags.tsx b/quartz/components/Tags.tsx
index 9334654d4..6ce811cfe 100644
--- a/quartz/components/Tags.tsx
+++ b/quartz/components/Tags.tsx
@@ -9,16 +9,10 @@ export default (() => {
     return (
       <a href="/tags" class="toggle tags-link" tabIndex={-1}>
         <button class="tags-button" id="tags-button">
-          <svg
-            viewBox="0 0 25 25"
-            xmlns="http://www.w3.org/2000/svg">
+          <svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
             <g>
-              <path
-                d="M 4.2086894,1.2393355 A 2.969084,2.9712454 0 0 0 1.2403355,4.2098501 V 11.59051 a 2.969084,2.9712454 0 0 0 0.8696829,2.101561 l 9.2194546,9.224802 a 2.969084,2.9712454 0 0 0 4.197341,-0.0014 l 7.373929,-7.379266 a 2.969084,2.9712454 0 0 0 0.0014,-4.200397 L 13.684012,2.1096514 A 2.969084,2.9712454 0 0 0 11.58398,1.2393355 Z" />
-              <circle
-                cy="6.5883951"
-                cx="6.5883951"
-                r="2.6196454" />
+              <path d="M 4.2086894,1.2393355 A 2.969084,2.9712454 0 0 0 1.2403355,4.2098501 V 11.59051 a 2.969084,2.9712454 0 0 0 0.8696829,2.101561 l 9.2194546,9.224802 a 2.969084,2.9712454 0 0 0 4.197341,-0.0014 l 7.373929,-7.379266 a 2.969084,2.9712454 0 0 0 0.0014,-4.200397 L 13.684012,2.1096514 A 2.969084,2.9712454 0 0 0 11.58398,1.2393355 Z" />
+              <circle cy="6.5883951" cx="6.5883951" r="2.6196454" />
             </g>
           </svg>
         </button>
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index a3120d6d1..87e5c1da3 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -4,7 +4,7 @@
   min-width: fit-content;
   max-width: 14rem;
   margin-right: 0.5rem;
-  
+
   @media all and ($mobile) {
     flex-grow: 0.3;
   }
@@ -236,11 +236,11 @@
 }
 
 .search-mini {
-    width: 2rem;
-    height: 2rem;
-    margin: 0;
+  width: 2rem;
+  height: 2rem;
+  margin: 0;
 
-  &>.search-button-mini {
+  & > .search-button-mini {
     display: inline;
     position: relative;
     background: none;
@@ -251,10 +251,10 @@
       position: absolute;
       width: 20px;
       height: 20px;
-      margin:0px;
-  
+      margin: 0px;
+
       top: calc(50% - 10px);
       left: calc(50% - 10px);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/quartz/components/styles/tags.scss b/quartz/components/styles/tags.scss
index 2e4b59e99..669066baf 100644
--- a/quartz/components/styles/tags.scss
+++ b/quartz/components/styles/tags.scss
@@ -1,12 +1,11 @@
 @use "../../styles/variables.scss" as *;
 
 .tags-link {
-  display:block;
+  display: block;
   height: 2rem;
   width: 2rem;
 
   & .tags-button {
-
     cursor: pointer;
     padding: 0px;
     position: relative;
@@ -39,4 +38,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}