Typography, HeroAside tweaks

src/components/Hero/HeroAside.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { colors, Colors2 } from "@theme/colors";
+import { colors } from "@theme/colors";
 import Anchor from "@components/Anchor";
 
 interface HeroAsideItemProps {
@@ -11,33 +11,8 @@ interface HeroAsideItemProps {
 }
 
 const Article = styled.article`
-  line-height: 1rem;
+  max-width: 350px;
   margin-bottom: 1rem;
-
-  h2 {
-    color: ${colors.lightBlue};
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    line-height: 20px;
-  }
-
-  p, a {
-    color: ${colors.lightBlue};
-    font-size: 14px;
-    font-weight: 300;
-    line-height: 20px;
-  }
-
-  a {
-    color: ${colors.blue1};
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.1rem;
-
-    &:hover {
-      color: ${colors.white};
-    }
-  }
 `;
 
 export const HeroAsideItem: React.FC<HeroAsideItemProps> = ({ header, text, link, linkText }) => (
@@ -47,34 +22,78 @@ export const HeroAsideItem: React.FC<HeroAsideItemProps> = ({ header, text, link
       <p>{text}</p>
     )}
     <Anchor to={link}>
-      {linkText}
+      <h6>
+        {linkText}
+      </h6>
     </Anchor>
   </Article>
 )
 
+type Colors = "darkBlue" | "lightTurquoise";
 
 interface HeroAsideProps {
-  bgColor?: Colors2;
+  bgColor: Colors;
 }
 
 // TODO: Color combos
-const Aside = styled.aside<HeroAsideProps>`
+const Aside = styled.aside<{ colors: string }>`
+  ${(p) => p.colors}
   flex: 4;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 0 6rem;
 
-  background: ${(p) => p.bgColor};
-  color: ${colors.darkBlue};
+
+  h2 {
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    line-height: 1.5rem;
+  }
+
+  p {
+    margin: 0;
+    line-height: 2rem;
+  }
+
+
+  & > p {
+    font-weight: 600;
+    margin-bottom: 2rem;
+  }
+
+  a {
+    line-height: 2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    text-decoration: none;
+    letter-spacing: 0.1rem;
+  }
+
 
   @media screen and (max-width: 800px) {
     margin: 48px auto;
   }
 `;
 
-const HeroAside: React.FC<HeroAsideProps> = ({ bgColor = "inherit", children}) => (
-  <Aside bgColor={colors[bgColor]}>
+const textColors = (bgColor: Colors) => {
+  switch(bgColor) {
+  case "darkBlue":
+    return `
+background-color: ${colors[bgColor]};
+color: ${colors.lightBlue};
+`;
+  case "lightTurquoise":
+    return `
+background-color: ${colors[bgColor]};
+color: ${colors.darkBlue};
+  `;
+  default: return ""
+  }
+}
+
+const HeroAside: React.FC<HeroAsideProps> = ({ bgColor, children}) => (
+  <Aside colors={textColors(bgColor)}>
     {children}
   </Aside>
 )

src/components/Hero/HeroPrimarySection.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { colors } from "@theme/colors";
 
 interface HeroPrimarySectionProps {
   header: string;
@@ -22,7 +23,18 @@ const Section = styled.section`
   p {
     max-width: 400px;
     margin: 1em auto;
-    font-weight: 100;
+    font-weight: 200;
+  }
+
+  a {
+    color: ${colors.blue1};
+    font-weight: 600;
+    text-decoration: underline;
+
+    &:hover {
+      color: ${colors.white};
+      text-decoration: none
+    }
   }
 `;