style: fix navbar styling and make the search always light mode

joachimzeelmaekers · joachimzeelmaekers · commit 91a60fd36cb1 · 2024-08-29T09:56:49.000+02:00
diff --git a/components/HomeSearchBar.tsx b/components/HomeSearchBar.tsx
@@ -3,6 +3,7 @@ import { Button } from '@datacamp/waffles/button';
 import { mediaQuery } from '@datacamp/waffles/helpers';
 import { Search } from '@datacamp/waffles/icon';
 import { Input } from '@datacamp/waffles/input';
+import { lightThemeStyle } from '@datacamp/waffles/theme';
 import { tokens } from '@datacamp/waffles/tokens';
 import styled from '@emotion/styled';
 import { ChangeEvent } from 'react';
@@ -31,7 +32,14 @@ export default function HomeSearchBar({ onChange, value }: Props) {
   const p = PLACEHOLDERS[Math.floor(Math.random() * PLACEHOLDERS.length)];
 
   return (
-    <Wrapper>
+    <Wrapper
+      css={{
+        '&, &[data-theme="light"] *': {
+          ...lightThemeStyle,
+        },
+      }}
+      data-theme={'light'}
+    >
       <Input
         iconLeft={<Search aria-label="Search all packages and functions" />}
         onChange={onChange}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { DataCampLogo } from '@datacamp/waffles/brand';
 import { Button } from '@datacamp/waffles/button';
 import { Heading } from '@datacamp/waffles/heading';
@@ -12,7 +13,6 @@ import {
 } from '@datacamp/waffles/theme';
 import { tokens } from '@datacamp/waffles/tokens';
 import styled from '@emotion/styled';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useContext, useState } from 'react';
 import { FaGithub } from 'react-icons/fa';
@@ -96,25 +96,33 @@ export default function Navbar() {
   return (
     <Header data-theme={theme}>
       <nav>
-        <Link href="/">
-          <LogoWrapper>
-            <Heading style={{ color: themeTokens.text.main }}>
-              RDocumentation
+        <LogoWrapper>
+          <a href="/">
+            <Heading css={{ color: themeTokens.text.main, margin: 0 }}>
+              Rdocumentation
             </Heading>
-            <div>
-              <VerticalDivider />
-            </div>
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
-              <Paragraph
-                style={{ color: themeTokens.text.secondary }}
-                variant="secondary"
-              >
-                powered by
-              </Paragraph>
-              <DataCampLogo />
-            </div>
-          </LogoWrapper>
-        </Link>
+          </a>
+
+          <div>
+            <VerticalDivider />
+          </div>
+          <a
+            css={{ display: 'flex', flexDirection: 'column' }}
+            href="https://www.datacamp.com"
+          >
+            <Paragraph
+              size="small"
+              style={{
+                color: themeTokens.text.secondary,
+                marginBottom: 0,
+              }}
+              variant="secondary"
+            >
+              powered by
+            </Paragraph>
+            <DataCampLogo css={{ flexShrink: 0, height: 18, width: 86 }} />
+          </a>
+        </LogoWrapper>
       </nav>
 
       <RightContainer>
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -6,16 +6,14 @@ import { tokens } from '@datacamp/waffles/tokens';
 import styled from '@emotion/styled';
 import { GetServerSideProps } from 'next';
 import { useRouter } from 'next/router';
-import { useContext, useState } from 'react';
+import { useState } from 'react';
 
 import AutoComplete from '../components/Autocomplete';
 import { HomePageLinks } from '../components/HomePageLinks';
 import HomeSearchBar from '../components/HomeSearchBar';
 import Layout from '../components/Layout';
 import { API_URL } from '../lib/utils';
 
-import { ThemeContext } from './_app';
-
 const SearchWrapper = styled.div({
   margin: `${tokens.spacing.large} 0`,
   width: `100%`,
@@ -28,7 +26,6 @@ const SearchWrapper = styled.div({
 export default function HomePage({ packageCount }: { packageCount?: number }) {
   const [searchInput, setSearchInput] = useState('');
   const router = useRouter();
-  const { theme } = useContext(ThemeContext);
 
   function handleChangeSearchInput(e) {
     setSearchInput(e.target.value);
@@ -53,7 +50,7 @@ export default function HomePage({ packageCount }: { packageCount?: number }) {
       description="Easily search the documentation for every version of every R package on CRAN and Bioconductor."
       title="Home"
     >
-      <SearchWrapper data-theme={theme}>
+      <SearchWrapper>
         <Heading as="h2" size="xlarge" style={{ color: themeTokens.text.main }}>
           {`Search from ${numberOfPackages} R packages on CRAN and Bioconductor`}
         </Heading>
diff --git a/pages/packages/[package]/versions/[version]/topics/[topic].tsx b/pages/packages/[package]/versions/[version]/topics/[topic].tsx
@@ -135,7 +135,7 @@ export default function TopicPage({ topicData }: Props) {
             <section>
               {sections.map((section) => {
                 if (section.description.length < 1) {
-                  return;
+                  return null;
                 }
                 return (
                   <div key={section.name}>

Original file line number	Diff line number	Diff line change
`@@ -135,7 +135,7 @@ export default function TopicPage({ topicData }: Props) {`
`135`	`135`	`<section>`
`136`	`136`	`{sections.map((section) => {`
`137`	`137`	`if (section.description.length < 1) {`
`138`		`- return;`
	`138`	`+ return null;`
`139`	`139`	`}`
`140`	`140`	`return (`
`141`	`141`	`<div key={section.name}>`