ui: first pass on redesign (#228)

src/components/Sidebar/index.tsx

@@ -1,8 +1,7 @@
-import { Link } from "gatsby"
 import React, { FC, HTMLAttributes, PropsWithChildren } from "react"
 import Scrollbar from "react-perfect-scrollbar"
 import "react-perfect-scrollbar/dist/css/styles.css"
-import Banner from "../../images/tph-banner.svg"
+import cx from "classnames"
 import { ThemeToggler } from "../ThemeToggler"
 import * as SC from "./styles"
 
@@ -22,18 +21,21 @@ export const Sidebar: FC<PropsWithChildren<
   HTMLAttributes<HTMLDivElement>
 >> = props => {
   const { children, ...restProps } = props
-  const isBorderVisible = children === undefined ? false : true
 
   return (
     <SC.SidebarWrapper {...restProps}>
       <Scrollbar>
-        <Link to="/">
-          <Banner />
-        </Link>
+        <SC.Title to="/">
+          The
+          <br />
+          Programmer's
+          <br />
+          Hangout
+        </SC.Title>
         <SC.Inner>
           {children}
 
-          <SC.Menu borderVisibility={isBorderVisible}>
+          <SC.Menu className={cx({ "has-border": Boolean(children) })}>
             <MenuItem to="/about">about</MenuItem>
             <MenuItem to="/rules">rules</MenuItem>
             <MenuItem to="/resources">resources</MenuItem>

src/components/Sidebar/styles.tsx

@@ -1,5 +1,6 @@
 import { Link } from "gatsby"
 import styled, { css } from "styled-components"
+import { transparentize } from "polished"
 
 export const SidebarWrapper = styled.div`
   box-sizing: border-box;
@@ -27,17 +28,34 @@ export const SidebarWrapper = styled.div`
   }
 `
 
+export const Title = styled(Link)`
+  display: block;
+  color: ${props => props.theme.sidebar.foreground};
+  font-size: 30px;
+  line-height: 34px;
+  font-weight: 700;
+  padding: 20px 0 0 20px;
+  text-decoration: none;
+
+  &:hover {
+    opacity: 0.85;
+  }
+`
+
 export const Inner = styled.div`
-  padding: 30px 0 30px 20px;
+  padding: 20px 0 30px 20px;
 `
 
 export const Menu = styled.nav`
   display: flex;
   flex-direction: column;
-  border-top: ${props =>
-    props.borderVisibility ? "1px dashed #a5a5a5" : "none"};
   margin: 20px 0 40px;
   padding-top: 20px;
+
+  &.has-border {
+    border-top: ${props =>
+      `1px dashed ${transparentize(0.8, props.theme.sidebar.foreground)}`};
+  }
 `
 
 export const menuItemStyles = css`