ui: first pass on redesign (#228)

src/components/Breadcrumb/index.tsx

@@ -14,7 +14,7 @@ interface IBreadcrumbProps {
   basePath: string
 }
 
-const Link: FC<ILinkProps> = ({ item }) => {
+const LinkItem: FC<ILinkProps> = ({ item }) => {
   return <SC.StyledLink to={item.path}>{humanize(item.title)}</SC.StyledLink>
 }
 
@@ -32,17 +32,17 @@ function flatten([
 export function Breadcrumb({ relativePath, basePath }: IBreadcrumbProps) {
   const paths = relativePath.split("/")
   const breadcrumbItems = flatten([traversePaths(paths, basePath)])
-  let foldersDepth = 0;
+  let foldersDepth = 0
   return (
     <SC.BreadcrumbWrapper>
       <SC.LinkWrapper>
-        <Link
+        <LinkItem
           item={{ path: "/", title: "home", type: "folder", children: [] }}
         />
         <ChevronUp />
       </SC.LinkWrapper>
       <SC.LinkWrapper>
-        <Link
+        <LinkItem
           item={{
             path: basePath,
             title: basePath.replace(/\//, ""),
@@ -55,18 +55,18 @@ export function Breadcrumb({ relativePath, basePath }: IBreadcrumbProps) {
 
       {breadcrumbItems.map(item => {
         if (item.type === "folder") {
-          foldersDepth++;
+          foldersDepth++
           if (foldersDepth > 1) {
             return (
-            <SC.LinkWrapper key={item.path}>
-              { item.title }
-              <ChevronUp />
-            </SC.LinkWrapper>
+              <SC.LinkWrapper key={item.path}>
+                {item.title}
+                <ChevronUp />
+              </SC.LinkWrapper>
             )
           } else {
             return (
               <SC.LinkWrapper key={item.path}>
-                <Link item={item} />
+                <LinkItem item={item} />
                 <ChevronUp />
               </SC.LinkWrapper>
             )

src/components/Breadcrumb/styles.tsx

@@ -1,9 +1,9 @@
 import { Link } from "gatsby"
-import { darken, lighten } from "polished"
 import styled from "styled-components"
 
 export const BreadcrumbWrapper = styled.div`
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
 
   @media screen and (max-width: 767px) {
@@ -16,6 +16,7 @@ export const LinkWrapper = styled.div`
   display: flex;
   align-items: center;
   height: 30px;
+  white-space: nowrap;
 
   svg {
     width: 12px;
@@ -24,20 +25,21 @@ export const LinkWrapper = styled.div`
   }
 
   svg path {
-    fill: ${props => props.theme.main.link};
+    fill: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
   }
 `
 
 export const StyledLink = styled(Link)`
-  color: ${props => props.theme.main.link};
+  color: ${props => (props.theme.name === "dark" ? "#f9f9f9" : "#172129")};
   cursor: pointer;
+  font-weight: 700;
+  text-decoration: underline;
 
   &:hover {
-    color: #045551;
-    color: ${props =>
-      props.theme.name === "dark"
-        ? lighten(0.15, props.theme.main.link)
-        : darken(0.15, props.theme.main.link)};
+    background: linear-gradient(92.97deg, #feaf6d 0%, #ff70a5 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
 `
 
@@ -45,4 +47,5 @@ export const CurrentPage = styled.div`
   display: flex;
   align-items: center;
   height: 30px;
+  white-space: nowrap;
 `