Skip to content

Commit 6f3c748

Browse files
author
Tiko
committed
changed all classname subtitle to the Subtitle component
1 parent b7391d4 commit 6f3c748

32 files changed

+130
-165
lines changed

‎src/components/Typography.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import theme from '../styles/theme';
44
import { QuoteProps } from './Typography.types';
55

66
const { fontWeights, fonts, typography } = theme;
7+
8+
const { caption } = typography;
9+
710
const QuoteText = styled.blockquote`
811
font-weight: ${fontWeights.light};
912
line-height: 1.2em;
@@ -32,6 +35,15 @@ export const Subtitle = styled.p`
3235
margin-bottom: 0.5em;
3336
`;
3437

38+
export const Caption = styled.a`
39+
font-size: ${caption.size};
40+
line-height: ${caption.height};
41+
letter-spacing: ${caption.spacing};
42+
font-family: ${caption.font};
43+
font-weight: ${caption.weight};
44+
color: ${caption.color};
45+
`;
46+
3547
export const Quote: React.FC<QuoteProps> = ({ author, url, children }) => {
3648
return (
3749
<div>

‎src/containers/Container.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@ const { mediaQueryMin, containerWidth } = theme;
66
interface ContainerProps {
77
align?: string;
88
}
9-
const Container =
10-
styled.section <
11-
ContainerProps >
12-
`
9+
const Container = styled.section<ContainerProps>`
1310
padding: 1em ${containerWidth.xs};
1411
display: flex;
1512
flex-direction: column;

‎src/containers/ContentBlocks/ContentBlocks.components.ts‎

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@ interface TextAndImageBaseProps {
99
grid?: string;
1010
fluid?: boolean;
1111
}
12-
export const TextAndImageBase =
13-
styled.div <
14-
TextAndImageBaseProps >
15-
`
12+
export const TextAndImageBase = styled.div<TextAndImageBaseProps>`
1613
max-width: 100% !important;
1714
display: flex;
1815
flex-direction: column;
@@ -25,14 +22,13 @@ export const TextAndImageBase =
2522
grid-column-gap: ${(props) => props.gutter};
2623
}
2724
@media (${mediaQueryMin.md}) {
28-
grid-template: auto / ${containerWidth.sm} ${(props) => props.grid} ${
29-
containerWidth.sm
30-
};
25+
grid-template: auto / ${containerWidth.sm} ${(props) => props.grid} ${containerWidth.sm};
3126
}
3227
@media (${mediaQueryMin.lg}) {
3328
grid-template: auto / ${(props) =>
34-
props.fluid ? containerWidth.md : containerWidth.xl} ${(props) =>
35-
props.grid} ${containerWidth.md};
29+
props.fluid ? containerWidth.md : containerWidth.xl} ${(
30+
props
31+
) => props.grid} ${containerWidth.md};
3632
}
3733
`;
3834

