Typed codebase + styling for Articles and article page

Author: jeffreydyao

components/Button.tsx

@@ -5,12 +5,16 @@ export const Button = styled('button', {
   fontSize: '$label-lg',
   fontWeight: '500',
   fontFamily: '$sans',
+  letterSpacing: '-0.011rem',
+  lineHeight: '22px',
   color: '$blue12',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$2',
   transition: '$button',
   '&:hover': {
     backgroundColor: '$blue5'
   },
-
   variants: {
     size: {
       default: {

components/Card.tsx

@@ -0,0 +1,12 @@
+import { styled } from 'stitches.config'
+
+export const Card = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '$6 $5',
+  width: '22rem',
+  height: '25rem',
+  boxShadow: '$default',
+  background: '$slate1',
+  borderRadius: '$lg'
+})

components/Navbar.tsx

@@ -1,9 +1,10 @@
 import Link from 'next/link'
-import { GithubLogo, MagnifyingGlass } from 'phosphor-react'
+import { GithubLogo } from 'phosphor-react'
+import { Flex } from './Flex'
 import { IconButton } from './IconButton'
-import SearchButton from './SearchButton'
 import Logo from './Logo'
-import { Flex } from './Flex'
+import SearchButton from './SearchButton'
+import { Text } from './Text'
 
 const GITHUB_URL = 'https://github.com/csesoc/learning-platform'
 
@@ -13,19 +14,58 @@ export default function Navbar() {
       as="header"
       css={{
         py: '$4',
-        px: '$4',
-        justifyContent: 'space-between',
+        px: '$6',
         alignItems: 'center',
-        position: 'relative',
         zIndex: '1'
       }}>
-      <Link href="/">
-        <button aria-label="Return to home page">
-          <Logo />
-        </button>
-      </Link>
-      <Link href="/articles">Articles</Link>
-      <Flex>
+      <Flex css={{ flex: 1, justifyContent: 'flex-start' }}>
+        <Link href="/">
+          <button aria-label="Return to home page">
+            <Logo />
+          </button>
+        </Link>
+      </Flex>
+      <Flex
+        css={{
+          flex: 1,
+          gap: '2.25rem',
+          justifyContent: 'center'
+        }}>
+        <Link href="/articles">
+          <Text
+            as="a"
+            size="label-lg"
+            css={{ color: '$slate12', cursor: 'pointer' }}>
+            Articles
+          </Text>
+        </Link>
+        <Text
+          as="a"
+          size="label-lg"
+          css={{
+            color: '$slate11',
+            userSelect: 'none',
+            cursor: 'not-allowed'
+          }}>
+          Creators
+        </Text>
+        <Text
+          as="a"
+          size="label-lg"
+          css={{
+            color: '$slate11',
+            userSelect: 'none',
+            cursor: 'not-allowed'
+          }}>
+          About
+        </Text>
+      </Flex>
+      <Flex
+        css={{
+          flex: 1,
+          gap: '$3',
+          justifyContent: 'flex-end'
+        }}>
         <SearchButton />
         <IconButton aria-label="GitHub repository for CSESoc Learn">
           <a href={GITHUB_URL} target="_blank" rel="noreferrer">
@@ -36,18 +76,3 @@ export default function Navbar() {
     </Flex>
   )
 }
-
-//   <Link href="/">
-//   <a>
-//     <Logo />
-//   </a>
-// </Link>
-//             <Link href="">Articles</Link>
-
-//                     <a href={GITHUB_URL} target="_blank" rel="noreferrer">
-//                                   <SearchButton />
-//                                   </a>
-//       <IconButton>
-//         <GithubLogo weight="fill" />
-//       </IconButton>
-//     </a>

components/SearchOverlay.tsx

@@ -6,6 +6,7 @@ import { useHotkeys } from 'react-hotkeys-hook'
 import { Flex } from './Flex'
 import { Box } from './Box'
 import { styled } from 'stitches.config'
+import { XCircle } from 'phosphor-react'
 
 const StyledPortal = styled(Portal.Root, {
   display: 'flex',
@@ -54,18 +55,33 @@ export default function SearchOverlay({
         }}>
         <Flex
           css={{
-            backgroundColor: '$blue3',
-            fontSize: '$label-sm',
-            color: '$blue12',
-            px: '$3',
-            py: '$1',
-            mb: '$1',
-            width: 'fit-content',
-            borderRadius: '$sm'
+            width: 'max',
+            justifyContent: 'space-between',
+            alignItems: 'center'
           }}>
-          Search for content (Beta). Press Esc to close. Use Cmd + K to bring up
-          search anytime.
+          <Flex
+            css={{
+              backgroundColor: '$blue3',
+              fontSize: '$label-sm',
+              color: '$blue12',
+              px: '$3',
+              py: '$1',
+              mb: '$2',
+              width: 'fit-content',
+              borderRadius: '$sm'
+            }}>
+            Search for content (Beta). Press Esc to close. Use Cmd + K to bring
+            up search anytime.
+          </Flex>
+          <button aria-label="Close search">
+            <XCircle
+              size={24}
+              color="#889096"
+              onClick={() => changeActive(false)}
+            />
+          </button>
         </Flex>
+
         <input
           data-stork="search"
           className="stork-input"

components/Text.tsx

@@ -0,0 +1,62 @@
+// Based off https://github.com/radix-ui/design-system/blob/master/components/Text.tsx
+
+import { styled } from '../stitches.config'
+
+export const Text = styled('span', {
+  // Reset
+  margin: '0',
+  fontWeight: 400,
+  fontFamily: '$sans',
+  fontVariantNumeric: 'tabular-nums',
+  display: 'block',
+
+  variants: {
+    size: {
+      display: {
+        fontSize: '$display',
+        letterSpacing: '-0.022rem',
+        lineHeight: '56px'
+      },
+      headline: {
+        fontSize: '$headline',
+        letterSpacing: '-0.021rem',
+        lineHeight: '42px'
+      },
+      'title-lg': {
+        fontSize: '$title-lg',
+        letterSpacing: '-0.019rem',
+        lineHeight: '34px'
+      },
+      'title-md': {
+        fontSize: '$title-md',
+        letterSpacing: '-0.017rem',
+        lineHeight: '28px'
+      },
+      'title-sm': {
+        fontSize: '$title-sm',
+        letterSpacing: '-0.014rem',
+        lineHeight: '25px'
+      },
+      'label-lg': {
+        fontSize: '$label-lg',
+        letterSpacing: '-0.011rem',
+        lineHeight: '22px'
+      },
+      'label-md': {
+        fontSize: '$label-md',
+        letterSpacing: '-0.006rem',
+        lineHeight: '20px'
+      },
+      'label-sm': {
+        fontSize: '$label-sm',
+        letterSpacing: '-0.003rem',
+        lineHeight: '18px'
+      },
+      body: {
+        fontSize: '$body',
+        letterSpacing: '-0.011rem',
+        lineHeight: '22px'
+      }
+    }
+  }
+})

components/ThemeToggle.tsx

@@ -18,6 +18,7 @@
     "@radix-ui/react-avatar": "^0.1.4",
     "@radix-ui/react-portal": "^0.1.4",
     "@stitches/react": "^1.2.8",
+    "boring-avatars": "^1.6.3",
     "date-fns": "^2.28.0",
     "gray-matter": "^4.0.3",
     "next": "12.1.6",

package.json

@@ -4,6 +4,7 @@ import Navbar from 'components/Navbar'
 // import { ThemeProvider } from 'next-themes'
 import type { AppProps } from 'next/app'
 import '../styles/globals.css'
+import { Box } from 'components/Box'
 
 function MyApp({ Component, pageProps }: AppProps) {
   // TODO: Use return statement when dark theme is added
@@ -14,10 +15,10 @@ function MyApp({ Component, pageProps }: AppProps) {
   //   </ThemeProvider>
   // )
   return (
-    <>
+    <Box css={{ backgroundColor: '$slate2', height: '100vh' }}>
       <Navbar />
       <Component {...pageProps} />
-    </>
+    </Box>
   )
 }