Skip to content

Commit ffb865b

Browse files
rstaibrstaib
committedJan 15, 2022
Website Cleanup
·
16.0.0-p.112.6.0-preview.1
1 parent 484e969 commit ffb865b

File tree

10 files changed

+75
-78
lines changed

10 files changed

+75
-78
lines changed
 

‎website/src/components/button.tsx ‎website/src/components/misc/button.tsx

File renamed without changes.

‎website/src/components/misc/cookie-consent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
44
import styled from "styled-components";
55
import { State } from "../../state";
66
import { hideCookieConsent, showCookieConsent } from "../../state/common";
7-
import { Button } from "../button";
7+
import { Button } from "../misc/button";
88
import { Link } from "./link";
99

1010
export const CookieConsent: FC = () => {

‎website/src/components/support/support-card.tsx ‎website/src/components/misc/support-card.tsx

+25-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { FC } from "react";
22
import styled from "styled-components";
3-
import { Perk } from "./perk";
43

54
export interface SupportCardProps {
65
name: string;
@@ -98,3 +97,28 @@ const Perks = styled.ul`
9897
9998
margin-top: 1.5rem;
10099
`;
100+
101+
export const Perk: FC = ({ children }) => {
102+
return (
103+
<PerkLayout>
104+
<Bullet>- </Bullet>
105+
<PerkContainer>{children}</PerkContainer>
106+
</PerkLayout>
107+
);
108+
};
109+
110+
const Bullet = styled.div`
111+
margin-left: 12px;
112+
`;
113+
114+
const PerkLayout = styled.li`
115+
display: grid;
116+
grid-template-rows: auto;
117+
grid-template-columns: 20px 1fr;
118+
`;
119+
120+
const PerkContainer = styled.div`
121+
margin-left: 12px;
122+
font-size: 0.875rem;
123+
line-height: 1.25rem;
124+
`;

‎website/src/components/structure/main-content-container/footer.tsx ‎website/src/components/structure/footer.tsx

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { graphql, useStaticQuery } from "gatsby";
22
import React, { FC } from "react";
33
import styled from "styled-components";
4-
import { GetFooterDataQuery } from "../../../../graphql-types";
5-
import LogoTextSvg from "../../../images/chillicream-text.svg";
6-
import LogoIconSvg from "../../../images/chillicream.svg";
7-
import GithubIconSvg from "../../../images/github.svg";
8-
import SlackIconSvg from "../../../images/slack.svg";
9-
import TwitterIconSvg from "../../../images/twitter.svg";
10-
import { IconContainer } from "../../misc/icon-container";
11-
import { Link } from "../../misc/link";
4+
import { GetFooterDataQuery } from "../../../graphql-types";
5+
import LogoTextSvg from "../../images/chillicream-text.svg";
6+
import LogoIconSvg from "../../images/chillicream.svg";
7+
import GithubIconSvg from "../../images/github.svg";
8+
import SlackIconSvg from "../../images/slack.svg";
9+
import TwitterIconSvg from "../../images/twitter.svg";
10+
import { IconContainer } from "../misc/icon-container";
11+
import { Link } from "../misc/link";
1212

1313
export const Footer: FC = () => {
1414
const data = useStaticQuery<GetFooterDataQuery>(graphql`
@@ -45,7 +45,7 @@ export const Footer: FC = () => {
4545

4646
return (
4747
<Container>
48-
<ContainerWrapper>
48+
<Section>
4949
<About>
5050
<Logo>
5151
<LogoIcon />
@@ -106,10 +106,10 @@ export const Footer: FC = () => {
106106
))}
107107
</Navigation>
108108
</Location>
109-
</ContainerWrapper>
110-
<ContainerWrapper>
109+
</Section>
110+
<Section>
111111
<Copyright>© {new Date().getFullYear()} ChilliCream</Copyright>
112-
</ContainerWrapper>
112+
</Section>
113113
</Container>
114114
);
115115
};
@@ -128,7 +128,7 @@ const Container = styled.footer`
128128
}
129129
`;
130130

131-
const ContainerWrapper = styled.div`
131+
const Section = styled.div`
132132
display: flex;
133133
flex: 0 0 auto;
134134
flex-direction: row;

‎website/src/components/structure/layout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { InlineCode } from "../mdx/inline-code";
55
import { CookieConsent } from "../misc/cookie-consent";
66
import { GlobalLayoutStyle, GlobalStyle } from "../misc/global-style";
77
import { Header } from "./header";
8-
import { MainContentContainer } from "./main-content-container/main-content-container";
8+
import { Main } from "./main";
99

1010
export const Layout: FC = ({ children }) => {
1111
const components = {
@@ -19,7 +19,7 @@ export const Layout: FC = ({ children }) => {
1919
<GlobalLayoutStyle />
2020
<Header />
2121
<MDXProvider components={components}>
22-
<MainContentContainer>{children}</MainContentContainer>
22+
<Main>{children}</Main>
2323
</MDXProvider>
2424
<CookieConsent />
2525
</>

‎website/src/components/structure/main-content-container/content.tsx

-13
This file was deleted.

‎website/src/components/structure/main-content-container/main-content-container.tsx ‎website/src/components/structure/main.tsx

+14-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React, { FC, useEffect, useRef } from "react";
22
import { useDispatch } from "react-redux";
33
import styled from "styled-components";
4-
import { hasScrolled } from "../../../state/common";
5-
import { PageTop } from "../../misc/page-top";
6-
import { ContentComponent } from "./content";
4+
import { hasScrolled } from "../../state/common";
5+
import { PageTop } from "../misc/page-top";
76
import { Footer } from "./footer";
87

9-
export const MainContentContainer: FC = ({ children }) => {
8+
export const Main: FC = ({ children }) => {
109
const ref = useRef<HTMLDivElement>(null);
1110
const dispatch = useDispatch();
1211

@@ -58,15 +57,15 @@ export const MainContentContainer: FC = ({ children }) => {
5857
};
5958

6059
return (
61-
<MainContentWrapper ref={ref}>
62-
<ContentComponent>{children}</ContentComponent>
60+
<Container ref={ref}>
61+
<Content>{children}</Content>
6362
<Footer />
6463
<PageTop onTopScroll={scrollToTop} />
65-
</MainContentWrapper>
64+
</Container>
6665
);
6766
};
6867

69-
const MainContentWrapper = styled.div`
68+
const Container = styled.div`
7069
width: 100%;
7170
grid-row: 2;
7271
display: grid;
@@ -76,3 +75,10 @@ const MainContentWrapper = styled.div`
7675
position: relative;
7776
overflow-y: auto;
7877
`;
78+
79+
const Content = styled.main`
80+
place-items: center;
81+
display: grid;
82+
overflow: visible;
83+
width: 100%;
84+
`;

‎website/src/components/support/perk.tsx

-27
This file was deleted.

‎website/src/pages/support.tsx

+20-13
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import {
1010
} from "../components/misc/marketing-elements";
1111
import { Hero, Intro, Teaser, Title } from "../components/misc/page-elements";
1212
import { SEO } from "../components/misc/seo";
13+
import { SupportCard } from "../components/misc/support-card";
1314
import { Layout } from "../components/structure/layout";
1415
import ContactUsSvg from "../images/contact-us.svg";
15-
import { SupportCard } from "../components/support/support-card";
1616
import { IsPhablet } from "../shared-style";
1717

1818
type ServiceType = "Consulting" | "Production Support";
@@ -29,23 +29,25 @@ const SupportPage: FC = () => {
2929
const supportServices: SupportService[] = [
3030
{
3131
service: "Consulting",
32-
description: "Hourly consulting services to get the help you need at any stage of your project. This is the best way to get started.",
32+
description:
33+
"Hourly consulting services to get the help you need at any stage of your project. This is the best way to get started.",
3334
perks: [
3435
"Mentoring and guidance",
3536
"Architecture",
3637
"Troubleshooting",
3738
"Code Review",
38-
"Best practices education"
39-
]
39+
"Best practices education",
40+
],
4041
},
4142
{
4243
service: "Production Support",
43-
description: "Options for teams who don't have the time, bandwidth, and/or expertise to implement their own GraphQL solutions.",
44+
description:
45+
"Options for teams who don't have the time, bandwidth, and/or expertise to implement their own GraphQL solutions.",
4446
perks: [
4547
"Proof of concept development",
46-
"Implementation of HotChocolate or Strawberry Shake"
47-
]
48-
}
48+
"Implementation of HotChocolate or Strawberry Shake",
49+
],
50+
},
4951
];
5052

5153
return (
@@ -61,9 +63,16 @@ const SupportPage: FC = () => {
6163
</Teaser>
6264
</Intro>
6365
<Section>
64-
<CardContainer>{supportServices.map(s =>
65-
<SupportCard key={s.service} name={s.service} description={s.description} perks={s.perks} />
66-
)}</CardContainer>
66+
<CardContainer>
67+
{supportServices.map((s) => (
68+
<SupportCard
69+
key={s.service}
70+
name={s.service}
71+
description={s.description}
72+
perks={s.perks}
73+
/>
74+
))}
75+
</CardContainer>
6776
</Section>
6877
<Section>
6978
<SectionRow>
@@ -87,7 +96,6 @@ const SupportPage: FC = () => {
8796
);
8897
};
8998

90-
9199
export default SupportPage;
92100

93101
const CardContainer = styled.div`
@@ -115,4 +123,3 @@ const CardContainer = styled.div`
115123
grid-template-columns: minmax(0, 1fr)
116124
`)}
117125
`;
118-

0 commit comments

Comments
 (0)
Please sign in to comment.