diff --git a/webui/dev/index.tsx b/webui/dev/index.tsx
index d02d9f422..0ecb266b6 100644
--- a/webui/dev/index.tsx
+++ b/webui/dev/index.tsx
@@ -16,41 +16,64 @@ import { createMuiTheme } from '@material-ui/core';
import { Main } from '../src/main';
import { ExtensionRegistryService } from '../src/extension-registry-service';
import createPageSettings from './page-settings';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
// This file is the main entry point for the development setup.
// The production code is at https://github.com/eclipse/open-vsx.org
-const theme = createMuiTheme({
- palette: {
- primary: { main: '#eeeeee', contrastText: '#3f3841', dark: '#565157' },
- secondary: { main: '#a60ee5', contrastText: '#edf5ea' }
- },
- breakpoints: {
- values: {
- xs: 340,
- sm: 550,
- md: 800,
- lg: 1040,
- xl: 1240
- }
- }
-});
-
let serverHost = location.hostname;
if (serverHost.startsWith('3000-')) {
// The frontend runs on port 3000, but the server runs on port 8080
serverHost = '8080-' + serverHost.substring(5);
}
-const service = new ExtensionRegistryService(`${location.protocol}//${serverHost}`);
-const pageSettings = createPageSettings(theme);
+const App = () => {
+ const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+const theme = React.useMemo(
+ () =>
+ createMuiTheme({
+ palette: {
+ primary: {
+ main: prefersDarkMode ? '#444' : '#eeeeee',
+ dark: prefersDarkMode ? '#f4f4f4' : '#565157'
+ },
+ secondary: {
+ main: prefersDarkMode ? '#c160ef' : '#a60ee5',
+ contrastText: '#edf5ea',
+ light: prefersDarkMode ? '#777' : '#fff',
+ dark: prefersDarkMode ? '#333' : '#fff',
+ },
+ type: prefersDarkMode ? 'dark' : 'light'
+ },
+ breakpoints: {
+ values: {
+ xs: 340,
+ sm: 550,
+ md: 800,
+ lg: 1040,
+ xl: 1240
+ }
+ }
+ }),
+ [prefersDarkMode],
+);
+
+ const service = new ExtensionRegistryService(`${location.protocol}//${serverHost}`);
+ const pageSettings = createPageSettings(theme, prefersDarkMode);
+
+ return (
+
+
+
+ );
+}
const node = document.getElementById('main');
ReactDOM.render(
-
-
-
+
, node);
diff --git a/webui/dev/openvsx-registry-logo.tsx b/webui/dev/openvsx-registry-logo.tsx
new file mode 100644
index 000000000..42e7e450a
--- /dev/null
+++ b/webui/dev/openvsx-registry-logo.tsx
@@ -0,0 +1,27 @@
+/********************************************************************************
+ * Copyright (c) 2019 TypeFox and others
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ ********************************************************************************/
+
+import * as React from "react";
+
+function OpenVSXLogo(props: { className: string, prefersDarkMode: boolean }) {
+ return (
+
+ );
+} export default OpenVSXLogo;
\ No newline at end of file
diff --git a/webui/dev/page-settings.tsx b/webui/dev/page-settings.tsx
index 9142cdb60..978e295a2 100644
--- a/webui/dev/page-settings.tsx
+++ b/webui/dev/page-settings.tsx
@@ -17,8 +17,9 @@ import { Extension } from '../src/extension-registry-types';
import { PageSettings, Styleable } from '../src/page-settings';
import { ExtensionListRoutes } from '../src/pages/extension-list/extension-list-container';
import About from './about';
+import OpenVSXLogo from './openvsx-registry-logo';
-export default function createPageSettings(theme: Theme): PageSettings {
+export default function createPageSettings(theme: Theme, prefersDarkMode: boolean): PageSettings {
const toolbarStyle = makeStyles({
logo: {
width: 'auto',
@@ -29,11 +30,9 @@ export default function createPageSettings(theme: Theme): PageSettings {
});
const toolbarContent = () =>
- 
+
;
-
+
const footerStyle = makeStyles({
repositoryLink: {
display: 'flex',
diff --git a/webui/dev/static/openvsx-registry.svg b/webui/dev/static/openvsx-registry.svg
deleted file mode 100644
index b18eb70a6..000000000
--- a/webui/dev/static/openvsx-registry.svg
+++ /dev/null
@@ -1,79 +0,0 @@
-
-
-
diff --git a/webui/src/main.css b/webui/src/main.css
index 354fcf99e..a423f27e5 100644
--- a/webui/src/main.css
+++ b/webui/src/main.css
@@ -1,7 +1,20 @@
+* {
+ line-height: 1.6;
+}
+
html, body, #main, .extension-list-container {
height: 100%;
}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ line-height: 1.1;
+}
+
img {
object-fit: contain;
}
diff --git a/webui/src/main.tsx b/webui/src/main.tsx
index b0be200ae..9bbf34192 100644
--- a/webui/src/main.tsx
+++ b/webui/src/main.tsx
@@ -148,6 +148,7 @@ class MainComponent extends React.Component
} />
{AdditionalRoutes ? : null}
@@ -187,6 +188,7 @@ export namespace MainComponent {
export interface Props extends WithStyles {
service: ExtensionRegistryService;
pageSettings: PageSettings;
+ prefersDarkMode: boolean;
}
export interface State {
diff --git a/webui/src/pages/extension-detail/extension-detail-overview.tsx b/webui/src/pages/extension-detail/extension-detail-overview.tsx
index 8ebfabed8..9ecf1da95 100644
--- a/webui/src/pages/extension-detail/extension-detail-overview.tsx
+++ b/webui/src/pages/extension-detail/extension-detail-overview.tsx
@@ -31,7 +31,13 @@ const overviewStyles = (theme: Theme) => createStyles({
display: 'flex',
[theme.breakpoints.down('lg')]: {
flexDirection: 'column',
- }
+ },
+ 'h1': {
+ margin: '4.5rem 0 3rem'
+ },
+ 'h2': {
+ marginBottom: '3.5rem 0 2.5rem'
+ },
},
resourcesWrapper: {
margin: "4rem 0",
@@ -60,14 +66,14 @@ const overviewStyles = (theme: Theme) => createStyles({
},
'& code': {
whiteSpace: 'pre',
- backgroundColor: '#f2f2f2',
+ backgroundColor: theme.palette.secondary.light,
padding: 2
},
'& h2': {
borderBottom: '1px solid #eee'
},
'& pre': {
- background: '#f2f2f2',
+ background: theme.palette.secondary.light,
padding: '10px 5px',
'& code': {
padding: 0,
@@ -85,7 +91,7 @@ const overviewStyles = (theme: Theme) => createStyles({
},
'& th': {
textAlign: 'start',
- background: '#eee'
+ background: theme.palette.secondary.dark
}
}
},
diff --git a/webui/src/pages/extension-detail/extension-detail.tsx b/webui/src/pages/extension-detail/extension-detail.tsx
index 2562d55de..de10ac904 100644
--- a/webui/src/pages/extension-detail/extension-detail.tsx
+++ b/webui/src/pages/extension-detail/extension-detail.tsx
@@ -66,7 +66,7 @@ const detailStyles = (theme: Theme) => createStyles({
marginBottom: theme.spacing(1)
},
head: {
- backgroundColor: theme.palette.grey[200]
+ backgroundColor: theme.palette.secondary.dark,
},
alignVertically: {
display: 'flex',
@@ -165,10 +165,12 @@ export class ExtensionDetailComponent extends React.Component
-
+
@@ -213,62 +215,64 @@ export class ExtensionDetailComponent extends React.Component
-
- {extension.displayName || extension.name} {extension.preview ?
- preview
- : ''}
-
-
-
- {this.renderAccessInfo(extension, themeClass)}
- {extension.namespace}
-
-
-
-
- Published by {
- extension.publishedBy.avatarUrl ?
-
- {extension.publishedBy.loginName}
-
- : extension.publishedBy.loginName
- }
+ return (
+
+
+ {extension.displayName || extension.name} {extension.preview ?
+ preview
+ : ''}
+
+
+
+ {this.renderAccessInfo(extension, themeClass)}
+ {extension.namespace}
+
+
+
+
+ Published by {
+ extension.publishedBy.avatarUrl ?
+
+ {extension.publishedBy.loginName}
+
+ : extension.publishedBy.loginName
+ }
+
+
+ {this.renderLicense(extension, themeClass)}
-
- {this.renderLicense(extension, themeClass)}
-
-
- {extension.description}
-
-
-
- {extension.downloadCount || 0} {extension.downloadCount === 1 ? 'download' : 'downloads'}
+
+ {extension.description}
-
-
+
-
- ({extension.reviewCount})
+ {extension.downloadCount || 0} {extension.downloadCount === 1 ? 'download' : 'downloads'}
-
+
+
+
+
+ ({extension.reviewCount})
+
+
+
- ;
+ );
}
protected getRoundedRating(rating: number): number {
@@ -339,6 +343,7 @@ export namespace ExtensionDetailComponent {
service: ExtensionRegistryService;
pageSettings: PageSettings;
setError: (err: Error | Partial) => void;
+ prefersDarkMode: boolean;
}
export interface State {
extension?: Extension;
diff --git a/webui/src/pages/extension-list/extension-list-header.tsx b/webui/src/pages/extension-list/extension-list-header.tsx
index 10e987e37..4f90a9511 100644
--- a/webui/src/pages/extension-list/extension-list-header.tsx
+++ b/webui/src/pages/extension-list/extension-list-header.tsx
@@ -63,7 +63,11 @@ const headerStyles = (theme: Theme) => createStyles({
iconButton: {
backgroundColor: theme.palette.secondary.main,
borderRadius: '0 4px 4px 0',
- padding: theme.spacing(1)
+ padding: theme.spacing(1),
+ transition: 'all 0s',
+ '&:hover': {
+ filter: 'invert(100%)',
+ }
},
placeholder: {
opacity: 0.4
diff --git a/webui/src/pages/user/avatar.tsx b/webui/src/pages/user/avatar.tsx
index 74fa4bd2a..0841023dc 100644
--- a/webui/src/pages/user/avatar.tsx
+++ b/webui/src/pages/user/avatar.tsx
@@ -35,6 +35,9 @@ const avatarStyle = (theme: Theme) => createStyles({
border: 'none',
background: 'none',
padding: 0
+ },
+ logoutButton: {
+ color: theme.palette.primary.dark,
}
});
@@ -110,7 +113,7 @@ class UserAvatarComponent extends React.Component
diff --git a/webui/src/pages/user/generate-token-dialog.tsx b/webui/src/pages/user/generate-token-dialog.tsx
index 8bf1720d1..908b6e1d2 100644
--- a/webui/src/pages/user/generate-token-dialog.tsx
+++ b/webui/src/pages/user/generate-token-dialog.tsx
@@ -36,6 +36,11 @@ const tokensDialogStyle = (theme: Theme) => createStyles({
},
buttonWrapper: {
position: 'relative'
+ },
+ generateTokenButton: {
+ '&:hover': {
+ color: theme.palette.primary.dark,
+ }
}
});
@@ -163,7 +168,9 @@ class GenerateTokenDialogComponent extends React.Component
+ color="secondary"
+ className={this.props.classes.generateTokenButton}
+ >
Generate Token