10 | 
12 | 
20 |
26 | PF DIN DISPLAY PRO REGULAR
11 |13 | 14 | Download PF Din font files 15 | 16 |
17 |18 |
NOTO SERIF REGULAR
19 |21 | 22 | Download Noto Serif font files 23 | 24 |
25 |You definitely weren't supposed to see this...
9 |{description}
9 |13 | 14 | Download PF Din font files 15 | 16 |
17 |18 |
21 | 22 | Download Noto Serif font files 23 | 24 |
25 | styles to global stylesheet */
2 | code {
3 | background-color: #F0F2F2;
4 | border-radius: 4px;
5 | border-style: solid;
6 | border-color: #F0F2F2;
7 | }
8 |
9 | .instructionList img {
10 | max-width: 100%;
11 | height: auto;
12 | padding: 0 10px; /* On this component, all non-classed images are inline */
13 | }
14 |
15 | .displayLinebreak {
16 | white-space: pre-line;
17 | text-align: center;
18 | }
19 |
20 | .displayBlock > div {
21 | display: block;
22 | }
23 |
24 | .instructionList {
25 | line-height: 1.5;
26 | padding: 0 0 0 5px;
27 | margin: 0;
28 | }
29 |
30 | .instructionList li {
31 | padding: 0 0 25px 0;
32 | }
33 |
34 | .blockImage {
35 | padding: 0 !important;
36 | }
37 |
38 | .centerText {
39 | text-align: center;
40 | }
41 |
--------------------------------------------------------------------------------
/src/scenes/home/codeSchools/approvedSchools/approvedSchools.css:
--------------------------------------------------------------------------------
1 | .noteForSchoolReps {
2 | text-align: center;
3 | font-size: 1em;
4 | margin: 15px 0 0 0;
5 | }
6 |
7 | .vaSchools {
8 | display: flex;
9 | flex-flow: row wrap;
10 | align-items: center;
11 | justify-content: space-around;
12 | }
13 |
--------------------------------------------------------------------------------
/src/scenes/home/codeSchools/codeSchools.css:
--------------------------------------------------------------------------------
1 | .filterButtonDiv {
2 | display: flex;
3 | flex-flow: row wrap;
4 | width: 80%;
5 | justify-content: space-around;
6 | padding-top: 10px;
7 | }
8 |
9 | /* Space between buttons for vertical, single column */
10 | .filterButtonDiv > a {
11 | margin: 2% 1%;
12 | }
13 |
14 | .codeschoolError {
15 | color: red;
16 | text-align: center;
17 | }
18 |
--------------------------------------------------------------------------------
/src/scenes/home/codeSchools/moocSchools/moocSchools.css:
--------------------------------------------------------------------------------
1 | .moocCards {
2 | display: flex;
3 | flex-flow: row wrap;
4 | align-items: center;
5 | justify-content: space-around;
6 | }
--------------------------------------------------------------------------------
/src/scenes/home/codeSchools/onlineSchools/onlineSchools.css:
--------------------------------------------------------------------------------
1 | .eSchools {
2 | display: flex;
3 | flex-flow: row wrap;
4 | align-items: center;
5 | justify-content: space-around;
6 | }
--------------------------------------------------------------------------------
/src/scenes/home/codeSchools/stateSortedSchools/stateSortedSchools.css:
--------------------------------------------------------------------------------
1 | .stateSchools {
2 | display: flex;
3 | flex-flow: row wrap;
4 | align-items: center;
5 | justify-content: space-around;
6 | }
7 |
8 | .select {
9 | min-width: 300px;
10 | width: 100%;
11 | max-width: 900px;
12 | }
13 |
14 | /* iPhone Safari-only media query to prevent zoom effect when the select is focused */
15 | /* see https://stackoverflow.com/questions/6483425/prevent-iphone-from-zooming-in-on-select-in-web-app */
16 |
17 | @media screen and (-webkit-min-device-pixel-ratio: 0) {
18 |
19 | .select input {
20 | font-size: 16px !important;
21 | }
22 |
23 | .select input:focus {
24 | font-size: 16px !important;
25 | }
26 | }
--------------------------------------------------------------------------------
/src/scenes/home/contact/contact.css:
--------------------------------------------------------------------------------
1 | p {
2 | font-size: 1.1rem;
3 | }
4 |
5 | svg {
6 | color: #249CBC;
7 | }
8 |
9 | a:hover > svg {
10 | color: #44BCDC;
11 | }
12 |
13 | .flexContainer {
14 | width: 80%;
15 | display: flex;
16 | flex-flow: row wrap;
17 | justify-content: space-around;
18 | padding: 15px 0 0 0;
19 | }
20 |
21 | .flexContainer > div {
22 | padding: 0 30px 50px 30px;
23 | }
24 |
25 | .centerText {
26 | text-align: center;
27 | }
--------------------------------------------------------------------------------
/src/scenes/home/families/facts/facts.css:
--------------------------------------------------------------------------------
1 |
2 | .facts {
3 | display: 'flex';
4 | background-color: '#E2E2E2';
5 | align-items: 'center';
6 | padding: '96px';
7 | }
8 | .factsHeading {
9 | font-size: '50px';
10 | text-align: 'center';
11 | }
12 | .factsList {
13 | color: '#445366';
14 | font-size: '24px';
15 | padding: '0 32px';
16 | }
17 | .factsRight {
18 | padding: '0 32px'
19 | }
20 | .factsImage {
21 | width: '30vw';
22 | border-radius: '40px';
23 | }
24 | .factItem {
25 | padding-bottom: '24px';
26 | }
--------------------------------------------------------------------------------
/src/scenes/home/families/jumboQuote/jumboQuote.css:
--------------------------------------------------------------------------------
1 |
2 | .quotes {
3 | color: #445366;
4 | }
5 | .quoteBody {
6 | text-align: center;
7 | color: #445366;
8 | }
9 | .quoteAuthor {
10 | text-align: right;
11 | color: #445366;
12 | }
13 | .quoteIcon {
14 | vertical-align: top;
15 | }
16 |
--------------------------------------------------------------------------------
/src/scenes/home/families/jumboQuote/jumboQuote.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import FontAwesomeIcon from '@fortawesome/react-fontawesome';
3 | import { faQuoteLeft, faQuoteRight } from '@fortawesome/fontawesome-free-solid';
4 | import quotes from './quotes.json';
5 | import styles from './jumboQuote.css';
6 |
7 | class JumboQuote extends Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.state = {
12 | quote: {}
13 | };
14 | }
15 |
16 | componentDidMount() {
17 | if (quotes.quotes.length > 0) {
18 | const randomQuoteID = Math.floor(Math.random() * quotes.quotes.length);
19 |
20 | this.setState({
21 | quote: quotes.quotes[randomQuoteID]
22 | });
23 | }
24 | }
25 |
26 | render() {
27 | return (
28 |
29 |
30 |
34 | {this.state.quote.author}
35 |
36 | );
37 | }
38 | }
39 |
40 | export default JumboQuote;
41 |
--------------------------------------------------------------------------------
/src/scenes/home/families/jumboQuote/quotes.json:
--------------------------------------------------------------------------------
1 | {
2 | "quotes": [{
3 | "author": "Former First Lady Michelle Obama",
4 | "body": "It's hard to impress employers who often view a resume with multiple jobs as a red flag rather than as a reality of military life."
5 | }]
6 | }
7 |
8 |
--------------------------------------------------------------------------------
/src/scenes/home/faq/faq.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | justify-content: center;
6 | }
7 |
--------------------------------------------------------------------------------
/src/scenes/home/faq/faq.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Section from 'shared/components/section/section';
3 | import Question from './question/question';
4 | import QuestionAnswerData from './questions';
5 | import styles from './faq.css';
6 |
7 | const FAQ = () => {
8 | const generalQuestions = QuestionAnswerData.general.map(qna => (
9 |
20 |
21 | {generalQuestions}
22 |
23 |
24 |
25 | {donationQuestions}
26 |
27 |
28 |
29 | {volunteerQuestions}
30 |
31 |
32 | );
33 | };
34 |
35 | export default FAQ;
36 |
--------------------------------------------------------------------------------
/src/scenes/home/faq/question/question.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './question.css';
4 |
5 | const Question = ({ q, a }) => (
6 |
7 |
8 |
9 | { // eslint-disable-next-line
10 |
11 | }
12 |
13 | );
14 |
15 | Question.propTypes = {
16 | q: PropTypes.string.isRequired,
17 | a: PropTypes.string.isRequired
18 | };
19 |
20 | export default Question;
21 |
--------------------------------------------------------------------------------
/src/scenes/home/gala/gala.css:
--------------------------------------------------------------------------------
1 | .hero {
2 | background-image: url('./portland19.jpg');
3 | text-align: center;
4 | }
5 | .heading {
6 | color: #fff;
7 | padding: 10% 0;
8 | }
9 |
10 | .galaLink {
11 | color: #fff;
12 | font-size: 1.2em;
13 | }
14 |
--------------------------------------------------------------------------------
/src/scenes/home/gala/portland19.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OperationCode/operationcode_frontend/320053d0e6ed587c36f886ddd631dcc7ca6ef3f2/src/scenes/home/gala/portland19.jpg
--------------------------------------------------------------------------------
/src/scenes/home/getInvolved/getInvolved.css:
--------------------------------------------------------------------------------
1 | /* Shared styles for Get Involved sections: Why Give, Volunteer, etc. */
2 |
3 | .wrapper {
4 | display: flex;
5 | }
6 |
7 | .half {
8 | box-sizing: border-box;
9 | display: flex;
10 | flex-direction: column;
11 | align-items: center;
12 | justify-content: center;
13 | width: 50%;
14 | }
15 |
16 | .halfPhotoWrapper {
17 | composes: half;
18 | }
19 |
20 | .photo {
21 | width: 100%;
22 | max-width: 500px;
23 | height: auto;
24 | }
25 |
26 | .list {
27 | list-style-type: none;
28 | margin: 0;
29 | padding: 0;
30 | }
31 |
32 | .listItem {
33 | display: flex;
34 | align-items: center;
35 | }
36 |
37 | .itemText {
38 | margin-left: 20px;
39 | }
40 |
41 | .button {
42 | margin-top: 1rem;
43 | }
44 |
45 | @media only screen and (min-width: 1112px) {
46 | .half {
47 | padding: 2rem;
48 | }
49 | }
50 |
51 | @media only screen and (min-width: 320px) and (max-width: 1111px) {
52 | .wrapper {
53 | display: flex;
54 | flex-direction: column;
55 | align-items: center;
56 | }
57 |
58 | .half {
59 | padding: 1rem 0;
60 | width: 100%;
61 | }
62 |
63 | .halfPhotoWrapper {
64 | order: -1;
65 | }
66 | }
--------------------------------------------------------------------------------
/src/scenes/home/getInvolved/getInvolved.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import HeroBanner from 'shared/components/heroBanner/heroBanner';
3 | import WhyGive from './whyGive/whyGive';
4 | import Volunteer from './volunteer/volunteer';
5 |
6 | const getInvolved = () => (
7 |
8 | 
10 |
11 | );
12 | }
13 |
14 | Burger.propTypes = {
15 | onClick: PropTypes.func.isRequired
16 | };
17 |
18 | export default Burger;
19 |
--------------------------------------------------------------------------------
/src/scenes/home/header/header.css:
--------------------------------------------------------------------------------
1 | .header {
2 | display: flex;
3 | align-items: center;
4 | height: 80px;
5 | background-color: rgb(117,129,143);
6 | padding: 0 2rem;
7 | }
8 |
9 | .logo {
10 | display: flex;
11 | align-items: center;
12 | height: 60px;
13 | margin-left: 40px;
14 | }
15 |
16 | .logo img {
17 | height: 50px;
18 | }
19 |
20 | .transparent {
21 | background-color: transparent;
22 | }
23 |
--------------------------------------------------------------------------------
/src/scenes/home/header/logo/logo.css:
--------------------------------------------------------------------------------
1 | .logo {
2 | height: 60px;
3 | flex: 0 40%;
4 | align-items: center;
5 | display:flex;
6 | }
7 |
8 | .logo img {
9 | height: 50px;
10 | }
11 |
12 | @media screen and (max-width: 900px) {
13 | .logo {
14 | margin-left: 10px;
15 | }
16 |
17 | .logo img {
18 | height: 40px;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/scenes/home/header/logo/logo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import logo from 'images/logos/small-white-logo.png';
4 | import styles from './logo.css';
5 |
6 | const Logo = () => (
7 |
8 | 
9 |
10 | );
11 |
12 | export default Logo;
13 |
--------------------------------------------------------------------------------
/src/scenes/home/header/navItem/navItem.css:
--------------------------------------------------------------------------------
1 | .navItem {
2 | text-decoration: none;
3 | color: #F7F7F7;
4 | }
5 |
6 | .navItem:hover {
7 | text-shadow: 2px 2px 2px #333;
8 | transition-duration: 0.2s;
9 | }
10 |
11 | .menuItem {
12 | composes: navItem;
13 | font-size: 30px;
14 | }
15 |
16 | .menuItem ~ .menuItem {
17 | margin-top: 16px;
18 | }
19 |
20 | .disabledNavItem {
21 | display: none;
22 | }
23 |
--------------------------------------------------------------------------------
/src/scenes/home/header/navItem/navItem.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import { Link } from 'react-router-dom';
3 | import PropTypes from 'prop-types';
4 | import styles from './navItem.css';
5 |
6 | class NavItem extends PureComponent {
7 | constructor() {
8 | super();
9 | this.handleClick = this.handleClick.bind(this);
10 | }
11 |
12 | handleClick() {
13 | if (this.props.onClick) {
14 | this.props.onClick();
15 | }
16 | }
17 |
18 | render() {
19 | const classes = `${styles.navItem} ${styles[this.props.className]}`;
20 | if (this.props.isExternal) {
21 | return (
22 |
23 | {this.props.text}
24 |
25 | );
26 | }
27 |
28 | return (
29 |
30 | {this.props.text}
31 |
32 | );
33 | }
34 | }
35 |
36 | NavItem.propTypes = {
37 | className: PropTypes.string,
38 | isExternal: PropTypes.bool,
39 | onClick: PropTypes.func,
40 | to: PropTypes.string,
41 | text: PropTypes.string.isRequired
42 | };
43 |
44 | NavItem.defaultProps = {
45 | className: null,
46 | isExternal: false,
47 | onClick: null,
48 | to: ''
49 | };
50 |
51 | export default NavItem;
52 |
--------------------------------------------------------------------------------
/src/scenes/home/header/sideNav/sideNav.css:
--------------------------------------------------------------------------------
1 | .content {
2 | background-color: black;
3 | background-color:rgba(47,52,72,.95);
4 | height: 100%;
5 | width: 100%;
6 | }
7 |
8 | .header {
9 | position: relative;
10 | height: 80px;
11 | }
12 |
13 | .logo {
14 | position: relative;
15 | left: 5%;
16 | top: 50%;
17 | transform: translateY(-50%);
18 | height: 40px;
19 | max-width: 75%;
20 | }
21 |
22 | .close {
23 | color: #fff;
24 | text-decoration: none;
25 | font-size: 40px;
26 | position: absolute;
27 | right: 5%;
28 | top: 50%;
29 | transform: translateY(-50%);
30 | }
31 |
32 | .list {
33 | padding: 30px 5%;
34 | border-top: 1px solid #fafafa;
35 | font-size: 2.5em;
36 | }
37 |
38 | .item {
39 | color: #F7F7F7;
40 | }
41 |
42 | .item ~ .item {
43 | margin-top: 16px;
44 | }
45 |
46 | .list span {
47 | display: flex;
48 | height: 100%;
49 | flex-direction: column;
50 | position: relative;
51 | }
52 |
53 | @media screen and (orientation: landscape) {
54 | .list {
55 | font-size: 1.3em;
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/scenes/home/header/sideNav/sideNav.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import logo from 'images/logos/small-white-logo.png';
4 | import Drawer from 'shared/components/drawer/drawer';
5 | import styles from './sideNav.css';
6 |
7 | const SideNav = ({ children, isVisible, onClose }) => (
8 |
9 |
20 |
21 | );
22 |
23 | SideNav.propTypes = {
24 | children: PropTypes.node.isRequired,
25 | isVisible: PropTypes.bool,
26 | onClose: PropTypes.func
27 | };
28 |
29 | SideNav.defaultProps = {
30 | isVisible: false,
31 | onClose: () => {}
32 | };
33 |
34 | export default SideNav;
35 |
--------------------------------------------------------------------------------
/src/scenes/home/header/topNav/topNav.css:
--------------------------------------------------------------------------------
1 | .topNav {
2 | display: flex;
3 | justify-content: flex-end;
4 | flex: 1 0 60%;
5 | font-size: 20px;
6 | }
7 |
8 | .topNav a {
9 | margin: 1rem;
10 | }
11 |
12 | @media screen and (max-width: 1000px) {
13 | .topNav {
14 | margin-right: 40px;
15 | font-size:16px;
16 | }
17 | .topNav a {
18 | margin: 0.7rem;
19 | }
20 | }
21 |
22 | @media screen and (max-width: 779px) /* Tablet */ {
23 | .topNav {
24 | display: none;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/scenes/home/header/topNav/topNav.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './topNav.css';
4 |
5 | const TopNav = ({ children }) => (
6 |
7 | {children}
8 |
9 | );
10 |
11 | TopNav.propTypes = {
12 | children: PropTypes.node.isRequired
13 | };
14 |
15 | export default TopNav;
16 |
--------------------------------------------------------------------------------
/src/scenes/home/history/history.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OperationCode/operationcode_frontend/320053d0e6ed587c36f886ddd631dcc7ca6ef3f2/src/scenes/home/history/history.css
--------------------------------------------------------------------------------
/src/scenes/home/history/history.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Section from 'shared/components/section/section';
3 | import QuoteBanner from 'shared/components/quoteBanner/quoteBanner';
4 | import Timeline from './timeline/timeline';
5 |
6 | const History = () => (
7 |
8 |
18 |
20 |
21 | );
22 |
23 | export default History;
24 |
--------------------------------------------------------------------------------
/src/scenes/home/history/timeline/timeline.css:
--------------------------------------------------------------------------------
1 | .timeline {
2 | width: 90%;
3 | margin: 50px auto;
4 | }
5 |
6 | .segment {
7 | display: flex;
8 | }
9 |
10 | /* Date (left column) */
11 | .date {
12 | flex: 1;
13 | position: relative;
14 | text-align: right;
15 | }
16 |
17 | .date > h3 {
18 | position: absolute;
19 | width: 100%;
20 | top: 14px;
21 | padding-right: 10px;
22 | }
23 |
24 | /* Vertical Line w/ Bubbles (middle column) */
25 | .vertLine {
26 | position: relative;
27 | padding: 0 20px;
28 | }
29 |
30 | .line {
31 | position: absolute;
32 | transform: translateX(-50%);
33 | width: 2px;
34 | top: 0;
35 | height: 100%;
36 | background-color : #d7d7d7;
37 | }
38 |
39 | .bubble {
40 | width: 15px;
41 | height: 15px;
42 | border-radius: 50%;
43 | border: 2px solid #7d7d7d;
44 | background-color: white;
45 | position: absolute;
46 | transform: translateX(-50%);
47 | top: 25px;
48 | }
49 |
50 | /* Events (right column) */
51 | .timelineEvent {
52 | flex: 8;
53 | }
54 |
55 | @media screen and (max-width: 680px) {
56 | .date > h3 {
57 | top: 24px;
58 | font-size: 1.1rem;
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/src/scenes/home/history/timelineEvent/timelineEvent.css:
--------------------------------------------------------------------------------
1 | .eventContainer {
2 | margin: 0 0 30px 0;
3 | border: 1px solid #c5c5c5;
4 | padding: 20px;
5 | border-radius: 5px;
6 | }
7 |
8 | .eventTitle {
9 | text-transform: capitalize;
10 | }
11 |
12 | @media screen and (max-width: 680px) {
13 | .eventTitle {
14 | font-size: 1.5rem;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/scenes/home/history/timelineEvent/timelineEvent.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './timelineEvent.css';
4 |
5 | const TimelineEvent = ({ title, content }) => (
6 |
7 | {title}
8 |
9 | {content}
10 |
11 | );
12 |
13 | TimelineEvent.propTypes = {
14 | title: PropTypes.string.isRequired,
15 | content: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.node]).isRequired,
16 | };
17 |
18 | export default TimelineEvent;
19 |
--------------------------------------------------------------------------------
/src/scenes/home/informationForm/formComponents/formComponents.css:
--------------------------------------------------------------------------------
1 | .information__form > * {
2 | margin-top: 10px;
3 | }
4 |
5 | .information__input {
6 | background-color: #E6E6E6;
7 | color: #000;
8 | border: none;
9 | font-size: 1.3em;
10 | padding: 0 16px;
11 | height: 50px;
12 | width: 100%;
13 | }
14 |
15 | .information__select {
16 | height: 4.2rem;
17 | width: 100%;
18 | padding: 0 1rem;
19 | background-color: #e6e6e6;
20 | font-size: 1.3rem;
21 | margin: 1rem 0;
22 | }
23 |
24 | .signup select {
25 | height: 4.2rem;
26 | width: 100%;
27 | padding: 0 1rem;
28 | background-color: #e6e6e6;
29 | font-size: 1.3rem;
30 | margin: 1rem 0;
31 | }
32 |
33 | .signup {
34 | width:100%;
35 | }
36 |
37 | .signup .info__tags {
38 | display: flex;
39 | flex-wrap: wrap;
40 | margin: 20px 0;
41 | width: 100%;
42 | }
43 |
44 | .signup .info__tagsTitle {
45 | font-size: 1.5em;
46 | }
47 |
--------------------------------------------------------------------------------
/src/scenes/home/jobs/featuredJob/featuredJob.css:
--------------------------------------------------------------------------------
1 | /* Note: these styles are copied to match the ziprecruiter styles that are being dynamically inserted on our page (see jobs.js) */
2 |
3 | .job {
4 | padding: 15px 0px;
5 | }
6 |
7 | .link {
8 | text-decoration: none;
9 | color: #1a0dab;
10 | font-size: 17px;
11 | float: left;
12 | margin-right: 3px;
13 | margin-bottom: 1px;
14 | }
15 |
16 | .details {
17 | font-size: 13px;
18 | color: #999999;
19 | margin: 3px 0;
20 | clear: both;
21 | }
22 |
23 | .detailsContainer {
24 | float: left;
25 | margin-right: 15px;
26 | }
27 |
28 | .detail {
29 | margin-left: 4px;
30 | }
31 |
32 | .remote {
33 | composes: detail;
34 | font-style: italic;
35 | }
36 |
37 | .description {
38 | clear: both;
39 | font-size: 14px;
40 | color: #545454;
41 | line-height: 1.4;
42 | word-wrap: break-word;
43 | }
--------------------------------------------------------------------------------
/src/scenes/home/jobs/jobs.css:
--------------------------------------------------------------------------------
1 | /* Note: these styles are copied to match the ziprecruiter styles that are inserted on our page */
2 |
3 | .featuredJobsContainer {
4 | width: 100%;
5 | float: left;
6 | clear: both;
7 | }
8 |
9 | .featuredJobs {
10 | font-family: Arial, Helvetica, sans-serif;
11 | margin: 30px 0px 10px;
12 | width: 100%;
13 | max-width: 768px;
14 | }
15 |
16 | .contact {
17 | margin: 30px 0 0 0;
18 | align-self: flex-start;
19 | font-size: 1rem;
20 | }
--------------------------------------------------------------------------------
/src/scenes/home/landing/emailSignup/emailSignup.css:
--------------------------------------------------------------------------------
1 | .emailSignup {
2 | width: 80%;
3 | }
4 |
5 | .emailListForm {
6 | justify-content: center;
7 | align-items: center;
8 | }
9 |
10 | .emailInput {
11 | margin-bottom: 16px;
12 | width: 20em;
13 | }
14 |
15 | .emailSignupText {
16 | max-width: 700px;
17 | font-size: 20px;
18 | }
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/scenes/home/landing/membership/membership.css:
--------------------------------------------------------------------------------
1 | .intro {
2 | font-size: 18px;
3 | font-family: 'Noto Serif';
4 | width: 80%;
5 | }
6 |
7 | .list {
8 | display: flex;
9 | flex-flow: row wrap;
10 | justify-content: space-around;
11 | margin: 0;
12 | padding: 0;
13 | }
14 |
15 | .list li {
16 | list-style: none;
17 | margin: 0;
18 | font-size: 16px;
19 | text-align: center;
20 | display: flex;
21 | flex-direction: column;
22 | }
23 |
24 | .list li span {
25 | padding-bottom: 20px;
26 | }
27 |
28 | .icon {
29 | height:100px;
30 | padding-bottom: 20px;
31 | }
32 |
--------------------------------------------------------------------------------
/src/scenes/home/landing/moreInformation/moreInformation.css:
--------------------------------------------------------------------------------
1 | .moreInformation {
2 | display: flex;
3 | flex-flow: row wrap;
4 | flex-grow: 1;
5 | width:80%;
6 | justify-content: space-around;
7 | }
--------------------------------------------------------------------------------
/src/scenes/home/landing/moreInformation/moreInformation.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Section from 'shared/components/section/section';
3 | import ClipPathImage from 'shared/components/clipPathImage/clipPathImage';
4 | import familyImage from 'images/Family-1.jpg';
5 | import milImage from 'images/Mil-1.jpg';
6 | import volunteerImage from 'images/Volunteer-1.jpg';
7 |
8 | import styles from './moreInformation.css';
9 |
10 | const MoreInformation = () => (
11 |
12 |
13 |
30 | );
31 |
32 | export default MoreInformation;
33 |
--------------------------------------------------------------------------------
/src/scenes/home/landing/partners/partners.css:
--------------------------------------------------------------------------------
1 | .partners {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | width: 80%;
6 | }
7 |
8 | .partnerLogos {
9 | width: 80%;
10 | display: flex;
11 | flex-wrap: wrap;
12 | justify-content: space-around;
13 | }
14 |
15 | .partnerLogos > div {
16 | margin: 2rem;
17 | }
18 |
19 | .partnerLogos img {
20 | height: 100px;
21 | filter: grayscale(100%);
22 | transition: 0.2s ease-in-out;
23 | }
24 |
25 | .partnerLogos img:hover {
26 | filter: grayscale(0%);
27 | }
28 |
29 | @media screen and (max-width: 650px) {
30 | .partners {
31 | width: 90%;
32 | text-align: center;
33 | }
34 |
35 | .partnerLogos {
36 | width: 90%;
37 | justify-content: space-between;
38 | }
39 |
40 | .partnerLogos > div {
41 | margin: 1rem 0;
42 | width: 50%;
43 | display: flex;
44 | text-align: center;
45 | }
46 |
47 | .partnerLogos img {
48 | width: 70%;
49 | height: auto;
50 | filter: grayscale(0);
51 | margin: 0 auto;
52 | }
53 | }
54 |
55 | .contactUs {
56 | text-align: center;
57 | }
58 |
--------------------------------------------------------------------------------
/src/scenes/home/landing/successStories/successStories.css:
--------------------------------------------------------------------------------
1 | .successStoriesContent {
2 | display: flex;
3 | flex-flow: row wrap;
4 | align-items: center;
5 | justify-content: space-around;
6 | }
--------------------------------------------------------------------------------
/src/scenes/home/landing/successStories/successStories.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Section from 'shared/components/section/section';
3 | import ImageListItem from 'shared/components/imageListItem/imageListItem';
4 | import image1 from 'images/Jon-Deng.jpg';
5 | import image2 from 'images/Jameel-Matin.jpg';
6 | import image3 from 'images/Sean-McBride.jpg';
7 | import content from './successStoriesContent.json';
8 | import styles from './successStories.css';
9 |
10 | const SuccessStories = () => (
11 |
12 |
13 |
30 | );
31 |
32 | export default SuccessStories;
33 |
--------------------------------------------------------------------------------
/src/scenes/home/landing/topcodeBanner/_topcodeBanner_notused.css:
--------------------------------------------------------------------------------
1 | .partners {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | width: 80%;
6 | }
7 |
8 | .partnerLogos {
9 | width: 80%;
10 | display: flex;
11 | flex-wrap: wrap;
12 | justify-content: space-around;
13 | }
14 |
15 | .partnerLogos > div {
16 | margin: 0 50px;
17 | }
18 |
19 | .partnerLogos img {
20 | height: 100px;
21 | filter: grayscale(100%);
22 | transition: .2s ease-in-out;
23 | }
24 |
25 | .partnerLogos img:hover {
26 | filter: grayscale(0%);
27 | }
28 |
29 |
30 | @media screen and (max-width: 650px) {
31 |
32 | .partners {
33 | width: 90%;
34 | text-align: center;
35 | }
36 |
37 | .partnerLogos{
38 | width: 90%;
39 | justify-content: space-between;
40 | }
41 |
42 | .partnerLogos > div {
43 | margin: 0;
44 | width: 50%;
45 | display: flex;
46 | text-align: center;
47 |
48 | }
49 |
50 | .partnerLogos img {
51 | width: 70%;
52 | height: auto;
53 | filter: grayscale(0);
54 | margin: 0 auto;
55 | }
56 |
57 | }
58 |
59 | .contactUs {
60 | text-align: center;
61 | }
62 |
--------------------------------------------------------------------------------
/src/scenes/home/landing/topcodeBanner/topcodeBanner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import topcodeLogo from 'images/partnerLogos/logo_topcoder_with_name.svg';
3 | import AdBanner from 'shared/components/adBanner/adBanner';
4 |
5 | const topcodeBanner = () => (
6 |
12 | Please request for mentorship by joining Operation Code's Slack team. From there,
13 | typing and entering the following in any channel:
14 |
/mentor
15 | This will queue a bot to send you a direct message. Fill out that form and expect to
16 | contacted shortly afterward (usually less than 48 hours).
17 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/scenes/home/ourPrograms/gettingStarted/gettingStarted.css:
--------------------------------------------------------------------------------
1 | .timeline {
2 | width: 90%;
3 | margin: 50px auto;
4 | }
5 |
6 | .segment {
7 | display: flex;
8 | }
9 |
10 | /* Step Number (left column) */
11 | .stepNumber {
12 | flex: 1;
13 | position: relative;
14 | text-align: right;
15 | white-space: nowrap;
16 | }
17 |
18 | .stepNumber > h3 {
19 | position: absolute;
20 | width: 100%;
21 | top: 14px;
22 | padding-right: 10px;
23 | }
24 |
25 | /* Vertical Line w/ Bubbles (middle column) */
26 | .vertLine {
27 | position: relative;
28 | padding: 0 20px;
29 | }
30 |
31 | .line {
32 | position: absolute;
33 | transform: translateX(-50%);
34 | width: 2px;
35 | top: 0;
36 | height: 100%;
37 | background-color: #d7d7d7;
38 | }
39 |
40 | .bubble {
41 | width: 15px;
42 | height: 15px;
43 | border-radius: 50%;
44 | border: 2px solid #7d7d7d;
45 | background-color: white;
46 | position: absolute;
47 | transform: translateX(-50%);
48 | top: 25px;
49 | }
50 |
51 | /* Events (right column) */
52 | .timelineEvent {
53 | flex: 8;
54 | }
55 |
56 | @media screen and (max-width: 680px) {
57 | .stepNumber > h3 {
58 | top: 24px;
59 | font-size: 1.1rem;
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/scenes/home/ourPrograms/mentorVolunteers/mentorVolunteers.css:
--------------------------------------------------------------------------------
1 | .iconList {
2 | align-items: flex-start;
3 | display: flex;
4 | flex-flow: column nowrap;
5 | justify-content: space-between;
6 | }
7 |
8 | .characteristics {
9 | align-items: center;
10 | display: flex;
11 | justify-content: flex-start;
12 | margin: 1rem 0;
13 | }
14 |
15 | .iconContainer {
16 | display: flex;
17 | justify-content: center;
18 | padding: 0 25px 0 0;
19 | min-width: 75px;
20 | }
21 |
--------------------------------------------------------------------------------
/src/scenes/home/ourPrograms/mentorshipProgram/mentorshipProgram.css:
--------------------------------------------------------------------------------
1 | .flexContainer {
2 | width: 100%;
3 | display: flex;
4 | flex-flow: row;
5 | justify-content: space-around;
6 | padding: 15px 0 0 0;
7 | }
8 |
9 | .featureHeading {
10 | width: 30%;
11 | text-align: center;
12 | display: flex;
13 | justify-content: center;
14 | align-items: center;
15 | font-weight: 700;
16 | }
17 |
18 | .featureHeading > p {
19 | margin-left: 20px;
20 | }
21 |
22 | .iconStyle {
23 | color: #000;
24 | }
25 |
26 | .featureDescription {
27 | width: 70%;
28 | }
29 |
30 | @media screen and (max-width: 768px) {
31 | .flexContainer {
32 | flex-flow: column;
33 | }
34 |
35 | .featureHeading {
36 | width: 100%;
37 | }
38 |
39 | .featureDescription {
40 | width: 100%;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/scenes/home/ourPrograms/ourPrograms.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import QuoteBanner from 'shared/components/quoteBanner/quoteBanner';
3 | import MentorshipProgram from './mentorshipProgram/mentorshipProgram';
4 | import MentorVolunteers from './mentorVolunteers/mentorVolunteers';
5 | import GettingStarted from './gettingStarted/gettingStarted';
6 |
7 | const OurPrograms = () => (
8 |
9 |
11 | {/* On April 19, 2018, we're heading to Washington, D.C. to modernize the G.I. Bill.{' '} */}
12 |
13 | Click here for details!
14 |
15 |
16 |
17 | );
18 |
19 | export default PolicyBanner;
20 |
21 |
--------------------------------------------------------------------------------
/src/scenes/home/press/civicXBadge/civicXBadge.css:
--------------------------------------------------------------------------------
1 | .civic {
2 | display: block;
3 | margin: 0 auto;
4 | }
5 |
6 | @media (max-width: 767px) {
7 | .civic {
8 | width: 100%;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/scenes/home/press/civicXBadge/civicXBadge.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import OutboundLink from 'shared/components/outboundLink/outboundLink';
4 | import civicX from '../../../../images/civic-x.png';
5 | import styles from './civicXBadge.css';
6 |
7 | const CivicXBadge = ({ sourceUrl = 'http://cvcx.org/veterans-solutions-lab/' }) => (
8 |
9 |
10 | 
15 |
16 |
17 | );
18 |
19 | CivicXBadge.propTypes = {
20 | sourceUrl: PropTypes.string.isRequired
21 | };
22 |
23 | export default CivicXBadge;
24 |
--------------------------------------------------------------------------------
/src/scenes/home/press/press.css:
--------------------------------------------------------------------------------
1 | .flexContainer {
2 | width: 100%;
3 | display: flex;
4 | flex-flow: row wrap;
5 | justify-content: space-around;
6 | padding: 15px 0 0 0;
7 | }
8 |
9 | .flexContainer > div {
10 | padding: 0 30px 50px 30px;
11 | }
12 |
13 | .column {
14 | width: 375px;
15 | }
16 |
17 | .column > h4 {
18 | text-align: center;
19 | }
20 |
21 | .brandingLink {
22 | font-size: 1.5rem;
23 | }
24 |
25 | .header {
26 | text-align: center;
27 | }
28 |
29 | @media screen and (min-width: 415px) and (max-width: 1280px) {
30 | .column {
31 | width: 300px;
32 | }
33 | }
34 |
35 | @media screen and (max-width: 414px) {
36 | .column {
37 | width: 250px;
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/scenes/home/press/pressBranding/pressBranding.css:
--------------------------------------------------------------------------------
1 | .wide {
2 | height: auto;
3 | width: 100%;
4 | }
5 |
6 | .tall {
7 | height: 100%;
8 | width: auto;
9 | margin: 0 auto;
10 | display: block;
11 | }
12 |
13 | img[alt^="Small"] {
14 | transform: scale(.6);
15 | }
16 |
17 | .logos {
18 | padding-top: 15px;
19 | display: flex;
20 | flex-flow: row wrap;
21 | justify-content: space-around;
22 | align-items: center;
23 | }
24 |
25 | .logos > .imgBox {
26 | padding: 25px;
27 | height: auto;
28 | width: 45%;
29 | max-width: 560px;
30 | }
31 | .logos a{
32 | color: #249cbc;
33 | text-decoration: none;
34 | }
35 |
36 | @media screen and (min-width: 415px) and (max-width: 1280px) {
37 | .logos > .imgBox {
38 | width: 350px;
39 | }
40 | }
41 |
42 | @media screen and (max-width: 414px) {
43 | .logos > .imgBox {
44 | width: 300px;
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/scenes/home/press/pressBranding/pressBranding.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import styles from './pressBranding.css';
4 |
5 | function PressBranding() {
6 | return (
7 |
8 | View Our Branding
9 |
10 | );
11 | }
12 |
13 | export default PressBranding;
14 |
--------------------------------------------------------------------------------
/src/scenes/home/press/pressPhotos/pressPhotos.css:
--------------------------------------------------------------------------------
1 | .photos {
2 | padding-top: 15px;
3 | display: flex;
4 | flex-flow: row wrap;
5 | justify-content: space-around;
6 | align-items: center;
7 | }
8 |
9 | .photos > img {
10 | padding: 25px;
11 | }
12 |
13 | .photos > img {
14 | width: auto;
15 | max-height: 368px;
16 | }
17 |
18 | @media screen and (min-width: 415px) and (max-width: 1280px) {
19 | .photos > img {
20 | width: 350px;
21 | }
22 | }
23 |
24 | @media screen and (max-width: 414px) {
25 | .photos > img {
26 | width: 300px;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/scenes/home/press/pressPhotos/pressPhotos.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CodeConferencePic from '../../../../images/CodeConferenceLA.jpg';
3 | import RedHatSummitPic from '../../../../images/RedHat-Summit.jpg';
4 | import NodeSummitPic from '../../../../images/Node-Summit.jpg';
5 | import AngelHackBostonPic from '../../../../images/AngelHack-Boston.jpg';
6 | import UtahMeetupPic from '../../../../images/Utah-Meetup.jpg';
7 | import styles from './pressPhotos.css';
8 |
9 | function PressPhotos() {
10 | return (
11 |
12 | 
13 | 
14 | 
15 | 
16 | 
17 |
18 | );
19 | }
20 |
21 | export default PressPhotos;
22 |
--------------------------------------------------------------------------------
/src/scenes/home/press/pressReleases/pressReleases.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OperationCode/operationcode_frontend/320053d0e6ed587c36f886ddd631dcc7ca6ef3f2/src/scenes/home/press/pressReleases/pressReleases.css
--------------------------------------------------------------------------------
/src/scenes/home/press/pressReleases/pressReleases.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OperationCode/operationcode_frontend/320053d0e6ed587c36f886ddd631dcc7ca6ef3f2/src/scenes/home/press/pressReleases/pressReleases.js
--------------------------------------------------------------------------------
/src/scenes/home/press/pressVideos/pressVideos.css:
--------------------------------------------------------------------------------
1 | .pressVideos {
2 | padding-top: 15px;
3 | display: flex;
4 | flex-flow: row wrap;
5 | justify-content: space-around;
6 | align-items: center;
7 | }
8 | .pressVideos iframe {
9 | padding: 25px;
10 | }
11 |
12 | /* Video iFrame Media Queries */
13 | @media screen and (max-width: 960px) {
14 | .pressVideos iframe {
15 | width: 666px;
16 | height: 375px;
17 | }
18 | }
19 |
20 | @media screen and (max-width: 720px) {
21 | .pressVideos iframe {
22 | width: 444px;
23 | height: 250px;
24 | }
25 | }
26 |
27 | @media screen and (max-width: 480px) {
28 | .pressVideos iframe {
29 | width: 333px;
30 | height: 187.5px;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/scenes/home/press/pressVideos/pressVideos.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './pressVideos.css';
3 |
4 | function PressVideos() {
5 | return (
6 |
7 |
15 |
23 |
24 | );
25 | }
26 |
27 | export default PressVideos;
28 |
--------------------------------------------------------------------------------
/src/scenes/home/profile/profile.css:
--------------------------------------------------------------------------------
1 | .profileContainer {
2 | display: flex;
3 | justify-content: space-between;
4 | flex-flow: column;
5 | }
6 |
7 | .profileContainer__cards {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | flex-wrap: wrap;
12 | }
13 |
14 | .profile__icon {
15 | height: 100px;
16 | width: 100px;
17 | }
18 |
19 | .profileContainer__disclaimer {
20 | font-size: 0.9rem;
21 | font-style: italic;
22 | }
23 |
24 | @media screen and (max-width: 1000px) {
25 | .profileContainer {
26 | flex-direction: column;
27 | }
28 |
29 | .profileContainer__cards {
30 | width: 100%;
31 | }
32 | }
33 |
34 | @media screen and (max-width: 650px) {
35 | .profileContainer__cards > * {
36 | margin-right: 25px;
37 | margin-left: 25px;
38 | }
39 |
40 | .profile__icon {
41 | height: 50px;
42 | width: 50px;
43 | }
44 | }
45 |
46 | @media screen and (max-width: 430px) {
47 | .profileContainer__cards > * {
48 | margin-right: 10px;
49 | margin-left: 10px;
50 | }
51 | }
52 |
53 | @media screen and (max-width: 2875px) {
54 | .profileContainer__cards {
55 | max-width: 900px;
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/scenes/home/resetPassword/requestToken/requestToken.css:
--------------------------------------------------------------------------------
1 | .requestTokenForm {
2 | max-width:500px;
3 | margin:auto;
4 | border: 1px solid rgb(92,105,122);
5 | padding: 10px;
6 | width: 100%;
7 | }
8 |
9 | .joinButton {
10 | align-self: flex-end;
11 | margin-top: 10px;
12 | width: 100%;
13 | }
14 |
15 | .errorMessage {
16 | align-self: center;
17 | color: #ff665A;
18 | font-size: 1rem;
19 | font-weight: 800;
20 | list-style-position: inside;
21 | margin-bottom: 12px;
22 | margin-top: 12px;
23 | padding: 0;
24 | }
25 |
26 | @media screen and (max-width: 599px) {
27 | .resetPasswordForm {
28 | max-width: 298px;
29 | margin: auto;
30 | border: 1px solid rgb(92,105,122);
31 | padding: 10px;
32 | }
33 |
34 | .resetPassword h2 {
35 | font-size: 26px;
36 | }
37 | }
38 |
39 | @media screen and (max-width: 321px) {
40 | .resetPasswordForm {
41 | border-left-style: none;
42 | border-right-style: none;
43 | }
44 |
45 | .resetPassword h2 {
46 | font-size: 20px;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/scenes/home/resetPassword/resetPassword.css:
--------------------------------------------------------------------------------
1 | .resetPassword {
2 | width:100%;
3 | }
4 |
5 | .resetPassword span {
6 | padding: 10px 8px 30px 8px;
7 | font-size:16px;
8 |
9 | }
10 |
--------------------------------------------------------------------------------
/src/scenes/home/resetPassword/resetPassword.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Section from 'shared/components/section/section';
3 | import SignUpLink from 'shared/components/signUpLink/signUpLink';
4 | import RequestToken from './requestToken/requestToken';
5 | import SetPassword from './setPassword/setPassword';
6 | import styles from './resetPassword.css';
7 |
8 | const queryString = require('query-string');
9 |
10 | class ResetPassword extends Component {
11 | state = {
12 | resetPasswordToken: null
13 | };
14 |
15 | componentDidMount = () => {
16 | const parsed = queryString.parse(window.location.search);
17 | this.setState({ resetPasswordToken: parsed.reset_password_token });
18 | };
19 |
20 | render() {
21 | return (
22 |
23 | {this.state.resetPasswordToken ? (
24 |
30 | );
31 | }
32 | }
33 |
34 | export default ResetPassword;
35 |
--------------------------------------------------------------------------------
/src/scenes/home/resetPassword/setPassword/setPassword.css:
--------------------------------------------------------------------------------
1 | .setPasswordForm {
2 | max-width:500px;
3 | margin:auto;
4 | border: 1px solid rgb(92,105,122);
5 | padding: 10px;
6 | width: 100%;
7 | }
8 |
9 | .joinButton {
10 | align-self: flex-end;
11 | margin-top: 10px;
12 | width: 100%;
13 | }
14 |
15 | .errorMessage {
16 | align-self: center;
17 | color: #ff665A;
18 | font-size: 1rem;
19 | font-weight: 800;
20 | list-style-position: inside;
21 | margin-bottom: 12px;
22 | margin-top: 12px;
23 | padding: 0;
24 | }
25 |
26 | @media screen and (max-width: 599px) {
27 | .resetPasswordForm {
28 | max-width: 298px;
29 | margin: auto;
30 | border: 1px solid rgb(92,105,122);
31 | padding: 10px;
32 | }
33 |
34 | .resetPassword h2 {
35 | font-size: 26px;
36 | }
37 | }
38 |
39 | @media screen and (max-width: 321px) {
40 | .resetPasswordForm {
41 | border-left-style: none;
42 | border-right-style: none;
43 | }
44 |
45 | .resetPassword h2 {
46 | font-size: 20px;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/scenes/home/scholarship/preview/preview.css:
--------------------------------------------------------------------------------
1 | .preview {
2 | position: relative;
3 | background: rgb(255, 255, 255);
4 | box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
5 | margin: 2rem 0;
6 | padding: 1em 1em;
7 | border-radius: .28571429rem;
8 | border: 1px solid rgba(34,36,38,.15);
9 | }
10 |
11 | .previewHeader6 {
12 | display: flex;
13 | letter-spacing: .05em;
14 | }
15 |
16 | .previewHeader6::after {
17 | flex-grow: 1;
18 | height: 3px;
19 | content: '\a0';
20 | background-color: rgb(65, 164, 192);
21 | align-self: center;
22 | margin: 0 10px 5px 10px;
23 | }
24 |
25 | .buttonContainer {
26 | text-align: center;
27 | }
28 |
--------------------------------------------------------------------------------
/src/scenes/home/scholarship/preview/preview.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import LinkButton from 'shared/components/linkButton/linkButton';
3 | import PropTypes from 'prop-types';
4 | import styles from './preview.css';
5 |
6 | class Preview extends Component {
7 | render() {
8 | const { scholarship } = this.props;
9 | return (
10 |
11 | {scholarship.name}
12 |
25 | There are no scholarships available at this time, please check back periodically for more
26 | opportunities.
27 |
28 | );
29 | } else {
30 | schlrshps = this.state.scholarships.map(scholarship => (
31 |
36 | {schlrshps}
37 |
38 | );
39 | }
40 | }
41 |
42 | export default Scholarships;
43 |
--------------------------------------------------------------------------------
/src/scenes/home/scholarshipApplication/body/body.css:
--------------------------------------------------------------------------------
1 | .title {
2 | font-size: 18px;
3 | margin-bottom: 12px;
4 | margin-top: 12px;
5 | line-height: 22px;
6 | }
7 |
8 | .terms {
9 | white-space: pre-line;
10 | font-size: 14px;
11 | }
12 |
13 | .red {
14 | color: red;
15 | }
16 |
17 | .active_button, .grey_button {
18 | width: 100%;
19 | }
20 |
21 | .grey_button {
22 | background-color: #ABABAB;
23 | border-color: #999;
24 | color: #fff;
25 | }
26 |
27 | .grey_button:hover {
28 | cursor: not-allowed;
29 | }
30 |
--------------------------------------------------------------------------------
/src/scenes/home/scholarshipApplication/head/head.css:
--------------------------------------------------------------------------------
1 | .scholarshipAppHeader {
2 | letter-spacing: .05em;
3 | }
4 |
--------------------------------------------------------------------------------
/src/scenes/home/scholarshipApplication/head/head.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import dateFormat from 'dateformat';
3 | import PropTypes from 'prop-types';
4 | import styles from './head.css';
5 |
6 | const Head = ({ scholarship }) => (
7 |
8 | {scholarship.name}
9 | {scholarship.description}
10 | {scholarship.location}
11 | Apply by {dateFormat(scholarship.close_time, 'fullDate')}
12 |
13 | );
14 |
15 | Head.propTypes = {
16 | scholarship: PropTypes.shape({
17 | name: PropTypes.string,
18 | description: PropTypes.string,
19 | location: PropTypes.string,
20 | open_time: PropTypes.string,
21 | close_time: PropTypes.string,
22 | terms: PropTypes.string
23 | }).isRequired
24 | };
25 |
26 | export default Head;
27 |
--------------------------------------------------------------------------------
/src/scenes/home/scholarshipApplication/scholarshipApplication.css:
--------------------------------------------------------------------------------
1 | .red {
2 | color: red;
3 | }
4 |
5 | .applicationForm {
6 | display:flex;
7 | flex-direction: column;
8 | max-width:500px;
9 | margin:auto;
10 | padding: 10px;
11 | width: 100%;
12 | }
13 |
14 | .small_title {
15 | font-size: 16px;
16 | margin-bottom: 12px;
17 | white-space: pre-wrap;
18 | }
19 |
--------------------------------------------------------------------------------
/src/scenes/home/scholarshipApplication/success/success.css:
--------------------------------------------------------------------------------
1 | .successText {
2 | font-size: 1.3em;
3 | margin: 0px 0px 20px 0px;
4 | }
5 |
--------------------------------------------------------------------------------
/src/scenes/home/scholarshipApplication/success/success.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import Section from 'shared/components/section/section';
4 | import FormButton from 'shared/components/form/formButton/formButton';
5 | import styles from './success.css';
6 |
7 | const Success = () => (
8 |
9 | We have recieved your application.
10 |
11 |
14 | );
15 |
16 | export default Success;
17 |
--------------------------------------------------------------------------------
/src/scenes/home/team/team.css:
--------------------------------------------------------------------------------
1 | .boardMembers {
2 | align-items: flex-start;
3 | display: flex;
4 | flex-flow: row wrap;
5 | justify-content: center;
6 | }
7 |
8 | .staffMembers {
9 | composes: boardMembers;
10 | padding: 20px 0;
11 | }
12 |
13 | .foundingMembers {
14 | padding: 2rem 0 0 0;
15 | }
16 |
17 | @media screen and (max-width: 840px) {
18 | .boardMembers,
19 | .staffMembers {
20 | align-items: center;
21 | flex-direction: column;
22 | justify-content: space-between;
23 | width: 100%;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/shared/components/accordian/accordian.css:
--------------------------------------------------------------------------------
1 | .accordian {
2 | border: #555 solid;
3 | }
--------------------------------------------------------------------------------
/src/shared/components/accordian/accordian.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import AccordianItem from './accordianItem/accordianItem';
4 | import styles from './accordian.css';
5 |
6 | const Accordian = ({ children }) => (
7 |
8 |
9 | {children}
10 |
11 |
12 | );
13 |
14 |
15 | Accordian.propTypes = {
16 | children: PropTypes.oneOfType([
17 | PropTypes.arrayOf(PropTypes.instanceOf(AccordianItem)),
18 | PropTypes.instanceOf(AccordianItem)
19 | ]).isRequired,
20 | };
21 |
22 | export default Accordian;
23 |
--------------------------------------------------------------------------------
/src/shared/components/accordian/accordianItem/accordianItem.css:
--------------------------------------------------------------------------------
1 | .accordianItem {
2 | border: #888 solid;
3 | }
4 |
5 | .accordianItemHeading {
6 | font-size: 26px;
7 | padding: 20px;
8 | text-align: center;
9 | }
10 |
--------------------------------------------------------------------------------
/src/shared/components/accordian/accordianItem/accordianItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './accordianItem.css';
3 |
4 | const AccordianItem = () => (
5 |
6 |
7 | First Accordion heading
8 |
9 |
10 | );
11 |
12 | export default AccordianItem;
13 |
--------------------------------------------------------------------------------
/src/shared/components/adBanner/adBanner.css:
--------------------------------------------------------------------------------
1 | .adBannerLink {
2 | width: 100%;
3 | color: inherit;
4 | text-decoration: none;
5 | }
6 |
7 | .adBanner {
8 | display: flex;
9 | flex-flow: column nowrap;
10 | justify-content: space-between;
11 | align-items: center;
12 | padding: 1rem;
13 | background-color: #dbf0cc;
14 | border-color: #d0eeba;
15 | border-style: solid;
16 | border-width: 2px;
17 | }
18 |
19 | .adBannerImage {
20 | display: flex;
21 | padding: 0 0 1rem 0;
22 | }
23 |
24 | .adBannerText {
25 | font-size: 18px;
26 | text-align: center;
27 | }
28 |
29 | /* Change the color of links on hover */
30 | .adBanner:hover {
31 | background-color: #c9eeaf;
32 | border-color: #c6eea9;
33 | color: black;
34 | cursor: pointer;
35 | }
36 |
37 | .addBannerBlueBg {
38 | background-color: #3a465d;
39 | color: #ffffff;
40 | }
41 |
--------------------------------------------------------------------------------
/src/shared/components/boardCard/boardCard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './boardCard.css';
4 |
5 | const BoardCard = ({ name, role, src, description }) => (
6 |
7 | 
8 | {name}
9 | {role}
10 |
11 | {description && (
12 |
13 | {description}
14 |
15 | )}
16 |
17 | );
18 |
19 | BoardCard.propTypes = {
20 | name: PropTypes.string.isRequired,
21 | src: PropTypes.string.isRequired,
22 | role: PropTypes.string.isRequired,
23 | description: PropTypes.string,
24 | };
25 |
26 | BoardCard.defaultProps = {
27 | description: null,
28 | };
29 |
30 | export default BoardCard;
31 |
--------------------------------------------------------------------------------
/src/shared/components/button/button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const Button = (props) => {
5 | const {
6 | handleClick,
7 | ...otherProps
8 | } = props;
9 |
10 | return (
11 |
12 | );
13 | };
14 |
15 | Button.propTypes = {
16 | handleClick: PropTypes.func
17 | };
18 |
19 | Button.defaultProps = {
20 | handleClick: null
21 | };
22 |
23 | export default Button;
24 |
--------------------------------------------------------------------------------
/src/shared/components/clipPathImage/clipPathImage.css:
--------------------------------------------------------------------------------
1 | .cpContainer {
2 | padding: 20px;
3 | text-decoration: none;
4 | }
5 |
6 | .cpImage {
7 | width:300px;
8 | height:200px;
9 | }
10 |
11 | .cpImage img {
12 | width: 300px;
13 | clip-path: polygon(0 0, 100% 0, 100% 67%, 0 77%)
14 | }
15 |
16 | .cpImage h4 {
17 | position: relative;
18 | bottom: 45px;
19 | text-align: center;
20 | display:block;
21 | font-size:16px;
22 | }
23 |
24 | .blue {
25 | background-color: #249CBC;
26 | border-color:#249CBC;
27 | color: #fff;
28 | }
29 |
--------------------------------------------------------------------------------
/src/shared/components/clipPathImage/clipPathImage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './clipPathImage.css';
4 |
5 | const ClipPathImage = (props) => {
6 | const {
7 | image,
8 | altText,
9 | title,
10 | theme,
11 | className,
12 | link,
13 | ...otherProps
14 | } = props;
15 | return (
16 |
17 |
18 | 
19 | {title}
20 |
21 |
22 | );
23 | };
24 |
25 | ClipPathImage.propTypes = {
26 | image: PropTypes.string.isRequired,
27 | title: PropTypes.string.isRequired,
28 | altText: PropTypes.string,
29 | theme: PropTypes.string,
30 | className: PropTypes.string,
31 | link: PropTypes.string
32 | };
33 |
34 | ClipPathImage.defaultProps = {
35 | altText: '',
36 | theme: 'blue',
37 | className: '',
38 | link: null
39 | };
40 |
41 | export default ClipPathImage;
42 |
--------------------------------------------------------------------------------
/src/shared/components/donate/donate.css:
--------------------------------------------------------------------------------
1 | .donateSection {
2 | background-image: url('images/General-Flag.jpg');
3 | }
4 |
5 | .donate {
6 | width:80%;
7 | display:flex;
8 | flex-direction: column;
9 | align-items: center;
10 | }
11 |
12 | .donate p {
13 | max-width:700px;
14 | font-size:20px;
15 | color:#fff;
16 | }
17 |
--------------------------------------------------------------------------------
/src/shared/components/donate/donate.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Section from 'shared/components/section/section';
3 | import LinkButton from 'shared/components/linkButton/linkButton';
4 | import commonUrl from 'shared/constants/commonLinks';
5 | import styles from './donate.css';
6 |
7 | const Donate = () => (
8 |
14 |
15 |
16 | As a 501(c)(3) veteran-led nonprofit organization, our programs and
17 | services are maintained through the efforts of our volunteer staff. Your
18 | financial support allows us to continue helping the military community
19 | learn software development, enter the tech industry, and code the
20 | future.
21 |
22 | Thank you for supporting our mission!
23 |
26 | );
27 |
28 | export default Donate;
29 |
--------------------------------------------------------------------------------
/src/shared/components/drawer/drawer.css:
--------------------------------------------------------------------------------
1 | .body {
2 | display: none;
3 | position: fixed;
4 | top: 0;
5 | bottom: 0;
6 | overflow: hidden;
7 | width: 100%;
8 | z-index: 2;
9 | transition: left .25s ease-in-out;
10 | }
11 |
12 | .hidden {
13 | composes: body;
14 | left: -100%;
15 | }
16 |
17 | .visible {
18 | composes: body;
19 | left: 0;
20 | }
21 |
22 | .content {
23 | height: 100%;
24 | width: 100%;
25 | }
26 |
27 | @media screen and (max-width: 779px) {
28 | .body {
29 | display: block;
30 | }
31 | }
32 |
33 | @media screen and (orientation: landscape) {
34 | .body {
35 | width: 320px;
36 | }
37 | }
--------------------------------------------------------------------------------
/src/shared/components/drawer/drawer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './drawer.css';
4 |
5 | const Drawer = (props) => {
6 | const { isVisible, children } = props;
7 | let className = styles.hidden;
8 |
9 | if (isVisible) {
10 | className = styles.visible;
11 | }
12 |
13 | return (
14 |
15 |
16 | {children}
17 |
18 |
19 | );
20 | };
21 |
22 | Drawer.propTypes = {
23 | isVisible: PropTypes.bool,
24 | children: PropTypes.oneOfType([
25 | PropTypes.element,
26 | PropTypes.arrayOf(PropTypes.element)
27 | ]).isRequired
28 | };
29 |
30 | Drawer.defaultProps = {
31 | isVisible: false,
32 | };
33 |
34 | export default Drawer;
35 |
--------------------------------------------------------------------------------
/src/shared/components/form/form.css:
--------------------------------------------------------------------------------
1 | .form {
2 | display:flex;
3 | flex-direction: column;
4 | width: 300px;
5 | max-width: 100%;
6 | margin: 0 auto 2rem;
7 | }
8 |
9 | .form * {
10 | box-sizing: border-box;
11 | }
12 |
13 | .formControl ~ .formControl {
14 | margin-top: 16px;
15 | }
16 |
17 | .formControl input {
18 | background-color: #E6E6E6;
19 | color: #000;
20 | border: none;
21 | font-size: 1.3em;
22 | padding: 0 16px;
23 | height: 50px;
24 | width: 100%;
25 | }
26 |
27 | .formControl input::placeholder {
28 | color: #000;
29 | }
30 |
--------------------------------------------------------------------------------
/src/shared/components/form/form.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import styles from './form.css';
5 |
6 | const Form = ({ className, children }) => {
7 | const classes = classNames({
8 | [`${styles.form}`]: true,
9 | [`${className}`]: className
10 | });
11 | return (
12 |
15 | );
16 | };
17 |
18 | Form.propTypes = {
19 | children: PropTypes.oneOfType([
20 | PropTypes.arrayOf(PropTypes.node),
21 | PropTypes.element
22 | ]).isRequired,
23 | className: PropTypes.string
24 | };
25 |
26 | Form.defaultProps = {
27 | className: null
28 | };
29 |
30 | export default Form;
31 |
--------------------------------------------------------------------------------
/src/shared/components/form/formButton/formButton.css:
--------------------------------------------------------------------------------
1 | .formButton {
2 | composes: button from 'shared/styles/button.css';
3 | }
4 |
5 | .red {
6 | composes: red from 'shared/styles/button.css';
7 | }
8 |
9 | .red:hover {
10 | background-color: #f1665a;
11 | border-color: #f1665a;
12 | cursor: pointer;
13 | }
14 |
15 | .blue {
16 | composes: blue from 'shared/styles/button.css';
17 | }
18 |
19 | .blue:hover {
20 | background-color: #249cde;
21 | border-color: #249cde;
22 | cursor: pointer;
23 | }
24 |
25 | .grey {
26 | composes: grey from 'shared/styles/button.css';
27 | }
28 |
--------------------------------------------------------------------------------
/src/shared/components/form/formButton/formButton.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import styles from './formButton.css';
5 |
6 | const FormButton = ({
7 | theme, className, onClick, disabled, text
8 | }) => {
9 | const classes = classNames({
10 | [`${styles.formButton}`]: true,
11 | [`${styles[theme]}`]: true,
12 | [`${className}`]: className
13 | });
14 | return (
15 |
23 | );
24 | };
25 |
26 | FormButton.propTypes = {
27 | theme: PropTypes.string,
28 | text: PropTypes.string.isRequired,
29 | onClick: PropTypes.func,
30 | className: PropTypes.string,
31 | disabled: PropTypes.bool,
32 | };
33 |
34 | FormButton.defaultProps = {
35 | theme: 'blue',
36 | onClick: null,
37 | className: null,
38 | disabled: false,
39 | };
40 |
41 | export default FormButton;
42 |
--------------------------------------------------------------------------------
/src/shared/components/form/formCheckBox/formCheckBox.css:
--------------------------------------------------------------------------------
1 | input[type=checkbox] {
2 | transform: scale(1.5);
3 | }
4 |
--------------------------------------------------------------------------------
/src/shared/components/form/formCheckBox/formCheckBox.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './formCheckBox.css';
4 |
5 | const FormCheckBox = ({
6 | checkBox, name, value, onChange, label
7 | }) => (
8 |
9 |
17 |
20 |
21 | );
22 |
23 | FormCheckBox.propTypes = {
24 | name: PropTypes.string.isRequired,
25 | value: PropTypes.string.isRequired,
26 | onChange: PropTypes.func,
27 | checkBox: PropTypes.shape({
28 | display: PropTypes.string,
29 | margin: PropTypes.string
30 | }),
31 | label: PropTypes.shape({
32 | textTransform: PropTypes.string,
33 | fontWeight: PropTypes.string,
34 | margin: PropTypes.string
35 | })
36 | };
37 |
38 | FormCheckBox.defaultProps = {
39 | onChange: null,
40 | checkBox: null,
41 | label: null
42 | };
43 |
44 | export default FormCheckBox;
45 |
--------------------------------------------------------------------------------
/src/shared/components/form/formEmail/formEmail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import FormInput from '../formInput/formInput';
3 |
4 | class FormEmail extends Component {
5 | render() {
6 | const validEmailRegex = /(^[^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})/;
7 |
8 | return (
9 | { this.inputRef = child; }}
14 | />
15 | );
16 | }
17 | }
18 |
19 | export default FormEmail;
20 |
--------------------------------------------------------------------------------
/src/shared/components/form/formInput/formInput.css:
--------------------------------------------------------------------------------
1 | .formInput {
2 | composes: formControl from '../form.css';
3 | }
4 |
5 | .formInput > input::placeholder {
6 | color: #999;
7 | }
8 |
9 | .formInput > .error {
10 | border-style: solid;
11 | border-width: 1px;
12 | border-color: #D1665A;
13 | }
14 |
15 | .formInput > span {
16 | color: #D1665A;
17 | }
18 |
19 | .formInput > input:focus {
20 | border-style: none;
21 | }
22 |
--------------------------------------------------------------------------------
/src/shared/components/form/formPassword/formPassword.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import FormInput from '../formInput/formInput';
3 |
4 | class FormPassword extends Component {
5 | render() {
6 | return (
7 | { this.inputRef = child; }}
11 | />
12 | );
13 | }
14 | }
15 |
16 | export default FormPassword;
17 |
--------------------------------------------------------------------------------
/src/shared/components/form/formTextArea/formTextArea.css:
--------------------------------------------------------------------------------
1 | .text_area {
2 | width: 100%;
3 | height: 100px;
4 | background-color: rgb(230, 230, 230);
5 | color: rgb(0, 0, 0);
6 | border: none;
7 | font-size: 1em;
8 | padding: 16px 16px;
9 | resize: none;
10 | }
11 |
--------------------------------------------------------------------------------
/src/shared/components/form/formTextArea/formTextArea.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './formTextArea.css';
4 |
5 | class FormTextArea extends Component {
6 | state = {
7 | value: ''
8 | };
9 |
10 | handleChange = (event) => {
11 | this.setState({ value: event.target.value }, () => {
12 | if (this.props.onChange) {
13 | this.props.onChange(this.state.value);
14 | }
15 | });
16 | };
17 |
18 | render() {
19 | return (
20 |
21 |
26 |
27 | );
28 | }
29 | }
30 |
31 | FormTextArea.propTypes = {
32 | onChange: PropTypes.func,
33 | placeHolder: PropTypes.string
34 | };
35 |
36 | FormTextArea.defaultProps = {
37 | onChange: null,
38 | placeHolder: ''
39 | };
40 |
41 | export default FormTextArea;
42 |
--------------------------------------------------------------------------------
/src/shared/components/form/formZipCode/formZipCode.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import FormInput from '../formInput/formInput';
3 |
4 | function zipCodeValidator(input) {
5 | return (input.length !== 0 && input.trim().length !== 0);
6 | }
7 |
8 | class FormZipCode extends Component {
9 | render() {
10 | return (
11 | { this.inputRef = child; }}
16 | />
17 | );
18 | }
19 | }
20 |
21 | export default FormZipCode;
22 |
--------------------------------------------------------------------------------
/src/shared/components/heading/heading.css:
--------------------------------------------------------------------------------
1 | .heading {
2 | display: flex;
3 | flex-direction: row;
4 | justify-content: center;
5 | width: 80%;
6 | }
7 |
8 | .headingLines:before,
9 | .headingLines:after {
10 | flex-grow: 1;
11 | height: 3px;
12 | content: '\a0';
13 | background-color: rgb(65, 164, 192);
14 | align-self: center;
15 | margin: 0 10px 5px 10px;
16 | }
17 |
18 | .dark {
19 | color: rgb(74,74,74);
20 | }
21 |
22 | .white {
23 | color: #FFF;
24 | }
25 |
26 |
27 | @media screen and (max-width: 650px) {
28 | .heading {
29 | font-size: 1.8em;
30 | }
31 | }
32 |
33 | @media screen and (max-width: 500px) {
34 | .heading {
35 | font-size: 1.5em;
36 | }
37 | }
--------------------------------------------------------------------------------
/src/shared/components/heading/heading.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import styles from './heading.css';
5 |
6 | const Heading = ({
7 | text, headingLines, theme, ...otherProps
8 | }) => {
9 | const classes = classNames({
10 | [`${styles.heading}`]: true,
11 | [`${styles[theme]}`]: true,
12 | [`${styles.headingLines}`]: headingLines
13 | });
14 |
15 | return (
16 |
17 | {text}
18 |
19 | );
20 | };
21 |
22 | Heading.propTypes = {
23 | id: PropTypes.string,
24 | text: PropTypes.string.isRequired,
25 | headingLines: PropTypes.bool,
26 | theme: PropTypes.string
27 | };
28 |
29 | Heading.defaultProps = {
30 | id: null,
31 | headingLines: true,
32 | theme: 'dark'
33 | };
34 |
35 | export default Heading;
36 |
--------------------------------------------------------------------------------
/src/shared/components/heroBanner/heroBanner.css:
--------------------------------------------------------------------------------
1 | .heroBanner {
2 | background-repeat: no-repeat;
3 | background-size: cover;
4 | background-position: center;
5 | display: flex;
6 | height: 480px;
7 | width: 100%;
8 | }
9 |
10 | .header {
11 | flex-grow: 1;
12 | box-sizing: border-box;
13 | padding: 4rem;
14 | }
15 |
16 | @media only screen and (min-width: 320px) and (max-width: 768px) {
17 | .heroBanner {
18 | height: 320px;
19 | }
20 |
21 | .header {
22 | padding: 2rem;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/shared/components/heroBanner/heroBanner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './heroBanner.css';
4 |
5 | const HeroBanner = ({ imageSrc, title, subtitle }) => {
6 | const bannerStyles = {
7 | backgroundImage: `url(${imageSrc})`
8 | };
9 |
10 | return (
11 |
12 |
13 | {title}
14 | { subtitle &&
15 | {subtitle}
16 | }
17 |
18 |
19 | );
20 | };
21 |
22 | HeroBanner.propTypes = {
23 | imageSrc: PropTypes.node.isRequired,
24 | title: PropTypes.string.isRequired,
25 | subtitle: PropTypes.string
26 | };
27 |
28 | HeroBanner.defaultProps = {
29 | subtitle: ''
30 | };
31 |
32 | export default HeroBanner;
33 |
--------------------------------------------------------------------------------
/src/shared/components/iconCard/iconCard.css:
--------------------------------------------------------------------------------
1 | .iconCard {
2 | padding: 10px;
3 | width: 180px;
4 | display: flex;
5 | flex-direction: column;
6 | align-items: center;
7 | margin: 15px;
8 | text-decoration: none;
9 | color: currentColor;
10 | transition: color .125s;
11 | }
12 |
13 | a.iconCard {
14 | font-family: "Noto Serif", sans-serif;
15 | }
16 |
17 | a.iconCard:hover {
18 | color: #444;
19 | }
20 |
21 | .iconCard__icon {
22 | flex: 2;
23 | }
24 |
25 | .iconCard__title {
26 | text-align: center;
27 | }
28 |
29 | .iconCard__subtext {
30 | text-align: center;
31 | font-size: .9rem;
32 | }
33 |
34 | @media screen and (max-width: 650px) {
35 | .icconCard {
36 | width: 100px;
37 | height: 100px;
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/shared/components/imageCard/imageCard.css:
--------------------------------------------------------------------------------
1 | .imageCard {
2 | width: 600px;
3 | height: 200px;
4 | margin: 15px;
5 | display: flex;
6 | flex-flow: row wrap;
7 | align-items: center;
8 | background-color: #FFF;
9 | box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.1);
10 | transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
11 | }
12 |
13 | .imageCard:hover {
14 | box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
15 | }
16 |
17 | .image {
18 | height: 200px;
19 | width: 300px;
20 | }
21 |
22 | .cardImage {
23 | width: 300px;
24 | height: 200px;
25 | }
26 |
27 | .cardText {
28 | width: 250px;
29 | height: 150px;
30 | margin: 25px;
31 | display: flex;
32 | flex-flow: column;
33 | justify-content: space-around;
34 | align-items: center;
35 | }
36 |
37 | .cardText > h6 {
38 | font-size: 1.2rem;
39 | text-align: center;
40 | }
41 |
42 | .cardText > p {
43 | font-size: 0.9rem;
44 | text-align: left;
45 | }
46 |
47 | /* Vertical space between cards for vertical layout */
48 | @media screen and (max-width: 667px) {
49 | .imageCard {
50 | height: 400px;
51 | width: 300px;
52 | }
53 |
54 | .cardText > h6 {
55 | font-size: 1.3rem;
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/shared/components/imageCard/imageCard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import LinkButton from 'shared/components/linkButton/linkButton';
4 | import styles from './imageCard.css';
5 |
6 | const ImageCard = ({
7 | buttonText,
8 | cardText,
9 | image,
10 | link,
11 | title
12 | }) => (
13 |
14 |
15 |
16 |
17 | {title}
18 | {cardText}
19 | {link &&
20 | 
8 |
9 |
10 | {props.title}
11 | {props.cardText}
12 |
13 |
14 | );
15 |
16 | ImageListItem.propTypes = {
17 | image: PropTypes.string.isRequired,
18 | title: PropTypes.string.isRequired,
19 | cardText: PropTypes.string.isRequired
20 | };
21 |
22 | export default ImageListItem;
23 |
--------------------------------------------------------------------------------
/src/shared/components/join/join.css:
--------------------------------------------------------------------------------
1 | .joinSection {
2 | background-image: url('images/General-Military-Departing.jpg');
3 | }
4 |
5 | .join {
6 | width: 80%;
7 | display: flex;
8 | flex-direction: column;
9 | align-items: center;
10 | }
11 |
12 | .join p {
13 | max-width: 700px;
14 | font-size: 20px;
15 | color: #47566b;
16 | }
17 |
--------------------------------------------------------------------------------
/src/shared/components/join/join.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import LinkButton from 'shared/components/linkButton/linkButton';
3 | import Section from 'shared/components/section/section';
4 | import styles from './join.css';
5 |
6 | const Join = (props) => {
7 | const { ...otherProps } = props;
8 |
9 | return (
10 |
17 |
18 |
19 | Operation Code is leading the way to expand opportunities for military veterans and their
20 | families to learn new skills, and build a career in the fast-growing technology sector.
21 |
22 | Join our community for free and jumpstart your skills today!
23 |
26 | );
27 | };
28 |
29 | Join.propTypes = {};
30 |
31 | export default Join;
32 |
--------------------------------------------------------------------------------
/src/shared/components/label/label.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const Label = (props) => {
5 | const {
6 | htmlFor,
7 | ...otherProps
8 | } = props;
9 | return (
10 |
11 | );
12 | };
13 |
14 | Label.propTypes = {
15 | htmlFor: PropTypes.string.isRequired
16 | };
17 |
18 | export default Label;
19 |
--------------------------------------------------------------------------------
/src/shared/components/login/login.css:
--------------------------------------------------------------------------------
1 | .loginBtn {
2 | align-self: center;
3 | margin-top: 2rem;
4 | width: 100%;
5 | }
6 |
7 | .resetBtn {
8 | margin-top: 0.5em;
9 | text-align: center;
10 | }
11 |
12 | .loginError {
13 | color: red;
14 | font-weight: bold;
15 | }
16 |
17 | .gridRow {
18 | display: flex;
19 | flex-direction: column;
20 | }
21 |
22 | @media screen and (min-width: 780px) {
23 | .gridRow {
24 | flex-direction: row;
25 | }
26 |
27 | .gridRow > div {
28 | width: 50%;
29 | box-sizing: border-box;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/shared/components/login/signUpSection.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Section from 'shared/components/section/section';
3 | import LinkButton from 'shared/components/linkButton/linkButton';
4 |
5 | const SignUpSection = () => (
6 |
7 |
8 | Are you ready to deploy your future? Join Operation Code today and launch your career in
9 | software development. Once you complete the form below, you’ll be invited to join our
10 | team on Slack. Make sure you stop in and say hi!
11 |
12 |
14 | );
15 | export default SignUpSection;
16 |
--------------------------------------------------------------------------------
/src/shared/components/modal/modal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import ReactModal from 'react-modal';
4 | import Section from 'shared/components/section/section';
5 | import styles from './modal.css';
6 |
7 | const Modal = ({
8 | isOpen, title, onRequestClose, children
9 | }) => (
10 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
23 | );
24 |
25 | Modal.propTypes = {
26 | children: PropTypes.element,
27 | isOpen: PropTypes.bool,
28 | onRequestClose: PropTypes.func,
29 | title: PropTypes.string
30 | };
31 |
32 | Modal.defaultProps = {
33 | children: ,
34 | isOpen: false,
35 | onRequestClose: () => {},
36 | title: ''
37 | };
38 |
39 | export default Modal;
40 |
--------------------------------------------------------------------------------
/src/shared/components/outboundLink/outboundLink.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import ReactGA from 'react-ga';
4 |
5 | const OutboundLink = ({
6 | href,
7 | analyticsEventLabel,
8 | children,
9 | className,
10 | style,
11 | }) => {
12 | if (process.env.NODE_ENV === 'production') {
13 | return (
14 |
23 | {children}
24 |
25 | );
26 | }
27 |
28 | return (
29 |
36 | {children}
37 |
38 | );
39 | };
40 |
41 | OutboundLink.propTypes = {
42 | href: PropTypes.string.isRequired,
43 | analyticsEventLabel: PropTypes.string.isRequired,
44 | children: PropTypes.object.isRequired, // eslint-disable-line
45 | className: PropTypes.string,
46 | style: PropTypes.object, //eslint-disable-line
47 | };
48 |
49 | OutboundLink.defaultProps = {
50 | className: '',
51 | };
52 |
53 | export default OutboundLink;
54 |
--------------------------------------------------------------------------------
/src/shared/components/quoteBanner/quoteBanner.css:
--------------------------------------------------------------------------------
1 | .quoteBanner {
2 | display: flex;
3 | flex-flow: column;
4 | justify-content: center;
5 | align-items: center;
6 | margin: 0;
7 | text-align: center;
8 | text-shadow: #000 1px 0 15px;
9 | color: white;
10 | height: 480px;
11 | }
12 |
13 | .quoteLines {
14 | width: 85%;
15 | height: 3px;
16 | content: '\a0';
17 | background-color: white;
18 | align-self: center;
19 | }
20 |
21 | .quoteText {
22 | padding: 80px;
23 | font-family: 'Noto Serif', serif;
24 | }
25 |
26 | .author {
27 | display: block;
28 | text-align: right;
29 | }
30 |
31 | @media screen and (max-width: 850px) {
32 | .quoteText {
33 | font-size: 2rem;
34 | padding: 60px;
35 | }
36 | }
37 |
38 | @media screen and (max-width: 650px) {
39 | .quoteText {
40 | font-size: 1.5rem;
41 | padding: 40px;
42 | }
43 | }
44 |
45 | @media screen and (max-width: 415px) {
46 | .author {
47 | text-align: center;
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/shared/components/quoteBanner/quoteBanner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './quoteBanner.css';
4 |
5 | const QuoteBanner = ({ quote, author }) => (
6 |
7 |
8 |
9 | "{quote}"
10 |
11 | - {author}
12 |
13 |
14 |
15 | );
16 |
17 | QuoteBanner.propTypes = {
18 | author: PropTypes.string.isRequired,
19 | quote: PropTypes.string.isRequired,
20 | };
21 |
22 | export default QuoteBanner;
23 |
--------------------------------------------------------------------------------
/src/shared/components/scrollToTop/scrollToTop.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import { withRouter } from 'react-router';
3 | import PropTypes from 'prop-types';
4 |
5 | class ScrollToTop extends Component {
6 | componentDidUpdate(prevProps) {
7 | if (this.props.location !== prevProps.location) {
8 | window.scrollTo(0, 0);
9 | }
10 | }
11 |
12 | render() {
13 | return this.props.children;
14 | }
15 | }
16 |
17 | ScrollToTop.propTypes = {
18 | children: PropTypes.object.isRequired, // eslint-disable-line
19 | location: PropTypes.object.isRequired, // eslint-disable-line
20 | };
21 |
22 | export default withRouter(ScrollToTop);
23 |
--------------------------------------------------------------------------------
/src/shared/components/section/section.css:
--------------------------------------------------------------------------------
1 | .section {
2 | width: 100%;
3 | min-height: 250px;
4 | display: flex;
5 | flex-direction: column;
6 | align-items: center;
7 | padding: 40px 0 40px 0;
8 | }
9 |
10 | .gray {
11 | background-color: #F0F2F2
12 | }
13 |
14 | .white {
15 | background-color: #FFF;
16 | }
17 |
18 | .condensed {
19 | min-height: 0;
20 | }
21 |
22 | .whiteCondensed {
23 | composes: white;
24 | composes: condensed;
25 | }
26 |
27 | .content {
28 | display: flex;
29 | flex-flow: column;
30 | justify-content: space-between;
31 | align-items: center;
32 | width: 80%;
33 | }
34 |
--------------------------------------------------------------------------------
/src/shared/components/signUpLink/signUpLink.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import PropTypes from 'prop-types';
4 |
5 | const SignUpLink = ({ text }) => (
6 | {text}
7 | );
8 |
9 | SignUpLink.propTypes = {
10 | text: PropTypes.string
11 | };
12 |
13 | SignUpLink.defaultProps = {
14 | text: 'Sign up'
15 | };
16 |
17 | export default SignUpLink;
18 |
--------------------------------------------------------------------------------
/src/shared/components/socialLogin/facebook.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import config from 'config/environment';
3 | import FacebookLogin from 'react-facebook-login';
4 | import SocialLogin from './socialLogin';
5 | import styles from './socialMediaButtons.css';
6 |
7 | const Facebook = (props) => {
8 | const responseFacebook = (response) => {
9 | const login = new SocialLogin(props);
10 | const nameArray = response.name.split(' ');
11 | const firstName = nameArray[0];
12 | const lastName = nameArray[nameArray.length];
13 | login.run(firstName, lastName, response.email);
14 | };
15 |
16 | return (
17 |
18 |
19 | 
16 |
17 |
18 | );
19 | };
20 |
21 | SocialMediaItem.propTypes = {
22 | smImage: PropTypes.string.isRequired,
23 | smText: PropTypes.string.isRequired,
24 | link: PropTypes.string.isRequired,
25 | };
26 |
27 | export default SocialMediaItem;
28 |
--------------------------------------------------------------------------------
/src/shared/components/staffCard/staffCard.css:
--------------------------------------------------------------------------------
1 | .staffCard {
2 | height: 28rem;
3 | width: auto;
4 | background: white;
5 | display: flex;
6 | flex-direction: column;
7 | align-items: center;
8 | justify-content: space-around;
9 | box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.1);
10 | transition: all 0.3s cubic-bezier(.25,.8,.25,1);
11 | margin: 1rem;
12 | padding: 15px;
13 | }
14 |
15 |
16 | .staffCard:hover {
17 | box-shadow: 0 9px 28px rgba(0,0,0,0.25);
18 | }
19 |
20 | .staffCard:hover > .img {
21 | filter: grayscale(0%);
22 | }
23 |
24 | .img {
25 | height: 125px;
26 | width: 125px;
27 | border-radius: 100%;
28 | box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.1);
29 | filter: grayscale(100%);
30 | }
31 |
32 | .name {
33 | font-size: 1.5rem;
34 | }
35 |
36 | .hr {
37 | border-top: 1px solid #8c8b8b;
38 | width: 80%;
39 | }
40 |
41 | .item {
42 | align-self: left;
43 | }
44 |
45 | .upper {
46 | text-transform: uppercase;
47 | font-weight: 800;
48 | }
--------------------------------------------------------------------------------
/src/shared/components/staffCard/staffCard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './staffCard.css';
4 |
5 | const StaffCard = ({
6 | src, alt, name, role, twitter, email
7 | }) => (
8 |
9 |
10 |
11 | {name}
12 |
13 |
14 |
15 | Role: {role}
16 |
17 |
18 | Twitter: {twitter}
19 |
20 |
21 | Email: {email}
22 |
23 |
24 | );
25 |
26 | StaffCard.propTypes = {
27 | name: PropTypes.string.isRequired,
28 | src: PropTypes.string.isRequired,
29 | alt: PropTypes.string.isRequired,
30 | role: PropTypes.string.isRequired,
31 | twitter: PropTypes.string.isRequired,
32 | email: PropTypes.string.isRequired
33 | };
34 |
35 | export default StaffCard;
36 |
--------------------------------------------------------------------------------
/src/shared/components/upgradeBrowser/upgradeBrowser.css:
--------------------------------------------------------------------------------
1 | .layout {
2 | position: absolute;
3 | top: 50%;
4 | left: 50%;
5 | transform: translate(-50%, -50%);
6 | border: 6px solid grey;
7 | background: #f0f2f2;
8 | overflow: auto;
9 | border-radius: 4px;
10 | outline: none;
11 | padding: 20px;
12 | width: 59%;
13 | font-size: 2em;
14 | }
15 |
16 | .button {
17 | position: absolute;
18 | bottom: 10%;
19 | right: 5%;
20 | }
21 |
22 | .overlay {
23 | position: fixed;
24 | top: 0;
25 | left: 0;
26 | right: 0;
27 | bottom: 0;
28 | background-color: white;
29 | }
30 |
31 | .warning_logo {
32 | color: #d1665a;
33 | font-size: 2em;
34 | }
35 |
36 | .content_align {
37 | text-align: center;
38 | }
39 |
40 | .upgrade_browser_message {
41 | font-weight: bold;
42 | }
43 |
44 | .main_message {
45 | font-size: 20px;
46 | padding-top: 10px;
47 | padding-bottom: 10px;
48 | }
49 |
50 | .flex {
51 | display: flex;
52 | justify-content: space-around;
53 | }
54 |
55 | .browser {
56 | display: flex;
57 | flex-direction: column;
58 | }
59 |
60 | .browser_name {
61 | display: flex;
62 | flex-direction: column;
63 | justify-content: center;
64 | align-items: center;
65 | font-size: 20px;
66 | font-weight: bold;
67 | padding-bottom: 10px;
68 | }
69 |
70 | .browser_image {
71 | width: 100px;
72 | height: 100px;
73 | }
74 |
--------------------------------------------------------------------------------
/src/shared/components/youtubeVideo/youtubeVideo.css:
--------------------------------------------------------------------------------
1 | iframe {
2 | padding: 0
3 | }
--------------------------------------------------------------------------------
/src/shared/components/youtubeVideo/youtubeVideo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import YouTube from 'react-youtube';
3 | import PropTypes from 'prop-types';
4 | import './youtubeVideo.css';
5 |
6 | const YoutubeVideo = ({ id, height, width }) => {
7 | const options = {
8 | height: `${height}`,
9 | width: `${width}`,
10 | };
11 | return (
12 | { e.target.pauseVideo(); }}
16 | />
17 | );
18 | };
19 |
20 | YoutubeVideo.propTypes = {
21 | id: PropTypes.string,
22 | height: PropTypes.string,
23 | width: PropTypes.string,
24 | };
25 |
26 | YoutubeVideo.defaultProps = {
27 | id: '',
28 | height: '390',
29 | width: '640',
30 | };
31 |
32 | export default YoutubeVideo;
33 |
--------------------------------------------------------------------------------
/src/shared/constants/commonLinks.js:
--------------------------------------------------------------------------------
1 | const commonUrl = {
2 | donateLink: 'https://secure.lglforms.com/form_engine/s/BRtP7QUKyHOyEYsZROsRew',
3 | leadershipCircleLink: 'https://secure.lglforms.com/form_engine/s/L428AQ2rrsFJQyy5Fbglvg'
4 | };
5 |
6 | export default commonUrl;
7 |
--------------------------------------------------------------------------------
/src/shared/styles/button.css:
--------------------------------------------------------------------------------
1 | .button {
2 | text-align: center;
3 | white-space: nowrap;
4 | vertical-align: middle;
5 | user-select: none;
6 | color: #ddd;
7 | padding: 10px;
8 | font-size: 18px;
9 | font-weight: 400;
10 | line-height: 1.42857143;
11 | border: 1px solid transparent;
12 | border-radius: 4px;
13 | width: 200px;
14 | cursor: pointer;
15 | text-decoration: none;
16 | }
17 |
18 | .red {
19 | background-color: #D1665A;
20 | border-color: #D1665A;
21 | color: #FFF;
22 | }
23 |
24 | .blue {
25 | background-color: #249CBC;
26 | border-color:#249CBC;
27 | color: #fff;
28 | }
29 |
30 | .grey {
31 | background-color: #ABABAB;
32 | border-color: #999;
33 | color: #fff;
34 | }
35 |
36 | .grey:hover {
37 | cursor: wait;
38 | }
39 |
--------------------------------------------------------------------------------
/src/shared/styles/react-select.global.css:
--------------------------------------------------------------------------------
1 | @import '../../../node_modules/react-select/dist/react-select.css';
2 |
3 | /* Override react-select styles below */
4 |
5 | .Select-control {
6 | height: 50px;
7 | }
8 |
9 | .Select-input {
10 | height: 50px;
11 | }
12 |
13 | .Select-input > input {
14 | line-height: 2.3em;
15 | }
16 |
17 | .Select-placeholder {
18 | font-size: 1em;
19 | line-height: 50px;
20 | }
21 |
22 | .Select--single .Select-value {
23 | display: flex;
24 | align-items: center;
25 | }
26 |
27 | .Select--multi .Select-value {
28 | font-size: 1em;
29 | line-height: 2.0em;
30 | }
31 |
32 | .Select--multi .Select-value-icon {
33 | padding: 3px 5px 3px;
34 | }
35 |
36 | @media screen and (max-width: 480px) {
37 | .Select-placeholder {
38 | font-size: 1.2em;
39 | line-height: 50px;
40 | }
41 |
42 | .Select--multi .Select-value {
43 | line-height: 2.4em;
44 | }
45 | }
--------------------------------------------------------------------------------
/stories/Button.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 |
4 | const buttonStyles = {
5 | border: '1px solid #eee',
6 | borderRadius: 3,
7 | backgroundColor: '#FFFFFF',
8 | cursor: 'pointer',
9 | fontSize: 15,
10 | padding: '3px 10px',
11 | margin: 10,
12 | };
13 |
14 | const Button = ({ children, onClick }) => (
15 |
21 | );
22 |
23 | Button.propTypes = {
24 | children: PropTypes.string.isRequired,
25 | onClick: PropTypes.func,
26 | };
27 |
28 | export default Button;
29 |
--------------------------------------------------------------------------------
/stories/asset/bloc.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OperationCode/operationcode_frontend/320053d0e6ed587c36f886ddd631dcc7ca6ef3f2/stories/asset/bloc.jpg
--------------------------------------------------------------------------------
/stories/asset/james-bond.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OperationCode/operationcode_frontend/320053d0e6ed587c36f886ddd631dcc7ca6ef3f2/stories/asset/james-bond.jpg
--------------------------------------------------------------------------------
/stories/components/accordian/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Accordian from 'shared/components/accordian/accordian';
5 | import AccordianItem from 'shared/components/accordian/accordianItem/accordianItem';
6 |
7 | storiesOf('shared/components/accordian', module)
8 | .add('Default', () => (
9 |
10 |
13 | ));
14 |
--------------------------------------------------------------------------------
/stories/components/boardCard/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import BoardCard from 'shared/components/boardCard/boardCard';
5 |
6 | import jamesBondJpg from '../../asset/james-bond.jpg';
7 |
8 | storiesOf('shared/components/boardCard', module).add('Default', () => (
9 |
10 | Something
11 |
12 | ))
13 | .add('Visible', () => (
14 |
15 | Something
16 |
17 | ));
--------------------------------------------------------------------------------
/stories/components/form/formButton/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import FormButton from 'shared/components/form/formButton/formButton';
5 |
6 |
7 | storiesOf('shared/components/form/formButton', module)
8 | .add('Default button', () => (
9 |
10 |
12 | ));
--------------------------------------------------------------------------------
/stories/components/label/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Label from 'shared/components/label/label';
5 |
6 | storiesOf('shared/components/label', module)
7 | .add('Default', () => (
8 |
16 |
17 |
23 |
24 | ));
25 |
--------------------------------------------------------------------------------
/stories/components/linkButton/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { HashRouter } from 'react-router-dom';
3 | import { storiesOf } from '@storybook/react';
4 | import { Element } from 'react-scroll';
5 |
6 | import LinkButton from 'shared/components/linkButton/linkButton';
7 |
8 | const MarginDecorator = storyFn => (
9 |
10 | {storyFn()}
11 |
12 | );
13 |
14 | storiesOf('shared/components/linkButton', module)
15 | .addDecorator(MarginDecorator)
16 | .add('Default', () => (
17 |
18 |
23 | ))
24 | .add('Red', () => (
25 |
26 |
32 | ))
33 | .add('External link', () => (
34 |
49 | Hello
50 |
51 |
52 | ));
--------------------------------------------------------------------------------
/stories/components/login/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import createHistory from 'history/createBrowserHistory';
3 | import { Router } from 'react-router';
4 | import { storiesOf } from '@storybook/react';
5 |
6 | import Login from 'shared/components/login/login';
7 |
8 | const history = createHistory();
9 |
10 | storiesOf('shared/components/login', module)
11 | .add('Basic', () => (
12 |
13 |
15 | ));
16 |
--------------------------------------------------------------------------------
/stories/components/modal/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { storiesOf } from '@storybook/react';
3 |
4 | import Modal from 'shared/components/modal/modal';
5 |
6 | class ComponentWithModal extends Component {
7 | constructor() {
8 | super();
9 | this.state = {
10 | isModalOpened: false,
11 | };
12 | }
13 |
14 | handleOpen = () => {
15 | this.setState({ isModalOpened: true });
16 | }
17 |
18 | handleClose = () => {
19 | this.setState({ isModalOpened: false });
20 | }
21 |
22 | render() {
23 | return (
24 |
25 |
31 |
36 | This is modal content
37 |
38 |
39 | );
40 | }
41 | }
42 |
43 | storiesOf('shared/components/modal', module)
44 | .add('Default', () => (
45 |
11 | ));
12 |
13 | storiesOf('Button', module)
14 | .add('with text', () => (
15 |
16 | ))
17 | .add('with some emoji', () => (
18 |
19 | ));
20 |
--------------------------------------------------------------------------------
/stories/landing/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Router } from 'react-router-dom';
3 | import createHistory from 'history/createBrowserHistory';
4 | import { storiesOf } from '@storybook/react';
5 |
6 | import Landing from 'scenes/home/landing/landing';
7 |
8 | const history = createHistory();
9 |
10 | storiesOf('Landing', module)
11 | .add('Basic', () => (
12 |
13 |
15 | ));
16 |
--------------------------------------------------------------------------------