Skip to content

Commit 2273f01

Browse files
FrederikBoldingeriknson
FrederikBolding
and
eriknson
authored
Snaps Simulator Dark Mode (#1453)
* Initial dark mode commit * More styling improvements * More colors fixes * Fix logo * Fix tests * More color fixes * Fix some icons * Update switch color * Update cross icon * dark mode colors * adjusted alt background * added vendor dir to gitignore * fine-tuning styling * Revert change to gitignore * Use hasProperty --------- Co-authored-by: eriknson <eriks@mail.se>
1 parent 1f8abab commit 2273f01

20 files changed

Lines changed: 295 additions & 65 deletions

File tree

‎packages/snaps-simulator/jest.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ module.exports = deepmerge(baseConfig, {
1111
statements: 90,
1212
},
1313
},
14+
setupFiles: ['./jest.setup.js'],
1415
testEnvironment: './jest.environment.js',
1516
moduleNameMapper: {
1617
// Mocks out all these file formats when tests are run

‎packages/snaps-simulator/jest.setup.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/* eslint-disable no-undef */
2+
Object.defineProperty(window, 'matchMedia', {
3+
writable: true,
4+
value: (query) => ({
5+
matches: false,
6+
media: query,
7+
onchange: null,
8+
addListener: jest.fn(), // deprecated
9+
removeListener: jest.fn(), // deprecated
10+
addEventListener: jest.fn(),
11+
removeEventListener: jest.fn(),
12+
dispatchEvent: jest.fn(),
13+
}),
14+
});

‎packages/snaps-simulator/src/assets/icons/configuration-dark.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎packages/snaps-simulator/src/assets/icons/cross-dark.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎packages/snaps-simulator/src/assets/icons/github-dark.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎packages/snaps-simulator/src/assets/logo-dark.svg‎

Lines changed: 32 additions & 0 deletions
Loading

‎packages/snaps-simulator/src/components/Delineator.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ export const Delineator: FunctionComponent<DelineatorProps> = ({
2020
borderBottom="1px solid"
2121
borderColor="border.default"
2222
>
23-
<Icon icon="snap" width="15px" marginRight="1" />
24-
<Text fontFamily="custom" fontSize="xx-small">
23+
<Icon icon="snap" width="16px" marginRight="1" />
24+
<Text fontFamily="custom" fontSize="xs">
2525
Content from {snapName}
2626
</Text>
2727
</Flex>

‎packages/snaps-simulator/src/components/Editor.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, BoxProps } from '@chakra-ui/react';
1+
import { Box, BoxProps, useColorMode } from '@chakra-ui/react';
22
import { FunctionComponent } from 'react';
33
import MonacoEditor, { monaco, MonacoEditorProps } from 'react-monaco-editor';
44

@@ -22,7 +22,19 @@ export const Editor: FunctionComponent<EditorProps> = ({
2222
border = '1px solid',
2323
...props
2424
}) => {
25+
const { colorMode } = useColorMode();
26+
2527
const handleMount = (editor: typeof monaco) => {
28+
// Define a theme with the proper background
29+
editor.editor.defineTheme('vs-dark-custom', {
30+
base: 'vs-dark',
31+
inherit: true,
32+
rules: [],
33+
colors: {
34+
// eslint-disable-next-line @typescript-eslint/naming-convention
35+
'editor.background': '#24272A',
36+
},
37+
});
2638
editor.languages.json?.jsonDefaults.setDiagnosticsOptions({
2739
validate: true,
2840
schemas: [
@@ -48,7 +60,7 @@ export const Editor: FunctionComponent<EditorProps> = ({
4860
language="json"
4961
editorWillMount={handleMount}
5062
value={SAMPLE_JSON_RPC_REQUEST}
51-
theme="vs-light"
63+
theme={colorMode === 'light' ? 'vs-light' : 'vs-dark-custom'}
5264
{...props}
5365
options={{
5466
tabSize: 2,

‎packages/snaps-simulator/src/components/Icon.tsx‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
1-
import { Image, PropsOf } from '@chakra-ui/react';
1+
import { Image, PropsOf, useColorMode } from '@chakra-ui/react';
2+
import { hasProperty } from '@metamask/utils';
23
import { forwardRef, ForwardRefExoticComponent } from 'react';
34

45
import alertIcon from '../assets/icons/alert.svg';
56
import arrowDownIcon from '../assets/icons/arrow-down.svg';
67
import arrowRightIcon from '../assets/icons/arrow-right.svg';
78
import arrowTopRightIcon from '../assets/icons/arrow-top-right.svg';
89
import computerIcon from '../assets/icons/computer.svg';
10+
import configurationDarkIcon from '../assets/icons/configuration-dark.svg';
911
import configurationIcon from '../assets/icons/configuration.svg';
1012
import copiedIcon from '../assets/icons/copied.svg';
1113
import copyIcon from '../assets/icons/copy.svg';
1214
import copyableIcon from '../assets/icons/copyable.svg';
1315
import cronjobIcon from '../assets/icons/cronjob.svg';
16+
import crossDarkIcon from '../assets/icons/cross-dark.svg';
1417
import crossIcon from '../assets/icons/cross.svg';
1518
import darkArrowTopRightIcon from '../assets/icons/dark-arrow-top-right.svg';
1619
import dividerIcon from '../assets/icons/divider.svg';
1720
import dotIcon from '../assets/icons/dot.svg';
1821
import dragIcon from '../assets/icons/drag.svg';
1922
import errorTriangleIcon from '../assets/icons/error-triangle.svg';
23+
import gitHubDarkIcon from '../assets/icons/github-dark.svg';
2024
import gitHubIcon from '../assets/icons/github.svg';
2125
import headingIcon from '../assets/icons/heading.svg';
2226
import insightsIcon from '../assets/icons/insights.svg';
@@ -61,6 +65,7 @@ const DEFAULT_ICONS = {
6165
configuration: {
6266
alt: 'Configuration',
6367
src: configurationIcon,
68+
srcDark: configurationDarkIcon,
6469
},
6570
play: {
6671
alt: 'Play',
@@ -113,6 +118,7 @@ const DEFAULT_ICONS = {
113118
gitHub: {
114119
alt: 'GitHub',
115120
src: gitHubIcon,
121+
srcDark: gitHubDarkIcon,
116122
},
117123
cronjob: {
118124
alt: 'Cronjob',
@@ -129,6 +135,7 @@ const DEFAULT_ICONS = {
129135
cross: {
130136
alt: 'Cross',
131137
src: crossIcon,
138+
srcDark: crossDarkIcon,
132139
},
133140
drag: {
134141
alt: 'Drag',
@@ -192,14 +199,26 @@ export const Icon: ForwardRefExoticComponent<IconProps> = forwardRef(
192199
...props
193200
},
194201
ref,
195-
) => (
196-
<Image
197-
ref={ref}
198-
src={DEFAULT_ICONS[icon].src}
199-
alt={alt}
200-
width={width}
201-
height={height}
202-
{...props}
203-
/>
204-
),
202+
) => {
203+
const { colorMode } = useColorMode();
204+
205+
const iconMetadata = DEFAULT_ICONS[icon];
206+
const defaultSrc = iconMetadata.src;
207+
const darkSrc = hasProperty(iconMetadata, 'srcDark')
208+
? iconMetadata.srcDark
209+
: iconMetadata.src;
210+
211+
const src = colorMode === 'light' ? defaultSrc : darkSrc;
212+
213+
return (
214+
<Image
215+
ref={ref}
216+
src={src}
217+
alt={alt}
218+
width={width}
219+
height={height}
220+
{...props}
221+
/>
222+
);
223+
},
205224
);

‎packages/snaps-simulator/src/components/Logo.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
1-
import { Image } from '@chakra-ui/react';
1+
import { Image, useColorMode } from '@chakra-ui/react';
22
import { FunctionComponent } from 'react';
33

4+
import logoDark from '../assets/logo-dark.svg';
45
import logo from '../assets/logo.svg';
56

67
/**
7-
* Render the MetaMask logo.
8+
* Render the Snaps Simulator logo.
89
*
910
* @returns A React component.
1011
*/
11-
export const Logo: FunctionComponent = () => (
12-
<Image src={logo} alt="MetaMask" height="7" />
13-
);
12+
export const Logo: FunctionComponent = () => {
13+
const { colorMode } = useColorMode();
14+
return (
15+
<Image
16+
src={colorMode === 'light' ? logo : logoDark}
17+
alt="MetaMask Snaps Simulator"
18+
height="7"
19+
/>
20+
);
21+
};

0 commit comments

Comments
 (0)