Merge pull request #135 from acid-info/quick-fixes-from-notion

[x] Search only works with a typed query, just using the categories and tags doesn’t pull any results without a typed search
[x] Footer: the button label should be “back to top”
[x] Search: default search bar placeholder text should be 14px instead of 36px
[x] Search: top margin of the search bar is too big
[x] Footer/ Home page: all the ‘•’ are 2px
[x] Search page: left and right columns should scroll separately
[x] Search page, explore: podcast and article titles should be H6 instead of H2
[x] Search page, explore: add spacing between the search bar and search results (56px)
[x] Search page, explore: the spacing inside the search result items is not correct
[x] Search page, explore: search results should be top aligned
[x] Header: Press Engine should be written in capital letters

src/components/Footer/Footer.Link.tsx

@@ -5,10 +5,16 @@ export const FooterLink = styled(Typography)`
   width: fit-content;
   &:not(:last-child) {
     &:after {
-      content: '•';
-      margin-left: 8px;
-      text-decoration: none;
+      width: 2px;
+      height: 2px;
+      background: rgb(var(--lsd-surface-secondary));
       display: inline-block;
+      content: ' ';
+      margin-left: 8px;
+      border-radius: 50%;
+      transform: translateY(-2px);
+      //text-decoration: none;
+      //display: inline-block;
     }
   }
 `

src/components/Footer/Footer.tsx

@@ -17,7 +17,7 @@ export default function Footer() {
       <FooterOrgPanel />
       <FooterBuPanel />
       <ScrollToTop size="small" onClick={handleScrollToTop}>
-        Back to up ↑
+        Back to top ↑
       </ScrollToTop>
     </FooterSectionContainer>
   )

src/components/NavBar/NavBar.tsx

@@ -105,6 +105,7 @@ export default function NavBar({ defaultState }: NavBarProps) {
 }
 
 const PressLogoType = styled(Typography)<{ display: boolean }>`
+  text-transform: uppercase;
   ${(props) =>
     !props.display &&
     css`

src/components/PostCard/PostCard.tsx

@@ -244,6 +244,12 @@ PostCard.styles = {
       ${PostCardShowDetails.styles.large(theme)}
     }
 
+    &.post-card__search-explore {
+      .post-card__title h3 {
+        ${lsdUtils.typography('h6')}
+      }
+    }
+
     ${lsdUtils.breakpoint(theme, 'md', 'down')} {
       .post-card__title-text {
         ${lsdUtils.typography('h5')}
@@ -394,6 +400,10 @@ PostCard.styles = {
       }
     }
 
+    &.post-card__search-explore {
+      opacity: 0.5;
+    }
+
     &.post-card__search-result {
       .post-card__subtitle {
         grid-area: info;
@@ -407,6 +417,15 @@ PostCard.styles = {
       .show-details__logo {
         width: 16px;
       }
+      .post-card__label {
+        margin-bottom: 0;
+      }
+
+      .post-card__title {
+        margin-bottom: -8px;
+        margin-top: -8px;
+      }
+
       .show-details__title {
         ${lsdUtils.typography('subtitle3')}
       }
@@ -418,7 +437,7 @@ PostCard.styles = {
       padding: 24px 0;
 
       display: grid;
-      gap: 8px 16px;
+      gap: 16px 16px;
       grid-template-columns: repeat(7, 1fr);
 
       &.post-card__article {
@@ -436,6 +455,7 @@ PostCard.styles = {
       .post-card__title h3 {
         ${lsdUtils.typography('h6')}
       }
+
       &.top-post {
         .post-card__title h3 {
           ${lsdUtils.typography('h4')}

src/components/PostCard/PostResultCard.tsx

@@ -98,7 +98,7 @@ const Container = styled.div`
   gap: 16px 0;
 
   .post-card__label {
-    margin-bottom: -8px;
+    margin-bottom: 0 !important;
   }
 
   .post-card__title {

src/components/Search/SearchResultList.Posts.tsx

@@ -16,6 +16,7 @@ export const SearchResultListPosts = ({ posts, shows }: Props) => {
             data={{
               ...data,
               coverImage: post.type === 'podcast' ? data.coverImage : undefined,
+              authors: [],
             }}
             className={'post-card__search-result'}
             size={'large'}

src/containers/Search/ExploreView.tsx

@@ -101,12 +101,15 @@ export const SearchResultsExploreView = (props: Props) => {
                     case LPE.ContentTypes.Podcast:
                       return (
                         <PostCard
-                          data={PostCard.toData(
-                            result.data as LPE.Post.Document,
-                            shows,
-                          )}
-                          size={'medium'}
+                          data={{
+                            ...PostCard.toData(
+                              result.data as LPE.Post.Document,
+                              shows,
+                            ),
+                            authors: [],
+                          }}
                           contentType={result.type as LPE.PostType}
+                          className={'post-card__search-explore'}
                         />
                       )
                     case LPE.ContentTypes.Article:
@@ -118,9 +121,10 @@ export const SearchResultsExploreView = (props: Props) => {
                               shows,
                             ),
                             coverImage: null,
+                            authors: [],
                           }}
-                          size={'medium'}
                           contentType={result.type as LPE.PostType}
+                          className={'post-card__search-explore'}
                         />
                       )
                     case LPE.ContentTypes.Image:

src/containers/Search/ListView.tsx

@@ -9,6 +9,7 @@ import { SearchResultTopPost } from '@/components/Search/SearchResult.TopPost'
 import { SearchResultListBlocks } from '@/components/Search/SearchResult.Blocks'
 import { Typography } from '@acid-info/lsd-react'
 import { lsdUtils } from '@/utils/lsd.utils'
+import { uiConfigs } from '@/configs/ui.configs'
 
 interface Props {
   posts: LPE.Search.ResultItemBase<LPE.Post.Document>[]
@@ -107,12 +108,12 @@ export const SearchResultsListView = (props: Props) => {
       <GridItem className={'w-1'} />
       <BlocksList className={'w-3'}>
         {renderBlocks.length > 0 ? (
-          <>
+          <BlockListSticky>
             <SearchResultsListHeader
               title={copyConfigs.search.labels.relatedContent}
             />
             <SearchResultListBlocks blocks={renderBlocks} />
-          </>
+          </BlockListSticky>
         ) : (
           !busy && (
             <Typography variant={'subtitle2'} genericFontFamily={'serif'}>
@@ -144,3 +145,10 @@ const PostsListHeader = styled.div``
 const PostsListContent = styled.div``
 
 const BlocksList = styled(GridItem)``
+
+const BlockListSticky = styled.div`
+  position: sticky;
+  top: ${uiConfigs.navbarRenderedHeight * 2 + 12}px;
+  height: 100vh;
+  overflow-y: auto;
+`

src/pages/search.tsx

@@ -101,7 +101,13 @@ export default function SearchPage({ topics, shows }: SearchPageProps) {
 
 SearchPage.getLayout = (page: ReactNode) => (
   <QueryParamProvider adapter={NextAdapterPages}>
-    <DefaultLayout>{page}</DefaultLayout>
+    <DefaultLayout
+      mainProps={{
+        spacing: false,
+      }}
+    >
+      {page}
+    </DefaultLayout>
   </QueryParamProvider>
 )