Skip to content

Commit 01a600b

Browse files
AnemyAnemy
authored
styles: Update leaf green color on light mode (#365)
1 parent c072581 commit 01a600b

File tree

11 files changed

+63
-58
lines changed

11 files changed

+63
-58
lines changed

‎images/leaf.svg renamed to ‎images/dark/leaf.svg

File renamed without changes.

‎images/light/connection-active.svg

Lines changed: 1 addition & 1 deletion
Loading

‎images/light/help/atlas.svg

Lines changed: 2 additions & 2 deletions
Loading

‎images/light/leaf.svg

Lines changed: 12 additions & 0 deletions
Loading

‎src/views/webview-app/components/app.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
--mongodb-green: @green;
77
}
88

9+
:global(.vscode-light) {
10+
--mongodb-green: @green-dark;
11+
}
12+
913
a {
1014
color: var(--mongodb-green);
1115
}

‎src/views/webview-app/components/app.tsx

Lines changed: 29 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -36,52 +36,41 @@ type DispatchProps = {
3636
};
3737

3838
export class App extends React.Component<DispatchProps> {
39-
constructor(props) {
40-
super(props);
39+
componentDidMount(): void {
40+
window.addEventListener('message', this.handleMessageFromExtension);
41+
}
4142

42-
// Update the MongoDB green color we used based on the current
43-
// theme kind of the VSCode user.
44-
const element = document.querySelector('body');
45-
if (element?.getAttribute('data-vscode-theme-kind') === 'vscode-light') {
46-
document.documentElement.style.setProperty(
47-
'--mongodb-green', '#00684A' // Forest green
48-
);
49-
} else {
50-
document.documentElement.style.setProperty(
51-
'--mongodb-green', '#00ED64' // Base green
52-
);
53-
}
43+
componentWillUnmount() {
44+
window.removeEventListener('message', this.handleMessageFromExtension);
5445
}
5546

56-
componentDidMount(): void {
57-
window.addEventListener('message', (event) => {
58-
const message: MESSAGE_FROM_EXTENSION_TO_WEBVIEW = event.data;
47+
handleMessageFromExtension = (event) => {
48+
const message: MESSAGE_FROM_EXTENSION_TO_WEBVIEW = event.data;
5949

60-
switch (message.command) {
61-
case MESSAGE_TYPES.CONNECT_RESULT:
62-
this.props.onConnectedEvent(
63-
message.connectionAttemptId,
64-
message.connectionSuccess,
65-
message.connectionMessage
66-
);
50+
switch (message.command) {
51+
case MESSAGE_TYPES.CONNECT_RESULT:
52+
this.props.onConnectedEvent(
53+
message.connectionAttemptId,
54+
message.connectionSuccess,
55+
message.connectionMessage
56+
);
6757

68-
return;
69-
case MESSAGE_TYPES.CONNECTION_STATUS_MESSAGE:
70-
this.props.setConnectionStatus(
71-
message.connectionStatus,
72-
message.activeConnectionName
73-
);
58+
return;
59+
case MESSAGE_TYPES.CONNECTION_STATUS_MESSAGE:
60+
this.props.setConnectionStatus(
61+
message.connectionStatus,
62+
message.activeConnectionName
63+
);
7464

75-
return;
76-
case MESSAGE_TYPES.FILE_PICKER_RESULTS:
77-
this.props.onFilePickerEvent(message.action, message.files);
78-
return;
79-
default:
80-
// No-op.
81-
return;
82-
}
83-
});
84-
}
65+
return;
66+
case MESSAGE_TYPES.FILE_PICKER_RESULTS:
67+
this.props.onFilePickerEvent(message.action, message.files);
68+
return;
69+
default:
70+
// No-op.
71+
return;
72+
}
73+
};
8574

8675
render(): React.ReactNode {
8776
return (

‎src/views/webview-app/components/atlas-cta/atlas-logo.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ export default class AtlasLogo extends React.PureComponent {
55
return (
66
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
77
<path d="M40.2132 27.0131L45.6336 30.0211C46.7934 30.5437 46.7934 32.1769 45.6336 32.6994L25.984 42.1063C25.097 42.4983 24.1418 42.4983 23.2548 42.1063L3.60526 32.6994C2.44538 32.1769 2.44538 30.5437 3.60526 30.0211L9.69806 26.6711" stroke="var(--vscode-editor-foreground)" strokeWidth="0.765942" strokeMiterlimit="10"/>
8-
<path d="M3.60526 27.9125C2.44538 27.3899 2.44538 25.7568 3.60526 25.2341L7.46449 23.252C7.52229 23.3701 7.5841 23.4863 7.64991 23.6005C8.79923 25.813 11.1655 27.3551 13.9374 27.3551H37.0592C39.4931 27.3551 41.5213 25.746 42.1973 23.6005L45.6336 25.2341C46.7934 25.7568 46.7934 27.3899 45.6336 27.9125L25.984 37.3194C25.097 37.7113 24.1418 37.7113 23.2548 37.3194L3.60526 27.9125Z" fill="#00ED64" stroke="var(--vscode-editor-foreground)" strokeWidth="0.765942" strokeMiterlimit="10"/>
8+
<path d="M3.60526 27.9125C2.44538 27.3899 2.44538 25.7568 3.60526 25.2341L7.46449 23.252C7.52229 23.3701 7.5841 23.4863 7.64991 23.6005C8.79923 25.813 11.1655 27.3551 13.9374 27.3551H37.0592C39.4931 27.3551 41.5213 25.746 42.1973 23.6005L45.6336 25.2341C46.7934 25.7568 46.7934 27.3899 45.6336 27.9125L25.984 37.3194C25.097 37.7113 24.1418 37.7113 23.2548 37.3194L3.60526 27.9125Z" fill="var(--mongodb-green)" stroke="var(--vscode-editor-foreground)" strokeWidth="0.765942" strokeMiterlimit="10"/>
99
<path d="M35.0955 16.9921C34.8368 11.3399 30.287 6.83887 24.7122 6.83887C20.4186 6.83887 16.6864 9.58358 15.0989 13.3961C15.0373 13.544 14.8841 13.6328 14.7248 13.6151C14.4707 13.5869 14.2126 13.5724 13.9512 13.5724C10.6686 13.2919 6.83887 16.2772 6.83887 20.306C6.83887 24.3347 10.0231 27.3552 13.9512 27.3552H37.203C40.0735 27.3552 42.4005 25.214 42.4005 22.2699C42.4005 19.3258 40.0735 16.9392 37.203 16.9392C36.6927 16.9392 36.0965 17.1215 35.58 17.3146C35.3526 17.3995 35.1065 17.2346 35.0955 16.9921Z" stroke="var(--vscode-editor-foreground)" strokeWidth="0.765942"/>
10-
<path d="M41.1868 12.0189C40.9347 9.11563 38.5347 6.83887 35.6113 6.83887C33.3436 6.83887 31.3668 8.24726 30.4853 10.22C30.4202 10.3658 30.268 10.4534 30.1088 10.4413C30.0125 10.4338 29.9152 10.4301 29.817 10.4301C28.0494 10.2805 25.9873 11.8727 25.9873 14.0213C25.9873 16.17 27.7019 17.7809 29.817 17.7809H42.3372C43.8828 17.7809 45.1359 16.6389 45.1359 15.0688C45.1359 13.4986 43.8828 12.2257 42.3372 12.2257C42.1327 12.2257 41.9025 12.2796 41.6835 12.3496C41.4528 12.4233 41.2077 12.2603 41.1868 12.0189Z" fill="#00ED64" stroke="var(--vscode-editor-foreground)" strokeWidth="0.765942"/>
10+
<path d="M41.1868 12.0189C40.9347 9.11563 38.5347 6.83887 35.6113 6.83887C33.3436 6.83887 31.3668 8.24726 30.4853 10.22C30.4202 10.3658 30.268 10.4534 30.1088 10.4413C30.0125 10.4338 29.9152 10.4301 29.817 10.4301C28.0494 10.2805 25.9873 11.8727 25.9873 14.0213C25.9873 16.17 27.7019 17.7809 29.817 17.7809H42.3372C43.8828 17.7809 45.1359 16.6389 45.1359 15.0688C45.1359 13.4986 43.8828 12.2257 42.3372 12.2257C42.1327 12.2257 41.9025 12.2796 41.6835 12.3496C41.4528 12.4233 41.2077 12.2603 41.1868 12.0189Z" fill="var(--mongodb-green)" stroke="var(--vscode-editor-foreground)" strokeWidth="0.765942"/>
1111
</svg>
1212
);
1313
}

‎src/views/webview-app/components/mongodb-logo/mongodb-logo.less

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
.mdb-logo-svg {
22
margin-top: 19px;
33
margin-bottom: 4px;
4-
}
54

6-
.mdb-logo-path {
7-
fill: var(--vscode-editor-foreground);
5+
path {
6+
fill: var(--mongodb-green);
7+
}
88
}
9+

‎src/views/webview-app/components/mongodb-logo/mongodb-logo.tsx

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,9 @@ const styles = require('./mongodb-logo.less');
88

99
class MongoDBLogo extends React.PureComponent {
1010
render(): React.ReactNode {
11-
let darkMode = true;
12-
// Update the MongoDB green color we used based on the current
13-
// theme kind of the VSCode user.
14-
const element = document.querySelector('body');
15-
if (element?.getAttribute('data-vscode-theme-kind') === 'vscode-light') {
16-
darkMode = false;
17-
}
18-
1911
return (
2012
<LeafyGreenMongoDBLogo
2113
className={styles['mdb-logo-svg']}
22-
color={darkMode ? 'green-base' : 'green-dark-2'}
2314
/>
2415
);
2516
}

‎src/views/webview-app/styles/_variables.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@alertRed: #cf4a22;
44
@warningText: #ffdd49;
55
@green: #00ED64;
6+
@green-dark: #00684A;
67
@green-hover: #3F864B;
78
@green-selected: #C3E7CA;
89
@gray: #5d6c74;

0 commit comments

Comments
 (0)