Skip to content

Commit e9d33ab

Browse files
kelseyyimAllicolyer
kelseyyim
authored and
Allicolyer
committed
inital setup for styling
1 parent 8bec0a7 commit e9d33ab

File tree

4 files changed

+212
-19
lines changed

4 files changed

+212
-19
lines changed

‎packages/gatsby-theme/src/components/TutorialListing.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,14 @@ const TutorialListing: React.FunctionComponent<TutorialListingProps> = ({
4848
>
4949
{({ data }) => {
5050
return (
51-
<Card width={[1]} p={4} my={4} borderRadius={8} boxShadow="small">
51+
<Card
52+
width={[1]}
53+
p={4}
54+
my={4}
55+
borderRadius={8}
56+
boxShadow="small"
57+
backgroundColor="white"
58+
>
5259
<Flex alignItems="center" justifyContent="center">
5360
<Box width={1 / 12}>
5461
{data.gatsbyTutorialQuery && (

‎packages/gatsby-theme/src/components/buttons.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@ const customButtonTypes: CustomButtonType = {
9999
bg: 'white',
100100
},
101101
voteActive: {
102-
icon: 'https://i.ibb.co/b3FGXbD/Vote.png',
103-
bg: 'blue',
102+
icon: 'https://i.ibb.co/m41h9fC/Vote-filled.png',
103+
bg: 'white',
104104
},
105105
bookmark: {
106106
icon:

‎packages/gatsby-theme/src/components/shared/Logo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default ({ maxHeight }: LogoProps) => {
2222
src={require('../../assets/icons/howtographql.svg')}
2323
alt=""
2424
height={maxHeight}
25-
style={{ marginBottom: 0, marginRight: 5 }}
25+
style={{ marginBottom: 0, marginRight: 5, marginLeft: 10 }}
2626
/>
2727
<span>How to GraphQL</span>
2828
</LogoWrapper>

‎packages/gatsby-theme/src/pages/community.tsx

+201-15
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,169 @@ import Layout from '../components/layout';
33
import { Content } from '../components/shared/styledHelpers';
44
import { graphql } from 'gatsby';
55
import TutorialListing from '../components/TutorialListing';
6-
import { Heading } from '../components/shared/base';
6+
import {
7+
Heading,
8+
Box,
9+
Flex,
10+
Text,
11+
Button,
12+
Image,
13+
} from '../components/shared/base';
14+
import { styled } from '../styles';
15+
import WithCurrentUser from '../utils/auth/WithCurrentUser';
16+
17+
interface CommunityProps {
18+
data: Data;
19+
}
20+
21+
type Data = {
22+
tutorials: Tutorial;
23+
};
24+
25+
type Tutorial = {
26+
edges: [Edge];
27+
};
28+
29+
type Edge = {
30+
node: Node;
31+
};
32+
33+
type Node = {
34+
fileAbsolutePath: string;
35+
id: string;
36+
frontmatter: Frontmatter;
37+
};
38+
39+
type Frontmatter = {
40+
description: string;
41+
tutorialTitle: string;
42+
};
43+
44+
const Community: React.FunctionComponent<CommunityProps> = ({ data }) => {
45+
const tutorials = data.tutorials.edges;
746

8-
const Community = data => {
9-
const tutorials = data.data.tutorials.edges;
1047
return (
11-
<Layout>
12-
<Content>
13-
<Heading> Community Tutorials </Heading>
14-
{tutorials.map(tutorial => {
15-
return (
16-
<div key={tutorial.node.id}>
17-
<TutorialListing tutorial={tutorial.node} />
18-
</div>
19-
);
20-
})}
21-
</Content>
22-
</Layout>
48+
<WithCurrentUser>
49+
{({ user, loading }) => {
50+
return (
51+
<Layout>
52+
<Flex flexDirection="column" alignItems="center" p={4}>
53+
<Box
54+
style={{
55+
backgroundImage: `url(${'https://i.ibb.co/S736mwr/Bg.png'})`,
56+
backgroundPosition: 'center',
57+
backgroundSize: 'cover',
58+
}}
59+
>
60+
<Flex
61+
flexDirection="row"
62+
alignItems="center"
63+
justifyContent="center"
64+
flexWrap="wrap"
65+
>
66+
<HeaderText width={1 / 4}>
67+
<Heading p={3} fontSize={5} color="#515273">
68+
Community Tutorials
69+
</Heading>
70+
<Text p={3} color="#515273">
71+
Learn from a wide range of topics. Client or server,
72+
beginner or advanced, theoretical or code-along – discover
73+
the tutorials contributed by the GraphQL community!
74+
</Text>
75+
</HeaderText>
76+
77+
<HeaderText>
78+
<img src="https://i.ibb.co/pKM9XgL/Illustration.png" />
79+
</HeaderText>
80+
81+
<FilterBox marginTop={25}>
82+
<Text p={3}>FOR FILTER BOX </Text>
83+
</FilterBox>
84+
</Flex>
85+
</Box>
86+
</Flex>
87+
88+
<TutorialContent>
89+
<TutorialNumber m={3} width={5 / 5}>
90+
<p>
91+
<span>{tutorials.length} TUTORIALS </span>
92+
</p>
93+
</TutorialNumber>
94+
<Content>
95+
{tutorials.map(tutorial => {
96+
return (
97+
<div key={tutorial.node.id}>
98+
<TutorialListing tutorial={tutorial.node} />
99+
</div>
100+
);
101+
})}
102+
</Content>
103+
</TutorialContent>
104+
<Footer height={5 / 5} p={5} paddingRight={100} paddingLeft={100}>
105+
<Heading>Contributors</Heading>
106+
<div>
107+
l ac, feugiat convallis magna. Nam dignissim semper mauris,
108+
pharetra mollis neque viverra ac. Duis semper, odio quis
109+
tincidunt convallis, libero mi tristique ipsum.l ac, feugiat
110+
convallis magna. Nam dignissim semper mauris, pharetra mollis
111+
neque viverra ac. Duis semper, odio quis tincidunt convallis,
112+
libero mi tristique ipsum.
113+
</div>
114+
<Flex flexDirection="row" backgroundColor="orange" marginTop={5}>
115+
<Box
116+
backgroundColor="#F6F6F8"
117+
p={4}
118+
width={2 / 4}
119+
alignContent="flex-start"
120+
>
121+
<Heading color="#515273" textAlign="left">
122+
Nullam ultrices massa
123+
</Heading>
124+
<Text color="#515273" textAlign="left">
125+
l ac, feugiat convallis magna. Nam dignissim semper mauris,
126+
pharetra mollis neque viverra ac. Duis semper, odio quis
127+
tincidunt convallis, libero mi tristique ipsum.
128+
</Text>
129+
<Button m={3}>Write a Tutorial</Button>
130+
</Box>
131+
<Box p={2}>
132+
<Text fontSize={[1]} textAlign="left">
133+
CORE CONTRIBUTORS
134+
</Text>
135+
{user && (
136+
<Image
137+
width={[0.5, 0.3, 0.12]}
138+
src={user.avatarUrl}
139+
borderRadius={100}
140+
/>
141+
)}
142+
<Text fontSize={[1]} textAlign="left">
143+
COURSE CONTRIBUTORS
144+
</Text>
145+
{user && (
146+
<Image
147+
width={[0.5, 0.3, 0.12]}
148+
src={user.avatarUrl}
149+
borderRadius={100}
150+
/>
151+
)}
152+
<Text fontSize={[1]} textAlign="left">
153+
TUTORIAL CONTRIBUTORS
154+
</Text>
155+
{user && (
156+
<Image
157+
width={[0.5, 0.3, 0.12]}
158+
src={user.avatarUrl}
159+
borderRadius={100}
160+
/>
161+
)}
162+
</Box>
163+
</Flex>
164+
</Footer>
165+
</Layout>
166+
);
167+
}}
168+
</WithCurrentUser>
23169
);
24170
};
25171

@@ -46,4 +192,44 @@ export const query = graphql`
46192
}
47193
`;
48194

195+
const HeaderText = styled(Box)`
196+
padding: 0.5rem;
197+
margin-bottom: 1rem;
198+
max-width: ${p => p.theme.middleContainerWidth}px;
199+
`;
200+
201+
const FilterBox = styled(Box)`
202+
width: 90vh;
203+
height: 144px;
204+
background-color: #0e0f3b;
205+
color: white;
206+
`;
207+
208+
const TutorialNumber = styled(Box)`
209+
p {
210+
width: 100%;
211+
text-align: center;
212+
border-bottom: 1px solid #000;
213+
line-height: 0.1em;
214+
margin: 10px 0 20px;
215+
}
216+
,
217+
p span {
218+
background: #e5e5e5;
219+
padding: 0 10px;
220+
}
221+
`;
222+
223+
const Footer = styled(Box)`
224+
background-color: white;
225+
text-align: center;
226+
`;
227+
228+
const TutorialContent = styled(Box)`
229+
background-color: #e5e5e5;
230+
display: flex;
231+
flex-direction: column;
232+
align-items: center;
233+
`;
234+
49235
export default Community;

0 commit comments

Comments
 (0)