Skip to content

Commit 01c8735

Browse files
josh-heyerjosh-heyer
committed
Adjust category badge colors for @piano35-edb
...then also adjust lots of other colors for consistency & contrast. ...Also fix dark mode toggle persistence since it apparently depended on an ancient bug in the storage API.
1 parent b0720f3 commit 01c8735

File tree

7 files changed

+61
-58
lines changed

7 files changed

+61
-58
lines changed

‎gatsby-ssr.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ exports.onRenderBody = ({ setPreBodyComponents }) => {
88
__html: `
99
const storedDark = window.localStorage.getItem('dark');
1010
const inferredDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
11-
if (storedDark === 'true' || (storedDark !== false && inferredDark)) {
11+
if (storedDark === 'true' || (storedDark !== 'false' && inferredDark)) {
1212
document.documentElement.classList.add('dark');
1313
document.documentElement.dataset['bsTheme'] = 'dark';
1414
}

‎src/components/index-sub-nav.js

+11-13
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,17 @@ const IndexSubLink = ({ url, children }) => (
1010
);
1111

1212
const IndexSubNav = () => (
13-
<div className="mt-5 d-flex justify-content-center">
14-
<ul className="list-inline me-3">
15-
<IndexSubLink url="https://www.enterprisedb.com/">EDB Home</IndexSubLink>
16-
<IndexSubLink url="https://knowledge.enterprisedb.com/">
17-
Knowledge Base and Technical Alerts
18-
</IndexSubLink>
19-
<IndexSubLink url="https://www.enterprisedb.com/contact">
20-
Contact Us
21-
</IndexSubLink>
22-
<IndexSubLink url="/community/contributing/">Have feedback?</IndexSubLink>
23-
</ul>
24-
<DarkModeToggle />
25-
</div>
13+
<ul className="list-inline me-3 mt-5 d-flex flex-wrap justify-content-center">
14+
<IndexSubLink url="https://www.enterprisedb.com/">EDB Home</IndexSubLink>
15+
<IndexSubLink url="https://knowledge.enterprisedb.com/">
16+
Knowledge Base and Technical Alerts
17+
</IndexSubLink>
18+
<IndexSubLink url="https://www.enterprisedb.com/contact">
19+
Contact Us
20+
</IndexSubLink>
21+
<IndexSubLink url="/community/contributing/">Have feedback?</IndexSubLink>
22+
<DarkModeToggle className="list-item-inline" />
23+
</ul>
2624
);
2725

2826
export default IndexSubNav;

‎src/components/prev-next.js

+33-33
Original file line numberDiff line numberDiff line change
@@ -8,39 +8,39 @@ const PrevNext = ({ prevNext }) => {
88

99
return (
1010
<div className="d-flex justify-content-between mt-5 d-print-none">
11-
<div className="max-w-40">
12-
{prevLink && (
13-
<Link
14-
to={prevLink.path}
15-
className="p-3 d-inline-block btn btn-outline-primary text-start"
16-
>
17-
<h5 className="m-0">&larr; Prev</h5>
18-
<p className="m-0 small balance-text">{prevLink.title}</p>
19-
</Link>
20-
)}
21-
</div>
22-
<div className="max-w-40">
23-
{upLink && (
24-
<Link
25-
to={upLink.path}
26-
className="p-3 d-inline-block btn btn-outline-primary text-start"
27-
>
28-
<h5 className="m-0">&uarr; Up</h5>
29-
<p className="m-0 small balance-text">{upLink.title}</p>
30-
</Link>
31-
)}
32-
</div>
33-
<div className="max-w-40">
34-
{nextLink && (
35-
<Link
36-
to={nextLink.path}
37-
className="p-3 d-inline-block btn btn-outline-primary text-end"
38-
>
39-
<h5 className="m-0">Next &rarr;</h5>
40-
<p className="m-0 small balance-text">{nextLink.title}</p>
41-
</Link>
42-
)}
43-
</div>
11+
{prevLink ? (
12+
<Link
13+
to={prevLink.path}
14+
className="p-3 d-block max-w-40 btn btn-outline-primary text-start"
15+
>
16+
<h5 className="m-0">&larr; Prev</h5>
17+
<p className="m-0 small balance-text">{prevLink.title}</p>
18+
</Link>
19+
) : (
20+
<div className="max-w-40"></div>
21+
)}
22+
{upLink ? (
23+
<Link
24+
to={upLink.path}
25+
className="p-3 d-block max-w-40 btn btn-outline-primary text-start"
26+
>
27+
<h5 className="m-0">&uarr; Up</h5>
28+
<p className="m-0 small balance-text">{upLink.title}</p>
29+
</Link>
30+
) : (
31+
<div className="max-w-40"></div>
32+
)}
33+
{nextLink ? (
34+
<Link
35+
to={nextLink.path}
36+
className="p-3 d-block max-w-40 btn btn-outline-primary text-end"
37+
>
38+
<h5 className="m-0">Next &rarr;</h5>
39+
<p className="m-0 small balance-text">{nextLink.title}</p>
40+
</Link>
41+
) : (
42+
<div className="max-w-40"></div>
43+
)}
4444
</div>
4545
);
4646
};

‎src/components/side-navigation.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,7 @@ const FooterItem = ({ url, children }) => (
3636
);
3737

3838
const SideNavigationFooter = ({ hideKBLink = false }) => (
39-
<ul className="list-unstyled mt-0">
40-
<hr />
39+
<ul className="list-unstyled mt-0 border-top">
4140
{!hideKBLink && (
4241
<FooterItem url="https://knowledge.enterprisedb.com/">
4342
Knowledge Base and Technical Alerts
@@ -167,11 +166,11 @@ export function CategoryList({ navTree, pagePath, className }) {
167166
</div>
168167
<ul className="list-unstyled d-flex flex-wrap">
169168
{categories.map((category) => (
170-
<li key={category.path} className="me-1">
169+
<li key={category.path} className="me-1 flex-fill">
171170
<Link
172171
to={category.path}
173172
title={category.description}
174-
className="d-block py-2 align-middle badge rounded-pill text-wrap balance-text bg-primary text-dark mb-1"
173+
className="d-block py-2 align-middle badge rounded-pill text-wrap balance-text bg-light link-primary mb-1"
175174
>
176175
{category.title}
177176
</Link>

‎src/styles/_dark.scss

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
// Dark theme overrides. Alphabetical-ish.
22
html.dark {
3+
$blue: lighten($blue, 20%);
4+
$primary: $blue;
5+
$secondary: lighten($secondary, 10%);
6+
37
// needed for "overscroll" bg color
48
background: darken($gray-800, 12%) !important;
59

610
body {
7-
$blue: $blue;
811
color: darken($light, 10%) !important;
12+
.link-primary {
13+
color: $blue !important;
14+
}
15+
.link-primary:hover {
16+
color: lighten($blue, 15%) !important;
17+
}
918
a:not(.btn) {
10-
color: lighten($blue, 10%);
19+
color: $blue;
1120
}
1221
a:not(.btn):hover {
13-
color: lighten($blue, 35%);
22+
color: lighten($blue, 15%);
1423
}
1524
.active:hover {
1625
color: $gray-200 !important;
@@ -48,7 +57,6 @@ html.dark {
4857
border-top-color: $gray-800;
4958
}
5059
.search-form {
51-
border: 1px solid $blue !important;
5260
background-color: $gray-900 !important;
5361
border-width: 1px;
5462

‎src/styles/_search.scss

-2
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,6 @@
8282
}
8383

8484
.badge.search-filter-badge {
85-
background-color: #ebeff2;
86-
color: #787d81;
8785
font-weight: normal;
8886
}
8987

‎src/styles/_theme.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// EDB Ivory Bootstrap Theme
22

33
// colors
4-
$blue: #4d89b1; // rgb(77, 137, 177)
4+
$blue: #3B729B; // rgb(59, 114, 155)
55
$indigo: #6610f2; // rgb(103, 16, 242)
66
$purple: #8171b5; // rgb(129, 113, 181)
77
$pink: #e83e8c; // rgb(232, 62, 141)

0 commit comments

Comments
 (0)