Skip to content

Commit d5aef15

Browse files
afterafxafterafx
authored
Merge pull request #69 from talent-path-pipeline/support-styling
Support styling
2 parents 34d04fe + 589ccac commit d5aef15

25 files changed

+270
-189
lines changed

‎public/images/splash-main.png‎

-285 KB
Loading

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<link rel="shortcut icon" href="%PUBLIC_URL%/images/faviconLogo.png" />
66
<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative&display=swap" rel="stylesheet">
77
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
89
<meta name="viewport" content="width=device-width, initial-scale=1" />
910
<meta name="theme-color" content="#000000" />
1011
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

‎src/components/pages/CatalogPage.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const CatalogPage = () => {
1515
{/* TODO: Make search actually work/do something */}
1616
{/* <input className="course-search" type="text" placeholder="Type to search!" /> */}
1717
</header>
18+
<hr className="catalog-line" />
1819
{/* TODO: <CatalogFilter /> */}
1920
<CatalogList courses={courses} />
2021
</div>

‎src/components/pages/HomePage.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { NavLink } from 'react-router-dom';
23
import '../../css/pages/HomePage.scss';
34
// import Glide from '@glidejs/glide/';
45

@@ -13,15 +14,21 @@ class HomePage extends React.Component {
1314
// new Glide('.glide').mount();
1415
// };
1516

17+
routeToPath = () => {
18+
const { history } = this.props;
19+
const path = `/path`;
20+
history.push(path);
21+
}
22+
1623
render() {
1724
return (
1825
<div>
1926
<section id="splash-container">
2027
<div id="call-to-action">
2128
<h3>Start your path as a Dungeon Master Today</h3>
22-
{/* <button type="button">Click here</button> */}
29+
<button type="button" onClick={() => this.routeToPath()}>Roll for initiative!</button>
2330
</div>
24-
<img className="splash-image" src="./images/splash-main2.png" alt="" />
31+
<img className="splash-image" src="./images/splash-main.png" alt="" />
2532
{/* <svg width="100%" height="20px">
2633
<clipPath id="clipPolygon">
2734
<polygon points="-1 419,960 421,0 367" />
@@ -57,7 +64,8 @@ class HomePage extends React.Component {
5764
<p>
5865
We’re unique because we have curated paths for you to follow as well as
5966
different courses so that you can gain all the information you need to
60-
start playing.{' '}
67+
start playing.
68+
{' '}
6169
</p>
6270
</div>
6371
</section>

‎src/components/pages/SupportPage.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import QandA from '../support/QandA'
3-
import '../../css/support/support.scss';
2+
import QandA from '../support/QandA';
3+
import '../../css/pages/SupportPage.scss';
44

55
class SupportPage extends React.Component{
66
state = {
@@ -69,15 +69,17 @@ class SupportPage extends React.Component{
6969
},
7070
],
7171
};
72+
7273
render(){
7374
return (
74-
<div>
75+
<div className="support-container">
7576
<h1 className="supportTitle">Support Page</h1>
76-
<QandA QuestionsAnswers={this.state.QuestionsAnswersForSite} title={'Frequently Ask Questions on using this site'}/>
77+
<hr className="line" />
78+
<QandA QuestionsAnswers={this.state.QuestionsAnswersForSite} title="Frequently Ask Questions on using this site"/>
7779
<br/>
78-
<QandA QuestionsAnswers={this.state.QuestionsAnswersForDnD} title={'Common Questions on Playing DnD'}/>
79-
</div>
80-
)
80+
<QandA QuestionsAnswers={this.state.QuestionsAnswersForDnD} title="Common Questions on Playing DnD"/>
81+
</div>
82+
);
8183
}
8284
}
8385

‎src/components/support/QandA.js‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
import React from 'react';
22

3-
const QandA = (props) =>{
4-
return (
5-
<div className="container">
3+
const QandA = props =>(
4+
<div className="container">
65
<h2 className="FAQTitle">{props.title}</h2>
7-
<div className="tabs">
8-
{props.QuestionsAnswers.map(QA => (
9-
<div className="tab">
10-
<input type="checkbox" id={QA.key}></input>
11-
<label className="tab-label" htmlFor={QA.key}>{QA.question}</label>
12-
<div className="tab-content">
13-
{QA.answer}
14-
</div>
6+
<div className="tabs">
7+
{props.QuestionsAnswers.map(QA => (
8+
<div className="tab">
9+
<input type="checkbox" id={QA.key} />
10+
<label className="tab-label" htmlFor={QA.key}>{QA.question}</label>
11+
<div className="tab-content">
12+
{QA.answer}
1513
</div>
16-
))}
17-
</div>
14+
</div>
15+
))}
1816
</div>
19-
);
20-
}
17+
</div>
18+
);
2119

2220
export default QandA;

‎src/css/NavBar.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
#nav-main {
22
display: flex;
33
color: var(--white);
4-
background-color: var(--black);
4+
background-color: var(--navy);
55
box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.4);
66
height: 80px;
77
width: 100%;
@@ -50,7 +50,7 @@
5050
}
5151

5252
a:hover {
53-
color: var(--red);
53+
color: var(--stone);
5454
}
5555
}
5656

‎src/css/VARIABLES.scss‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,28 @@
22
:root {
33
--black: #0a090c;
44
--grey: #222;
5-
--medium-grey: #3e3e3e;
5+
--medium-grey: hsl(0, 0%, 24%);
66
--red: #990000;
7+
--darkred: #140808;
78
--brown: #63372c;
89
--blue: #2e294e;
910
--white: #eeeeee;
11+
// --white: #c1c6c9;
1012
--stone: #9f9484;
11-
--orange: #d68742;
13+
// --orange: #d68742;
1214
--light-blue: #42727c;
1315
--crimson1: #dd3442;
1416
--crimson2: #dc143c;
17+
18+
//Complement of Stone
19+
--brown: #52493c;
20+
--cream: #ebe4da;
21+
--navy: #334552;
22+
--greyblue: #83939e;
23+
--orange: #E2B546;
1524
// We gotta figure out our colors for real
1625

1726
--fontfamily: 'Cinzel Decorative', cursive;
1827
--fontfamily-alt: 'Open Sans', sans-serif;
28+
--fontfamily-roboto: 'Roboto', sans-serif;
1929
}

‎src/css/about/AboutCards.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
border-radius: 10rem;
1313
width: 5rem;
1414
height: 5rem;
15-
background: var(--red);
15+
background: var(--navy);
1616
position: relative;
1717
top: -6rem;
1818
margin-bottom: 11px;
@@ -30,10 +30,12 @@
3030

3131
.card {
3232
text-align: center;
33-
color: #fff;
34-
background-color: var(--red);
33+
color: var(--white);
34+
font-family: var(--fontfamily-roboto);
35+
font-weight: 300;
36+
background-color: var(--navy);
3537
border-radius: 1.5rem;
36-
box-shadow: 5px 5px rgba(0, 0, 0, 0.12);
38+
box-shadow: 5px 5px var(--greyblue);
3739
width: 28%;
3840
height: 14.5rem;
3941
font-size: 2rem;

‎src/css/about/AboutInfo.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
.subtitle {
3030
font-size: 50px;
3131
margin-top: 40px;
32+
color: var(--black);
3233
}
3334

3435
.subtitle2 {
@@ -41,7 +42,7 @@
4142
width: 95%;
4243
max-width: 1110px;
4344
margin: 2em auto;
44-
border: 4px solid var(--medium-grey);
45+
border: 4px solid var(--brown);
4546
}
4647
}
4748

@@ -51,17 +52,20 @@
5152
font-size: 50px;
5253
max-width: 800px;
5354
text-align: center;
55+
color: var(--cream);
5456
}
5557

5658
@media all and (max-width: 1390px) {
5759
.about-info .title {
5860
top: 165px;
61+
color: var(--cream);
5962
}
6063
}
6164

6265
@media all and (max-width: 1170px) {
6366
.about-info .title {
6467
font-size: 37px;
68+
color: var(--cream);
6569
}
6670
.about-info .subtitle {
6771
font-size: 40px;
@@ -71,6 +75,7 @@
7175
@media all and (max-width: 1000px) {
7276
.about-info .title {
7377
top: 135px;
78+
color: var(--cream);
7479
}
7580
.about-info .subtitle {
7681
font-size: 37px;
@@ -82,9 +87,11 @@
8287
max-width: 40rem;
8388
top: 130px;
8489
font-size: 30px;
90+
color: var(--cream);
8591
}
8692
.about-info .subtitle {
8793
font-size: 32px;
94+
color: var(--black);
8895
}
8996
}
9097

@@ -93,9 +100,11 @@
93100
max-width: 35rem;
94101
top: 118px;
95102
font-size: 27px;
103+
color: var(--cream);
96104
}
97105
.about-info .subtitle {
98106
font-size: 28px;
107+
color: var(--black);
99108
}
100109
}
101110

@@ -107,10 +116,12 @@
107116
max-width: 85%;
108117
top: 112px;
109118
font-size: 19px;
119+
color: var(--cream);
110120
}
111121
.about-info .subtitle {
112122
max-width: 85%;
113123
text-align: center;
114124
font-size: 22px;
125+
color: var(--black);
115126
}
116127
}

0 commit comments

Comments
 (0)