ui(resources): tweak styling of resource list

src/components/Link/index.tsx

@@ -5,13 +5,17 @@ interface ILinkProps {
   to: string
 }
 
-export const Link: FC<ILinkProps> = ({ children, to }) => {
+export const Link: FC<ILinkProps> = ({ children, to, ...props }) => {
   if (!to.match(/^(https?:\/\/)/)) {
-    return <SC.LinkInternal to={to}>{children}</SC.LinkInternal>
+    return (
+      <SC.LinkInternal {...props} to={to}>
+        {children}
+      </SC.LinkInternal>
+    )
   }
 
   return (
-    <SC.LinkExternal rel="noreferrer" href={to} target="_blank">
+    <SC.LinkExternal {...props} rel="noreferrer" href={to} target="_blank">
       {children}
     </SC.LinkExternal>
   )

src/components/ResourcesList/index.tsx

@@ -1,3 +1,4 @@
+import cx from "classnames"
 import { graphql, useStaticQuery } from "gatsby"
 import sort from "ramda/es/sort"
 import React, { FC, HTMLAttributes, memo, useMemo } from "react"
@@ -34,10 +35,7 @@ function plantTree(item: IFileOrFolder, single?: boolean) {
 
     return (
       <SC.PageLink key={item.title} to={path}>
-        {cleanedUpPath.map((node) => (
-          // TODO: use helper to format path
-          <SC.NodePart key={node}>{humanize(node)}</SC.NodePart>
-        ))}
+        {cleanedUpPath.map((node) => humanize(node)).join(" / ")}
       </SC.PageLink>
     )
   }
@@ -61,7 +59,9 @@ const Language = memo(
     return (
       <SC.TreeWrapper>
         {!single && <SC.LanguageLabel>{humanize(item.title)}</SC.LanguageLabel>}
-        <SC.Children>{children.map((node) => plantTree(node))}</SC.Children>
+        <SC.Children className={cx({ "is-single": single })}>
+          {children.map((node) => plantTree(node))}
+        </SC.Children>
       </SC.TreeWrapper>
     )
   }

src/components/ResourcesList/styles.tsx

@@ -1,6 +1,6 @@
-import { Link } from "gatsby"
 import { transparentize } from "polished"
 import styled from "styled-components"
+import { Link } from "../Link"
 
 export const ResourcesListWrapper = styled.div`
   box-sizing: border-box;
@@ -14,6 +14,10 @@ export const Children = styled.div`
   flex-direction: column;
   align-items: flex-start;
   overflow: hidden;
+
+  &.is-single {
+    padding-left: 0;
+  }
 `
 
 export const Label = styled.div`
@@ -65,7 +69,10 @@ export const TreeWrapper = styled.div`
   flex-direction: column;
   width: 100%;
   font-size: 16px;
-  margin: 32px 0;
+
+  & + & {
+    margin-top: 32px;
+  }
 
   ${Children} {
     display: flex;
@@ -77,27 +84,11 @@ export const TreeWrapper = styled.div`
 `
 
 export const PageLink = styled(Link)`
-  display: block;
-  padding: 2px 0;
-  color: ${(props) => props.theme.sidebar.foreground};
-  align-self: flex-start;
-  text-decoration: none;
-  border-bottom: 1px solid transparent;
-
-  &:hover {
-    border-color: ${(props) =>
-      transparentize(0.7, props.theme.sidebar.foreground)};
-  }
+  font-weight: 400;
+  display: inline-block;
+  font-size: 18px;
 
   & + & {
-    margin-top: 4px;
-  }
-`
-
-export const NodePart = styled.span`
-  & + &::before {
-    content: "/";
-    opacity: 0.3;
-    margin: 0 4px;
+    margin-top: 8px;
   }
 `