Skip to content

Commit 6b58a26

Browse files
TamimiGitHubblainehussey
TamimiGitHub
authored and
blainehussey
committed
Create eda-banner.js (#158)
* Create eda-banner.js * Update header.js * Update layout.css to add eda css * fix broken build
1 parent fd318fa commit 6b58a26

File tree

3 files changed

+137
-67
lines changed

3 files changed

+137
-67
lines changed

‎src/components/header.js

+71-67
Original file line numberDiff line numberDiff line change
@@ -2,78 +2,82 @@ import PropTypes from "prop-types"
22
import React from "react"
33
import { Container, Navbar, Nav } from "react-bootstrap"
44
import solaceDevLogo from "../images/solace-developers-logo-white.png"
5+
import EDABanner from "./header/eda-banner"
56

67
const Header = ({ siteTitle }) => (
7-
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
8-
<Container>
9-
<Navbar.Brand
10-
href="https://solace.dev/"
11-
target="_blank"
12-
rel="noopener noreferrer"
13-
>
14-
<img
15-
src={solaceDevLogo}
16-
alt="Solace Developers Logo"
17-
width="125px"
18-
height="36px"
19-
/>
20-
</Navbar.Brand>
21-
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
22-
<Navbar.Collapse
23-
id="responsive-navbar-nav"
24-
className="justify-content-end"
25-
>
26-
<Nav className="mr-auto">
27-
<Nav.Link
28-
href="https://solace.com/try-it-now/"
29-
target="_blank"
30-
rel="noopener noreferrer"
31-
>
32-
Getting Started
33-
</Nav.Link>
34-
<Nav.Link href="/" className="active">
35-
Tutorials
36-
</Nav.Link>
37-
<Nav.Link
38-
href="https://solace.community/"
39-
target="_blank"
40-
rel="noopener noreferrer"
41-
>
42-
Community
43-
</Nav.Link>
44-
<Nav.Link
45-
href="https://docs.solace.com/"
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
>
49-
Docs
50-
</Nav.Link>
51-
<Nav.Link
52-
href="https://solace.com/downloads/"
53-
target="_blank"
54-
rel="noopener noreferrer"
55-
>
56-
Downloads
57-
</Nav.Link>
58-
<Nav.Link
59-
href="https://solace.com/learn/"
60-
target="_blank"
61-
rel="noopener noreferrer"
62-
>
63-
Learn
64-
</Nav.Link>
65-
</Nav>
66-
<a
67-
href="https://console.solace.cloud/login"
8+
<>
9+
<EDABanner />
10+
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
11+
<Container>
12+
<Navbar.Brand
13+
href="https://solace.dev/"
6814
target="_blank"
6915
rel="noopener noreferrer"
70-
className="btnSmall"
7116
>
72-
Log In
73-
</a>
74-
</Navbar.Collapse>
75-
</Container>
76-
</Navbar>
17+
<img
18+
src={solaceDevLogo}
19+
alt="Solace Developers Logo"
20+
width="125px"
21+
height="36px"
22+
/>
23+
</Navbar.Brand>
24+
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
25+
<Navbar.Collapse
26+
id="responsive-navbar-nav"
27+
className="justify-content-end"
28+
>
29+
<Nav className="mr-auto">
30+
<Nav.Link
31+
href="https://solace.com/try-it-now/"
32+
target="_blank"
33+
rel="noopener noreferrer"
34+
>
35+
Getting Started
36+
</Nav.Link>
37+
<Nav.Link href="/" className="active">
38+
Tutorials
39+
</Nav.Link>
40+
<Nav.Link
41+
href="https://solace.community/"
42+
target="_blank"
43+
rel="noopener noreferrer"
44+
>
45+
Community
46+
</Nav.Link>
47+
<Nav.Link
48+
href="https://docs.solace.com/"
49+
target="_blank"
50+
rel="noopener noreferrer"
51+
>
52+
Docs
53+
</Nav.Link>
54+
<Nav.Link
55+
href="https://solace.com/downloads/"
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
>
59+
Downloads
60+
</Nav.Link>
61+
<Nav.Link
62+
href="https://solace.com/learn/"
63+
target="_blank"
64+
rel="noopener noreferrer"
65+
>
66+
Learn
67+
</Nav.Link>
68+
</Nav>
69+
<a
70+
href="https://console.solace.cloud/login"
71+
target="_blank"
72+
rel="noopener noreferrer"
73+
className="btnSmall"
74+
>
75+
Log In
76+
</a>
77+
</Navbar.Collapse>
78+
</Container>
79+
</Navbar>
80+
</>
7781
)
7882

7983
Header.propTypes = {

‎src/components/header/eda-banner.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react"
2+
3+
const EDABanner = props => {
4+
return (
5+
<div class="eda_banner">
6+
<p>
7+
Register Now for EDA Summit 2024 - Virtual Event
8+
<a href="https://edasummit.com/" target="_blank">
9+
Register for Free
10+
</a>
11+
</p>
12+
</div>
13+
)
14+
}
15+
16+
export default EDABanner

‎src/css/layout.css

+50
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,56 @@
88
@import "footer.css";
99
@import "404.css";
1010

11+
12+
/* EDA Summit Banner */
13+
.eda_banner {
14+
background: #ec008c;
15+
background: linear-gradient(
16+
91.72deg,
17+
#ec008c 0.29%,
18+
#fcb900 81.16%,
19+
#f37021 95.55%
20+
) !important;
21+
display: block;
22+
height: auto;
23+
background: rgb(237, 8, 135);
24+
padding: 4px 15px !important;
25+
top: 0;
26+
width: 100%;
27+
}
28+
.eda_banner p {
29+
display: block;
30+
color: #000;
31+
margin: 0;
32+
text-align: center;
33+
font-size: 16px;
34+
font-weight: 600 !important;
35+
}
36+
37+
.eda_banner
38+
p
39+
> a:not(.cta):not(.button):not(.button-dark):not(.button-white):not(.wraps-image):before {
40+
display: none !important;
41+
}
42+
43+
.eda_banner p a {
44+
background-color: #e20880 !important;
45+
border-radius: 20px;
46+
color: #fff !important;
47+
display: inline-block;
48+
font-size: 15px !important;
49+
font-weight: 600 !important;
50+
padding: 2px 20px !important;
51+
margin-left: 8px;
52+
text-decoration: none !important;
53+
}
54+
.eda_banner p a:hover {
55+
background-color: #e20880 !important;
56+
color: #000 !important;
57+
text-decoration: none !important;
58+
}
59+
60+
1161
html {
1262
font-size: 16px;
1363
color: rgba(0, 0, 0, 1);

0 commit comments

Comments
 (0)