@@ -41,10 +37,7 @@ interface ImageWrapperProps {
4137
small?: boolean;
4238
transform?: string;
4339
}
44-
export const ImageWrapper =
45-
styled.figure <
46-
ImageWrapperProps >
47-
`
40+
export const ImageWrapper = styled.figure<ImageWrapperProps>`
4841
grid-area: ${(props) => props.pos};
4942
width: ${(props) => (props.small ? '70%' : '100%')};
5043
margin: 1em 1em;
@@ -64,10 +57,7 @@ interface ContentWrapperProps {
6457
reverse?: boolean;
6558
fluid?: boolean;
6659
}
67-
export const ContentWrapper =
68-
styled.div <
69-
ContentWrapperProps >
70-
`
60+
export const ContentWrapper = styled.div<ContentWrapperProps>`
7161
margin: 2em 1em;
7262
max-width: 100vw;
7363
@media (${mediaQueryMin.xs}) {
@@ -85,10 +75,7 @@ export const ContentWrapper =
8575
interface GalleryWrapperProps {
8676
width?: number;
8777
}
88-
export const GalleryWrapper =
89-
styled.section <
90-
GalleryWrapperProps >
91-
`
78+
export const GalleryWrapper = styled.section<GalleryWrapperProps>`
9279
display: flex;
9380
& > * {
9481
width: ${(props) => props.width || 100}%;

‎src/containers/ContentBlocks/ContentBlocks.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -111,10 +111,7 @@ export const Introduction: React.FC<IntroductionProps> = ({ children }) => {
111111
interface ProfilePictureProps {
112112
img: string;
113113
}
114-
export const ProfilePicture =
115-
styled.div <
116-
ProfilePictureProps >
117-
`
114+
export const ProfilePicture = styled.div<ProfilePictureProps>`
118115
width: 5rem;
119116
height: 5rem;
120117
border-radius: 100rem;

‎src/containers/ContentPageHeader/ContentPageHeader.components.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,7 @@ interface MainHeaderProps {
1313
hero?: boolean;
1414
blendMode?: string;
1515
}
16-
export const MainHeader =
17-
styled.header <
18-
MainHeaderProps >
19-
`
16+
export const MainHeader = styled.header<MainHeaderProps>`
2017
background: url(${(props) => props.img})
2118
${(props) =>
2219
props.shadow &&

‎src/containers/Credits/Credits.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import {
99
} from './Credits.components';
1010

1111
type ColumnData = {
12-
title: string,
13-
content: string[],
12+
title: string;
13+
content: string[];
1414
};
1515

1616
interface Props {

‎src/containers/Deliverables.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import styled from 'styled-components';
33
import theme from '../styles/theme';
4+
import { Subtitle } from '../components/Typography';
45
// TODO: move to ContentBlocks folder
56

67
const plusBullet = require('../images/icons/ui/plus-bullet.svg');
@@ -59,7 +60,7 @@ const Deliverables: React.FC<Props> = ({ deliverables }) => {
5960
return (
6061
<DeliverablesBase>
6162
<DeliverablesContent>
62-
<p className="subtitle">Deliverables</p>
63+
<Subtitle>Deliverables</Subtitle>
6364
<List>
6465
{deliverables.map((item) => {
6566
return <Deliverable>{item}</Deliverable>;

‎src/containers/Gallery.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,7 @@ interface GalleryProps {
1010
md?: number;
1111
lg?: number;
1212
}
13-
const Gallery =
14-
styled.section <
15-
GalleryProps >
16-
`
13+
const Gallery = styled.section<GalleryProps>`
1714
display: flex;
1815
flex-direction: column;
1916
flex-wrap: wrap;

‎src/containers/Navbar/Navbar.components.tsx‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,7 @@ interface ContainerProps {
1515
background?: boolean;
1616
}
1717

18-
export const NavbarContainer =
19-
styled.nav <
20-
ContainerProps >
21-
`
18+
export const NavbarContainer = styled.nav<ContainerProps>`
2219
position: fixed;
2320
width: 100%;
2421
z-index: 10000;
@@ -54,10 +51,7 @@ export const NavbarContainer =
5451
interface ContentProps {
5552
menuIsOpen?: boolean;
5653
}
57-
export const NavbarContent =
58-
styled.div <
59-
ContentProps >
60-
`
54+
export const NavbarContent = styled.div<ContentProps>`
6155
display: flex;
6256
align-items: center;
6357
justify-content: space-between;
@@ -68,9 +62,7 @@ export const NavbarContent =
6862
justify-content: space-between;
6963
7064
position: fixed;
71-
transform: translateX(
72-
${(props) => (props.menuIsOpen ? 0 : '65em')}
73-
);
65+
transform: translateX(${(props) => (props.menuIsOpen ? 0 : '65em')});
7466
top: 0;
7567
bottom: 0;
7668
@@ -202,10 +194,7 @@ export const CloseMenuButton = styled(MenuButton)`
202194
interface OverlayProps {
203195
menuIsOpen?: boolean;
204196
}
205-
export const BlackOverlay =
206-
styled.div <
207-
OverlayProps >
208-
`
197+
export const BlackOverlay = styled.div<OverlayProps>`
209198
position: fixed;
210199
top: 0;
211200
right: 0;

‎src/containers/NewsletterSubscribe/NewsletterSubscribe.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const NewsletterSubscribe: React.FC<NewsletterSubscribeProps> = ({
3636
const [email, setEmail] = useState('');
3737

3838
const stateChanger = (
39-
setter: React.Dispatch<React.SetStateAction<string>>,
39+
setter: React.Dispatch<React.SetStateAction<string>>
4040
) => (e: React.ChangeEvent<HTMLInputElement>) => setter(e.target.value);
4141
const canSubmit = name !== '' && email !== '';
4242

0 commit comments

Comments
 (0)