Skip to content

Commit 98973c7

Browse files
chenxsanchenxsan
authored
update icons for dark mode (#5318)
* update icon for dark mode * update colors
1 parent 84a5964 commit 98973c7

File tree

4 files changed

+91
-11
lines changed

4 files changed

+91
-11
lines changed

‎src/assets/language-icon.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/Dropdown/Dropdown.jsx

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Component } from 'react';
2-
import LanguageIcon from '../../assets/language-icon.svg';
32
import './Dropdown.scss';
43
import PropTypes from 'prop-types';
54

@@ -62,11 +61,35 @@ export default class Dropdown extends Component {
6261
aria-label="Select language"
6362
onClick={this._handleClick.bind(this)}
6463
>
65-
<img
66-
className="dropdown__language"
67-
alt="select language"
68-
src={LanguageIcon}
69-
/>
64+
<svg
65+
viewBox="0 0 610 560"
66+
xmlns="http://www.w3.org/2000/svg"
67+
className="dropdown__language text-gray-100 hover:text-blue-200 transition-colors duration-200"
68+
>
69+
<path d="m304.8 99.2-162.5-57.3v353.6l162.5-52.6z" />
70+
<path
71+
d="m300.9 99 168.7-57.3v353.6l-168.7-52.5zm-200.7 358.4 200.7-66.9v-291.5l-200.7 66.9z"
72+
fill="currentColor"
73+
/>
74+
<path d="m392.4 461.8 28.4 46.8 15-43.5zm-223.9-262.3c-1.1-1 1.4 8.6 4.8 12 6.1 6.1 10.8 6.9 13.3 7 5.6.2 12.5-1.4 16.5-3.1s10.9-5.2 13.5-10.4c.6-1.1 2.1-3 1.1-7.5-.7-3.5-3-4.8-5.7-4.6s-11 2.4-15 3.6-12.2 3.7-15.8 4.5-11.5-.3-12.7-1.5zm101.2 114.8c-1.6-.6-34.3-14.1-38.9-16.4a368 368 0 0 0 -17.5-7.5c12.3-19 20.1-33.4 21.2-35.6 1.9-4 15-29.5 15.3-31.1s.7-7.5.4-8.9-5.1 1.3-11.6 3.5-18.9 10.2-23.7 11.2-20.1 6.8-28 9.4c-7.8 2.6-22.7 7.1-28.8 8.8-6.1 1.6-11.4 1.8-14.9 2.8 0 0 .5 4.8 1.4 6.2s4.1 5 7.9 5.9c3.8 1 10 .6 12.8-.1s7.7-3.1 8.4-4.1c.7-1.1-.3-4.3.8-5.3s16.1-4.5 21.7-6.2 27.2-9.2 30.1-8.8a916 916 0 0 1 -23.9 47.7 821 821 0 0 1 -45 63.3c-5.3 6-18 21.5-22.4 25 1.1.3 9-.4 10.4-1.3 8.9-5.5 23.8-24.1 28.6-29.7a489.1 489.1 0 0 0 36.7-49.4c1.9.8 17.6 13.6 21.7 16.4a293 293 0 0 0 23.7 13.3c3.5 1.5 16.9 7.7 17.5 5.6.7-1.8-2.3-14.1-3.9-14.7z" />
75+
<path
76+
clipRule="evenodd"
77+
d="m194.1 484.7a204.9 204.9 0 0 0 30.7 14.5 233.6 233.6 0 0 0 46.4 12c.5 0 16 1.9 19.2 1.9h15.7c6.1-.5 11.8-.9 17.9-1.7 4.9-.7 10.3-1.6 15.5-2.8 3.8-.9 7.8-1.7 11.7-3 3.7-1 7.8-2.4 11.8-3.8l8.2-3.1c2.3-1 5.1-2.3 7.7-3.3a243 243 0 0 0 19.2-10c2.3-1.2 7.5-5.2 10.3-5.2 3.1 0 5.2 2.8 5.2 5.2 0 5.1-6.8 6.6-9.9 8.9-3.3 2.3-7.3 4-10.8 5.9-7 3.7-14.1 6.8-20.9 9.4a251 251 0 0 1 -27.3 8.5c-3.3.7-6.6 1.6-9.9 2.1-1.7.3-19.9 3.1-24.9 3.1h-23a293.9 293.9 0 0 1 -35.1-5.2 196 196 0 0 1 -33.1-10.3c-12-4.5-24.6-10.5-36.4-18.3-2.1-1.4-2.3-2.8-2.3-4.4a5 5 0 0 1 5.1-5.1c2.4.1 8 4.2 9 4.7zm101.4-98.1-189.9 63.2v-280.1l189.9-63.2zm10.6-288.3v292.7a6 6 0 0 1 -1.2 2.6c-.3.5-1 1.2-1.6 1.4a14621 14621 0 0 1 -203.1 67.6c-2.1 0-4-1.4-5.1-3.7 0-.2-.2-.3-.2-.7v-292.8c.3-.9.5-2.1 1.2-2.8 1.4-1.9 3.8-2.3 5.4-2.8 3-1 196.1-65.8 198.9-65.8 1.9 0 5.7 1.2 5.7 4.3z"
78+
fillRule="evenodd"
79+
/>
80+
<path
81+
clipRule="evenodd"
82+
d="m464.3 388-158-49.1v-236l158-53.7zm10.6-345.8v352.4c-.2 4-3 5.7-5.6 5.7-2.3 0-18.6-5.6-21.4-6.4l-65.8-20.4-14.6-4.7-12.9-4c-18.6-5.7-37.6-11.5-56.3-17.8-.7-.2-2.4-2.6-2.4-3.1v-246.1c.3-.9.7-1.9 1.6-2.6 1.4-1.6 61.1-21.4 84.7-29.3 6.3-2.3 84.8-29.3 87.3-29.3 3 .1 5.4 2.3 5.4 5.6z"
83+
fillRule="evenodd"
84+
/>
85+
<path d="m515 461.8-211.1-67.3.9-292.8 210.2 66.9z" />
86+
<path
87+
clipRule="evenodd"
88+
d="m408.6 232.5-20.7 50.1 38.1 11.5zm-12.4-47.2 27.2 8.2 49.5 178.6-27.9-8.5-10-36.7-57.7-17.5-12.4 29.9-27.9-8.5z"
89+
fill="currentColor"
90+
fillRule="evenodd"
91+
/>
92+
</svg>
7093
{/* Commented out until media breakpoints are in place
7194
<span>{ items[0].title }</span> */}
7295
<i aria-hidden="true" className="dropdown__arrow" />

‎src/components/HelloDarkness.jsx

Lines changed: 60 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,69 @@ export default function HelloDarkness() {
3939
aria-label={
4040
theme === DARK ? 'Switch to light theme' : 'Switch to dark theme'
4141
}
42-
className="bg-transparent border-none cursor-pointer text-[16px] p-0 inline-flex items-center"
42+
className="bg-transparent border-none cursor-pointer text-[16px] p-0 inline-flex items-center text-gray-100 hover:text-blue-200 transition-colors duration-200"
4343
onClick={themeSwitcher}
4444
data-testid="hello-darkness"
4545
>
46-
{theme === DARK ? '🌙' : '☀️'}
46+
{theme === DARK ? (
47+
<svg
48+
xmlns="http://www.w3.org/2000/svg"
49+
width="1.2em"
50+
height="1.2em"
51+
preserveAspectRatio="xMidYMid meet"
52+
viewBox="0 0 24 24"
53+
>
54+
<path
55+
d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93a9.93 9.93 0 0 0 7.07-2.929a10.007 10.007 0 0 0 2.583-4.491a1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343a7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483a10.027 10.027 0 0 0 2.89 7.848a9.972 9.972 0 0 0 7.848 2.891a8.036 8.036 0 0 1-1.484 2.059z"
56+
fill="currentColor"
57+
></path>
58+
</svg>
59+
) : (
60+
<svg
61+
xmlns="http://www.w3.org/2000/svg"
62+
width="1.2em"
63+
height="1.2em"
64+
preserveAspectRatio="xMidYMid meet"
65+
viewBox="0 0 512 512"
66+
>
67+
<path
68+
d="M256 387c-8.5 0-15.4 6.9-15.4 15.4v46.2c0 8.5 6.9 15.4 15.4 15.4s15.4-6.9 15.4-15.4v-46.2c0-8.5-6.9-15.4-15.4-15.4z"
69+
fill="currentColor"
70+
></path>
71+
<path
72+
d="M256 48c-8.5 0-15.4 6.9-15.4 15.4v46.2c0 8.5 6.9 15.4 15.4 15.4s15.4-6.9 15.4-15.4V63.4c0-8.5-6.9-15.4-15.4-15.4z"
73+
fill="currentColor"
74+
></path>
75+
<path
76+
d="M125 256c0-8.5-6.9-15.4-15.4-15.4H63.4c-8.5 0-15.4 6.9-15.4 15.4s6.9 15.4 15.4 15.4h46.2c8.5 0 15.4-6.9 15.4-15.4z"
77+
fill="currentColor"
78+
></path>
79+
<path
80+
d="M448.6 240.6h-46.2c-8.5 0-15.4 6.9-15.4 15.4s6.9 15.4 15.4 15.4h46.2c8.5 0 15.4-6.9 15.4-15.4s-6.9-15.4-15.4-15.4z"
81+
fill="currentColor"
82+
></path>
83+
<path
84+
d="M152.5 344.1c-4.1 0-8 1.6-10.9 4.5l-32.7 32.7c-2.9 2.9-4.5 6.8-4.5 10.9s1.6 8 4.5 10.9c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5l32.7-32.7c6-6 6-15.8 0-21.8-2.9-2.9-6.8-4.5-10.9-4.5z"
85+
fill="currentColor"
86+
></path>
87+
<path
88+
d="M359.5 167.9c4.1 0 8-1.6 10.9-4.5l32.7-32.7c2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5l-32.7 32.7c-2.9 2.9-4.5 6.8-4.5 10.9s1.6 8 4.5 10.9c2.9 2.9 6.8 4.5 10.9 4.5z"
89+
fill="currentColor"
90+
></path>
91+
<path
92+
d="M130.7 108.9c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5-2.9 2.9-4.5 6.8-4.5 10.9 0 4.1 1.6 8 4.5 10.9l32.7 32.7c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5 2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9l-32.7-32.7z"
93+
fill="currentColor"
94+
></path>
95+
<path
96+
d="M370.4 348.6c-2.9-2.9-6.8-4.5-10.9-4.5-4.1 0-8 1.6-10.9 4.5-6 6-6 15.8 0 21.8l32.7 32.7c2.9 2.9 6.8 4.5 10.9 4.5 4.1 0 8-1.6 10.9-4.5 2.9-2.9 4.5-6.8 4.5-10.9s-1.6-8-4.5-10.9l-32.7-32.7z"
97+
fill="currentColor"
98+
></path>
99+
<path
100+
d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96z"
101+
fill="currentColor"
102+
></path>
103+
</svg>
104+
)}
47105
</button>
48106
);
49107
}

‎src/components/Navigation/Navigation.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function NavigationIcon({ children, to, title }) {
6969
return (
7070
<Link
7171
to={to}
72-
className="inline-flex items-center"
72+
className="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200"
7373
title={`webpack on ${title}`}
7474
>
7575
{children}
@@ -78,7 +78,7 @@ function NavigationIcon({ children, to, title }) {
7878
}
7979
const navigationIconProps = {
8080
'aria-hidden': true,
81-
fill: '#fff',
81+
fill: 'currentColor',
8282
width: 16,
8383
};
8484

0 commit comments

Comments
 (0)