changed subtitle to be a paragraph and be used by blogpost and credits

Tiko · Tiko · commit 275d13932974 · 2020-12-23T17:52:11.000+01:00
diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import theme from '../styles/theme';
 import { QuoteProps } from './Typography.types';
 
-const { fontWeights, fonts } = theme;
+const { fontWeights, fonts, typography } = theme;
 const QuoteText = styled.blockquote`
     font-weight: ${fontWeights.light};
     line-height: 1.2em;
@@ -20,12 +20,16 @@ export const Small = styled.span`
     font-size: 0.66em;
 `;
 
-export const Subtitle = styled.h6`
+export const Subtitle = styled.p`
     size: 0.85rem;
     height: 1.2em;
     font-family: ${fonts.paragraph};
     font-weight: ${fontWeights.bold};
     color: ${theme.colors.primary};
+    text-transform: uppercase;
+    letter-spacing: ${typography.subtitle.spacing};
+    font-size: 0.85rem;
+    margin-bottom: 0.5em;
 `;
 
 export const Quote: React.FC<QuoteProps> = ({ author, url, children }) => {
diff --git a/src/containers/Credits/Credits.components.tsx b/src/containers/Credits/Credits.components.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import theme from '../../styles/theme';
 import Button from '../../components/Button/Button';
+import { Subtitle } from '../../components/Typography';
 
 const { mediaQueryMin } = theme;
 export const CreditsContainer = styled.div`
@@ -51,7 +52,7 @@ interface CreditItemProps {
 }
 export const CreditItem: React.FC<CreditItemProps> = ({ title, credits }) => (
     <CreditItemContainer>
-        <CreditTitle className="subtitle">{title}</CreditTitle>
+        <Subtitle>{title}</Subtitle>
         {credits.map((credit) => (
             <CreditText className="Paragraph light">{credit}</CreditText>
         ))}
@@ -70,7 +71,7 @@ export const CreditItemWithLinks: React.FC<CreditItemWithLinksProps> = ({
     links,
 }: CreditItemWithLinksProps) => (
     <CreditItemContainer>
-        <CreditTitle className="subtitle">{title}</CreditTitle>
+        <Subtitle>{title}</Subtitle>
         {credits.map((credit, index) => (
             <>
                 <CreditText>{credit}</CreditText>
diff --git a/src/layouts/BlogpostLayout.components.ts b/src/layouts/BlogpostLayout.components.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import theme from '../styles/theme';
-import { Big, Small } from '../components/Typography';
+import { Big, Small, Subtitle } from '../components/Typography';
 
 const { mediaQueryMin, colors } = theme;
 
@@ -117,15 +117,12 @@ export const SubtitleContainer = styled.div`
     text-transform: uppercase;
     align-items: flex-end;
     padding: 0 1em;
-    span,
-    p {
-        opacity: 0.3;
-        color: ${colors.lightgray};
-    }
 `;
 
 export const ReadingTime = styled(Small)`
     margin-bottom: 2px;
+    opacity: 0.3;
+    color: ${colors.lightgray};
 `;
 
 export const ArticleImage = styled.img`
@@ -143,3 +140,9 @@ export const CallToActionText = styled.p`
     font-style: italic;
     color: ${theme.colors.lightgray} !important;
 `;
+
+export const StyledSubtitle = styled(Subtitle)`
+    margin-top: 0.66em;
+    margin-bottom: 0.33em;
+    font-weight: ${theme.fontWeights.regular};
+`;
diff --git a/src/layouts/BlogpostLayout.tsx b/src/layouts/BlogpostLayout.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import MDXRenderer from 'gatsby-mdx/mdx-renderer'; // TODO: fix mdx to work with Typescript
+import MDXRenderer from 'gatsby-mdx/mdx-renderer';
 import { BlogpostSingleProps, CallToActionProps } from './BlogpostLayout.types';
 import Layout from './MainLayout';
 import Author from '../containers/Author/Author';
@@ -19,6 +19,7 @@ import {
     ArticleIntro,
     CallToActionContainer,
     CallToActionText,
+    StyledSubtitle,
 } from './BlogpostLayout.components';
 
 const CallToAction: React.FC<CallToActionProps> = () => (
@@ -44,7 +45,7 @@ const BlogSingle: React.FC<BlogpostSingleProps> = ({ content }) => (
         <Article>
             <ArticleHeader>
                 <SubtitleContainer>
-                    <Subtitle>{content.category_name}</Subtitle>
+                    <StyledSubtitle>{content.category_name}</StyledSubtitle>
                     <ReadingTime>
                         &nbsp;&nbsp;&#47;&#47; {content.reading_time} min. read
                     </ReadingTime>
