Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark mode support #959

Merged
merged 3 commits into from
Mar 22, 2024
Merged

Dark mode support #959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
84138e7
Update message now that we have Camel data
holly-cummins Mar 13, 2024
2cc4138
Add dark mode support
holly-cummins Mar 19, 2024
6183883
Do not treat card headlines as links, visually.
holly-cummins Mar 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions gatsby-ssr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,13 @@
* See: https://www.gatsbyjs.com/docs/ssr-apis/
*/

exports.onRenderBody = ({ setHtmlAttributes }) => {
setHtmlAttributes({ lang: `en` })
}
export const onRenderBody = ({ setBodyAttributes, setHtmlAttributes }) => {
//setPreBodyComponents(<MagicScriptTag />)
// setPreBodyComponents(<div>HI</div>)
setHtmlAttributes({ lang: `en` })// Affect the HTML that gets loaded before React here
setBodyAttributes({
style: {
backgroundColor: "var(--main-background-color)"
}
})
}
12 changes: 6 additions & 6 deletions src/components/charts/contributions-chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const LegendSwatch = styled.div`
const ContributorList = styled.ul`
overflow: scroll;
height: 400px;
background-color: var(--white); // this very slightly reduces quite how awful it is if the content overflows to the right-hand side
background-color: var(--main-background-color); // this very slightly reduces quite how awful it is if the content overflows to the right-hand side
padding-inline-start: 0;
`

Expand All @@ -25,7 +25,7 @@ const ContributorInformation = styled.li`
display: flex;
flex-direction: row;
justify-content: space-between;
color: black;
color: var(--main-text-color);
column-gap: 0.75rem;
font-size: var(--font-size-10);
padding: 2px;
Expand All @@ -40,12 +40,12 @@ const Contributor = styled.div`
column-gap: 0.25rem;

&:link {
color: var(--black);
color: var(--main-text-color);
text-decoration: underline;
}

&:visited {
color: var(--black);
color: var(--main-text-color);
text-decoration: underline;
}
`
Expand Down Expand Up @@ -102,7 +102,7 @@ const ContributionsChart = (props) => {

{lotsOfContributors ||
<LabelList position="outside" offset={21} stroke="none"
fill="black"
fill="var(--main-text-color)"
content={renderCustomizedLabel} valueAccessor={(p) => p} />}
}
</Pie>
Expand Down Expand Up @@ -135,7 +135,7 @@ const renderCustomizedLabel = (props) => {
<g>
<a href={profileUrl}>
<Text offset={offset} stroke={stroke} cx={cx} cy={cy} x={x}
y={y} fill="black" textAnchor={anchor}
y={y} fill="var(--main-text-color)" textAnchor={anchor}
verticalAnchor="middle"
className="recharts-pie-label-text"
>
Expand Down
15 changes: 8 additions & 7 deletions src/components/extension-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,10 @@ const Card = styled(props => <Link {...props} />)`
text-align: center;
padding: 1rem;
width: 100%;
background: var(--white) 0 0 no-repeat padding-box;
background: var(--card-background-color) 0 0 no-repeat padding-box;
color: var(--main-text-color);
border: ${props =>
props.$unlisted ? "1px solid var(--grey-0)" : "1px solid var(--grey-1)"};
props.$unlisted ? "1px solid var(--unlisted-outline-color)" : "1px solid var(--card-outline)"};
border-radius: 10px;
opacity: 1;
display: flex;
Expand All @@ -22,8 +23,8 @@ const Card = styled(props => <Link {...props} />)`

&:hover,
:focus {
background-color: var(--light-blue);
border: 1px solid var(--light-blue);
background-color: var(--card-background-color-hover);
border: 1px solid var(--card-background-color-hover);
}
`

Expand All @@ -46,7 +47,7 @@ const ExtensionName = styled.div`
font-size: var(--font-size);
font-weight: var(--font-weight-awfully-bold);
letter-spacing: 0;
color: ${props => (props.$unlisted ? "var(--grey-1)" : "var(--grey-2)")};
color: ${props => (props.$unlisted ? "var(--card-outline)" : "var(--main-text-color)")};
opacity: 1;
width: 100%;
padding-bottom: 2px;
Expand All @@ -68,7 +69,7 @@ const ExtensionDescription = styled.div`
--num-lines: 3.05; // Add a bit of padding so g and other hanging letters don't get cut off
--font-size: var(--font-size-14);
--line-height: calc(var(--font-size) * var(--line-height-multiplier));
color: var(--grey-2);
color: var(--main-text-color);
text-align: left;
font-size: var(--font-size);
opacity: 1;
Expand All @@ -86,7 +87,7 @@ const ExtensionDescription = styled.div`
`

const ExtensionInfo = styled.div`
color: ${props => (props.$unlisted ? "var(--dark-red)" : "var(--grey-2)")};
color: ${props => (props.$unlisted ? "var(--danger-color)" : "var(--main-text-color)")};
text-transform: ${props => (props.$unlisted ? "uppercase" : "none")};
text-align: left;
font-size: 0.7rem;
Expand Down
10 changes: 7 additions & 3 deletions src/components/extensions-display/breadcrumb-bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,25 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"

const BreadcrumbBart = styled.header`
height: 90px;
color: var(--white);
color: var(--breadcrumb-text-color);
text-align: left;
font-size: var(--font-size-24);
opacity: 1;
margin: 0;
padding-left: var(--site-margins);
background-color: var(--quarkus-blue);
background-color: var(--breadcrumb-background-color);
display: flex;
justify-content: flex-start;
align-items: center;
`
const StyledLink = styled(props => <Link {...props} />)`
font-weight: var(--font-weight-awfully-bold);
text-decoration: none;
color: var(--white);
color: var(--breadcrumb-text-color);

&:visited {
color: var(--breadcrumb-text-color);
}
`

const PaddedIcon = styled(props => <FontAwesomeIcon {...props} />)`
Expand Down
6 changes: 3 additions & 3 deletions src/components/extensions-display/code-link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
import styled from "styled-components"
import codeQuarkusUrl from "../util/code-quarkus-url"

const Button = styled(props => <a {...props} />)`

Check warning on line 6 in src/components/extensions-display/code-link.js

View workflow job for this annotation

GitHub Actions / build 

Anchors must have content and the content must be accessible by a screen reader
color: var(--white);
color: var(--navbar-text-color);
display: flex;
justify-content: center;

Expand All @@ -16,11 +16,11 @@
padding: 0.5rem 2rem;

&:visited {
color: var(--white);
color: var(--navbar-text-color);
}

&:hover {
color: var(--white);
color: var(--navbar-text-color);
background-color: var(--dark-red);
}
`
Expand Down
8 changes: 4 additions & 4 deletions src/components/extensions-display/extension-metadata.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"

const MetadataBlock = styled.section`
width: calc((50%) - var(--a-modest-space));
color: var(--grey-2);
color: var(--sec-text-color);
text-align: left;
overflow-wrap: break-word;
font-size: var(--font-size-16);
padding-left: var(--a-modest-space);
padding-bottom: var(--a-modest-space);
padding-top: var(--a-modest-space);
border-bottom: 1px solid var(--grey-1);
border-bottom: 1px solid var(--card-outline);
`

const MetadataTitle = styled.div`
Expand All @@ -29,8 +29,8 @@ const PaddedIcon = styled(props => <FontAwesomeIcon {...props} />)`
`

const ExtensionMetadata = ({
data: { name, plural, fieldName, metadata, transformer, text, url, icon },
}) => {
data: { name, plural, fieldName, metadata, transformer, text, url, icon },
}) => {
const field = fieldName ? fieldName : name.toLowerCase()

const content = text ? text : metadata?.[field]
Expand Down
6 changes: 3 additions & 3 deletions src/components/extensions-display/installation-instructions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import styled from "styled-components"
import CopyToClipboard from "../util/copy-to-clipboard"

const CodeBlock = styled.pre`
background-color: var(--grey-0);
border: 1px solid var(--grey-1);
background-color: var(--code-background-color);
border: 1px solid var(--code-border-color);
padding: 1rem;
line-height: 1.2em;
overflow-x: auto;
color: var(--grey-4);
color: var(--code-text-color);
display: flex;
flex-direction: row;
justify-content: space-between;
Expand Down
3 changes: 2 additions & 1 deletion src/components/filters/category-filter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Element = styled.div`

const Category = styled.li`
font-size: var(--font-size-16);
color: var(--black);
color: var(--main-text-color);
display: flex;
padding: 0;
gap: 8px;
Expand All @@ -30,6 +30,7 @@ const Categories = styled.ul`

const TickyBox = styled(props => <FontAwesomeIcon {...props} />)`
font-size: 16px;
color: var(--main-text-color);
`

const toggleCategory = (
Expand Down
37 changes: 9 additions & 28 deletions src/components/filters/dropdown-filter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from "react"
import styled from "styled-components"
import Select from "react-select"
import Title from "./title"
import { styles } from "../util/styles/style"


const Element = styled.form`
padding-top: 36px;
Expand All @@ -17,33 +17,14 @@ const onChange = (value, { action }, filterer) => {
if (action === "select-option" && filterer) filterer(value.value)
}

// Grab CSS variables in javascript
const grey = styles["grey-2"]

const colourStyles = {
control: styles => ({
...styles,
borderRadius: 0,
color: grey,
borderColor: grey,
width: "220px",
}),
option: (styles, { isDisabled }) => {
return {
...styles,
cursor: isDisabled ? "not-allowed" : "default",
borderRadius: 0,
}
},
dropdownIndicator: styles => ({
...styles,
color: grey, // Custom colour
}),
indicatorSeparator: styles => ({
...styles,
margin: 0,
backgroundColor: grey,
}),
const classNames = {
menu: state => state.isFocused ? "select-menu__focused" : "select-menu",
singleValue: () => "select-single-value",
control: () => "select-control",
option: state => state.isSelected ? "select-option__selected" : state.isDisabled ? "select-option__disabled" : state.isFocused ? "select-option__focused" : "select-option__default",
dropdownIndicator: () => "select-dropdown-indicator",
indicatorSeparator: () => "select-indicator-separator"
}

// We may get things that aren't strings, so we can't just use compareTo
Expand Down Expand Up @@ -92,7 +73,7 @@ const DropdownFilter = ({
onChange={(a, b) => onChange(a, b, filterer)}
name={label}
inputId={label}
styles={colourStyles}
classNames={classNames}
/>
</Element>
)
Expand Down
6 changes: 4 additions & 2 deletions src/components/filters/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,24 @@ const Element = styled.div`
`

const SearchBox = styled.div`
border: 1px solid var(--grey-1);
border: 1px solid var(--controls-outline-color);
height: 36px;
width: 224px;
display: flex;
flex-direction: row;
align-items: center;

&:focus-within {
outline: var(--quarkus-blue) solid 2px;
outline: var(--breadcrumb-background-color) solid 2px;
}
`

const Input = styled.input`
padding: 0;
border: 0;
font-size: var(--font-size-14);
background-color: var(--main-background-color);
color: var(--main-text-color);

outline: none; // change to the defaults, which otherwise give a blue ring inside the white area
`
Expand Down
2 changes: 1 addition & 1 deletion src/components/filters/title.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const Title = styled.label`
width: 224px;
font-size: var(--font-size-18);
letter-spacing: 0;
color: var(--grey-2);
color: var(--sec-text-color);
`

export default Title
15 changes: 9 additions & 6 deletions src/components/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@

const FooterBar = styled.footer`
height: 64px;
background-color: var(--black);
color: var(--white);
background-color: var(--navbar-background-color);
color: var(--main-background-color);
display: flex;
flex-direction: row;
justify-content: space-between;
Expand All @@ -21,8 +21,8 @@
width: 190px;
`

const Logo = styled(props => <a {...props} />)`

Check warning on line 24 in src/components/footer.js

View workflow job for this annotation

GitHub Actions / build 

Anchors must have content and the content must be accessible by a screen reader
background-color: var(--black);
background-color: var(--navbar-background-color);
display: flex;
flex-direction: row;
align-items: center;
Expand All @@ -31,7 +31,8 @@
margin-left: 7px;
`
const SponsorInfo = styled.div`
background-color: var(--black);
background-color: var(--navbar-background-color);
color: var(--navbar-text-color);
display: flex;
flex-direction: row;
align-items: center;
Expand All @@ -40,16 +41,17 @@
font-weight: var(--font-weight-bold);
`

const LicenseText = styled(props => <a {...props} />)`

Check warning on line 44 in src/components/footer.js

View workflow job for this annotation

GitHub Actions / build 

Anchors must have content and the content must be accessible by a screen reader
margin: 8px;
color: var(--navbar-text-color);

&:visited {
color: var(--white);
color: var(--navbar-text-color);
text-decoration: underline;
}

&:link {
color: var(--white);
color: var(--navbar-text-color);
text-decoration: underline;
}
`
Expand All @@ -63,6 +65,7 @@
const PaddedIcon = styled(props => <FontAwesomeIcon {...props} />)`
margin-left: 1px;
margin-right: 1px;
color: var(--navbar-text-color);
`

const Footer = () => {
Expand Down
Loading
Loading