From fa31aae19e28e3210ff4b1316887b7f0977213a4 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 8 Nov 2023 14:45:24 +0800
Subject: [PATCH 1/4] Use check images instead of input

---
 .../web/pages/settings/pinned-searches.tsx    | 28 ++++++++-----------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/packages/web/pages/settings/pinned-searches.tsx b/packages/web/pages/settings/pinned-searches.tsx
index 819278b78..a1b30b13f 100644
--- a/packages/web/pages/settings/pinned-searches.tsx
+++ b/packages/web/pages/settings/pinned-searches.tsx
@@ -18,7 +18,7 @@ import { applyStoredTheme } from '../../lib/themeUpdater'
 import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuery'
 import { useGetSavedSearchQuery } from '../../lib/networking/queries/useGetSavedSearchQuery'
 import { Label } from '../../lib/networking/fragments/labelFragment'
-import { Circle } from 'phosphor-react'
+import { CheckSquare, Circle, Square } from 'phosphor-react'
 import { SavedSearch } from '../../lib/networking/fragments/savedSearchFragment'
 import { usePersistedState } from '../../lib/hooks/usePersistedState'
 
@@ -248,7 +248,7 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
   const labelId = `checkbox-label-${props.label.id}`
   return (
     <CheckboxButton
-      key={labelId}
+      itemKey={labelId}
       title={props.label.name}
       isSelected={props.isSelected}
       item={{
@@ -259,12 +259,6 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
       }}
       listAction={props.listAction}
     >
-      <input
-        type="checkbox"
-        checked={props.isSelected}
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onChange={(event) => {}}
-      />
       <SpanBox css={{}}>{props.label.name}</SpanBox>
       <Circle size={9} color={props.label.color} weight="fill" />
     </CheckboxButton>
@@ -281,10 +275,11 @@ type SearchButtonProps = {
 }
 
 function SearchButton(props: SearchButtonProps): JSX.Element {
+  console.log(' ', props.search.name, props.isSelected)
   const searchId = `checkbox-search-${props.search.id}`
   return (
     <CheckboxButton
-      key={searchId}
+      itemKey={searchId}
       title={props.search.filter}
       isSelected={props.isSelected}
       item={{
@@ -295,19 +290,13 @@ function SearchButton(props: SearchButtonProps): JSX.Element {
       }}
       listAction={props.listAction}
     >
-      <input
-        type="checkbox"
-        checked={props.isSelected}
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onChange={(e) => {}}
-      />
       <SpanBox css={{}}>{props.search.name}</SpanBox>
     </CheckboxButton>
   )
 }
 
 type CheckboxButtonProps = {
-  key: string
+  itemKey: string
   title: string
   isSelected: boolean
   item: PinnedSearch
@@ -338,7 +327,7 @@ function CheckboxButton(props: CheckboxButtonProps): JSX.Element {
   )
   return (
     <HStack
-      key={props.key}
+      key={props.itemKey}
       title={props.title}
       css={{
         px: '10px',
@@ -369,6 +358,11 @@ function CheckboxButton(props: CheckboxButtonProps): JSX.Element {
         event.preventDefault()
       }}
     >
+      {props.isSelected ? (
+        <CheckSquare size={20} weight="duotone" />
+      ) : (
+        <Square size={20} weight="duotone" />
+      )}
       {props.children}
     </HStack>
   )

From d76d0413429d1210970b89ee800946f622ec4053 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 8 Nov 2023 14:50:18 +0800
Subject: [PATCH 2/4] Use same UX for enable button

---
 .../web/pages/settings/pinned-searches.tsx    | 53 ++++++++++++++-----
 1 file changed, 40 insertions(+), 13 deletions(-)

diff --git a/packages/web/pages/settings/pinned-searches.tsx b/packages/web/pages/settings/pinned-searches.tsx
index a1b30b13f..08c50c0ad 100644
--- a/packages/web/pages/settings/pinned-searches.tsx
+++ b/packages/web/pages/settings/pinned-searches.tsx
@@ -184,21 +184,48 @@ export default function PinnedSearches(): JSX.Element {
             distribution="start"
             alignment="start"
           >
-            <HStack alignment="center" css={{ gap: '5px', mb: '10px' }}>
-              <input
-                type="checkbox"
-                id="switch"
-                checked={!hidePinnedSearches}
-                onChange={(event) => {
-                  setHidePinnedSearches(!event.currentTarget.checked)
-                }}
-                style={{ padding: '0px', margin: '0px' }}
-              />
-              Enable Pinned Searches
+            <HStack
+              css={{
+                px: '10px',
+                pt: '2px',
+                mb: '20px',
+                height: '30px',
+                gap: '5px',
+
+                fontSize: '14px',
+                fontWeight: 'regular',
+                fontFamily: '$display',
+                color: !hidePinnedSearches
+                  ? '$thLibraryMenuSecondary'
+                  : '$thLibraryMenuUnselected',
+
+                verticalAlign: 'middle',
+                borderRadius: '3px',
+                cursor: 'pointer',
+
+                '&:hover': {
+                  backgroundColor: '$thBackground4',
+                },
+              }}
+              alignment="center"
+              distribution="start"
+              onClick={(event) => {
+                setHidePinnedSearches(!hidePinnedSearches)
+                event.preventDefault()
+              }}
+            >
+              {!hidePinnedSearches ? (
+                <CheckSquare size={20} weight="duotone" />
+              ) : (
+                <Square size={20} weight="duotone" />
+              )}
+              <StyledText style="modalTitle" css={{}}>
+                Enable Pinned Searches
+              </StyledText>
             </HStack>
 
             {!hidePinnedSearches && (
-              <>
+              <Box css={{ pl: '10px' }}>
                 <StyledText style="modalTitle" css={{}}>
                   Saved Searches
                 </StyledText>
@@ -226,7 +253,7 @@ export default function PinnedSearches(): JSX.Element {
                     />
                   )
                 })}
-              </>
+              </Box>
             )}
           </VStack>
         </VStack>

From e3383d28d8e5452644ac0b15796c379cfec6f905 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 8 Nov 2023 15:02:05 +0800
Subject: [PATCH 3/4] Set the header height to default on smaller screens

---
 .../web/components/templates/homeFeed/HeaderSpacer.tsx    | 3 +++
 .../components/templates/homeFeed/HighlightsLayout.tsx    | 8 +++++++-
 .../web/components/templates/homeFeed/LibraryHeader.tsx   | 7 ++++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/HeaderSpacer.tsx b/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
index 43671f53e..998878190 100644
--- a/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
+++ b/packages/web/components/templates/homeFeed/HeaderSpacer.tsx
@@ -29,6 +29,9 @@ export function HeaderSpacer(): JSX.Element {
       css={{
         height: headerHeight,
         bg: '$grayBase',
+        '@mdDown': {
+          height: DEFAULT_HEADER_HEIGHT,
+        },
       }}
     ></Box>
   )
diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
index 12a16849f..e0f363ec3 100644
--- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
+++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx
@@ -20,7 +20,7 @@ import {
 import { LibraryHighlightGridCard } from '../../patterns/LibraryCards/LibraryHighlightGridCard'
 import { NotebookContent } from '../article/Notebook'
 import { EmptyHighlights } from './EmptyHighlights'
-import { useGetHeaderHeight } from './HeaderSpacer'
+import { DEFAULT_HEADER_HEIGHT, useGetHeaderHeight } from './HeaderSpacer'
 import { highlightsAsMarkdown } from './HighlightItem'
 
 type HighlightItemsLayoutProps = {
@@ -107,6 +107,9 @@ export function HighlightItemsLayout(
         css={{
           width: '100%',
           height: `calc(100vh - ${headerHeight})`,
+          '@mdDown': {
+            height: DEFAULT_HEADER_HEIGHT,
+          },
         }}
       >
         <EmptyHighlights />
@@ -125,6 +128,9 @@ export function HighlightItemsLayout(
           },
           bg: '$thBackground2',
           overflow: 'hidden',
+          '@mdDown': {
+            height: DEFAULT_HEADER_HEIGHT,
+          },
         }}
         distribution="start"
         alignment="start"
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 43c7bb072..22be48f8c 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -16,7 +16,11 @@ import {
 import { LayoutType } from './HomeFeedContainer'
 import { PrimaryDropdown } from '../PrimaryDropdown'
 import { OmnivoreSmallLogo } from '../../elements/images/OmnivoreNameLogo'
-import { HeaderSpacer, useGetHeaderHeight } from './HeaderSpacer'
+import {
+  DEFAULT_HEADER_HEIGHT,
+  HeaderSpacer,
+  useGetHeaderHeight,
+} from './HeaderSpacer'
 import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/homeFeed/LibraryFilterMenu'
 import { CardCheckbox } from '../../patterns/LibraryCards/LibraryCardStyles'
 import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
@@ -104,6 +108,7 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
           '@mdDown': {
             left: '0px',
             right: '0',
+            height: DEFAULT_HEADER_HEIGHT,
           },
         }}
       >

From 81b0522298c58784727e5ef230ef24fba2b5d204 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 8 Nov 2023 15:06:54 +0800
Subject: [PATCH 4/4] Remove width override

---
 packages/web/components/templates/homeFeed/LibraryHeader.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 22be48f8c..e9f0c3168 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -162,7 +162,6 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
         <SpanBox
           css={{
             ...controlWidths(props.layout, props.multiSelectMode),
-            width: '100%',
             maxWidth: '587px',
             alignSelf: 'flex-start',
             '-ms-overflow-style': 'none',