From 4b993a776239de6911351e994b158dc11c9e64fb Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Tue, 2 Mar 2021 11:14:19 -0500 Subject: [PATCH] style updates for core theme (#3134) [INS-452] --- packages/insomnia-app/app/plugins/misc.js | 2 + .../components/dropdowns/method-dropdown.js | 3 +- .../app/ui/components/settings/theme.js | 37 +++++++++++-------- .../ui/components/workspace-page-header.js | 2 +- .../app/ui/components/wrapper-home.js | 2 +- .../app/ui/css/components/wrapper.less | 1 + .../themes/default.js | 13 +++++-- .../themes/one-dark.js | 5 +++ .../themes/one-light.js | 5 +++ .../themes/purple.js | 5 +++ .../themes/solarized.js | 5 +++ .../themes/studio-dark.js | 5 +++ .../themes/studio-light.js | 5 +++ 13 files changed, 68 insertions(+), 22 deletions(-) diff --git a/packages/insomnia-app/app/plugins/misc.js b/packages/insomnia-app/app/plugins/misc.js index b316d4af3..62e8df5e6 100644 --- a/packages/insomnia-app/app/plugins/misc.js +++ b/packages/insomnia-app/app/plugins/misc.js @@ -116,6 +116,8 @@ export async function generateThemeCSS(theme: PluginTheme): Promise { css += wrapStyles(n, '.theme--pane', getThemeBlockCSS(styles.pane)); css += wrapStyles(n, '.theme--pane__header', getThemeBlockCSS(styles.paneHeader)); + css += wrapStyles(n, '.theme--app-header', getThemeBlockCSS(styles.appHeader)); + // Sidebar Styles css += wrapStyles(n, '.theme--sidebar', getThemeBlockCSS(styles.sidebar)); css += wrapStyles(n, '.theme--sidebar__list', getThemeBlockCSS(styles.sidebarList)); diff --git a/packages/insomnia-app/app/ui/components/dropdowns/method-dropdown.js b/packages/insomnia-app/app/ui/components/dropdowns/method-dropdown.js index c3ec79f67..4ec519b4b 100644 --- a/packages/insomnia-app/app/ui/components/dropdowns/method-dropdown.js +++ b/packages/insomnia-app/app/ui/components/dropdowns/method-dropdown.js @@ -82,7 +82,8 @@ class MethodDropdown extends PureComponent { return ( - {buttonLabel} + {buttonLabel}{' '} + {constants.HTTP_METHODS.map(method => ( { value={theme.theme.name} className={isActive ? 'active' : ''}> + {/* + + A WORD TO THE WISE: If you, dear traveler from the future, are here for the purpose of theming things due to changes in the app structure, please remember to add `--sub` to your classes or else the selected class' theme variables will apply to all theme previews. Search your codebase for `--sub` to see more. + + */} + + {/* App Header */} + + + + {/* Panes */} - + {/* Response Area */} + + + {/* URL Bars */} { {/* Sidebar */} - - + {/* Lines */} - - - - + + + + - {/* Colors */} + {/* Color Squares */} diff --git a/packages/insomnia-app/app/ui/components/workspace-page-header.js b/packages/insomnia-app/app/ui/components/workspace-page-header.js index 62b7a548c..b1ea71714 100644 --- a/packages/insomnia-app/app/ui/components/workspace-page-header.js +++ b/packages/insomnia-app/app/ui/components/workspace-page-header.js @@ -50,7 +50,7 @@ const WorkspacePageHeader = ({ return (
Insomnia diff --git a/packages/insomnia-app/app/ui/components/wrapper-home.js b/packages/insomnia-app/app/ui/components/wrapper-home.js index f8905f812..8f4b3fa14 100644 --- a/packages/insomnia-app/app/ui/components/wrapper-home.js +++ b/packages/insomnia-app/app/ui/components/wrapper-home.js @@ -506,7 +506,7 @@ class WrapperHome extends React.PureComponent { wrapperProps={this.props.wrapperProps} renderPageHeader={() => (
Insomnia diff --git a/packages/insomnia-app/app/ui/css/components/wrapper.less b/packages/insomnia-app/app/ui/css/components/wrapper.less index d283f21ce..1d081da23 100644 --- a/packages/insomnia-app/app/ui/css/components/wrapper.less +++ b/packages/insomnia-app/app/ui/css/components/wrapper.less @@ -122,6 +122,7 @@ grid-column-end: span 6; grid-row-start: 1; grid-row-end: span 1; + background: var(--color-bg); } .layout-body { diff --git a/plugins/insomnia-plugin-core-themes/themes/default.js b/plugins/insomnia-plugin-core-themes/themes/default.js index dc02b618f..6f880b132 100644 --- a/plugins/insomnia-plugin-core-themes/themes/default.js +++ b/plugins/insomnia-plugin-core-themes/themes/default.js @@ -31,9 +31,14 @@ module.exports = { default: '#333', }, }, + appHeader: { + background: { + default: '#2C2C2C', + }, + }, sidebar: { background: { - default: '#2e2f2b', + default: '#2C2C2C', success: '#7ecf2b', notice: '#f0e137', warning: '#ff9a1f', @@ -58,10 +63,10 @@ module.exports = { }, paneHeader: { foreground: { - default: '#666', + default: '#ccc', }, background: { - default: '#fff', + default: '#212121', success: '#75ba24', notice: '#d8c84d', warning: '#ec8702', @@ -72,7 +77,7 @@ module.exports = { }, pane: { background: { - default: '#282925', + default: '#292929', success: '{{ styles.sidebar.background.success }}', notice: '{{ styles.sidebar.background.notice }}', warning: '{{ styles.sidebar.background.warning }}', diff --git a/plugins/insomnia-plugin-core-themes/themes/one-dark.js b/plugins/insomnia-plugin-core-themes/themes/one-dark.js index 8ec23d3e9..2ea6cd008 100644 --- a/plugins/insomnia-plugin-core-themes/themes/one-dark.js +++ b/plugins/insomnia-plugin-core-themes/themes/one-dark.js @@ -30,6 +30,11 @@ module.exports = { xl: 'rgba(114, 121, 133, 0.8)', }, styles: { + appHeader: { + background: { + default: '#20252c', + }, + }, sidebar: { background: { default: '#20252c', diff --git a/plugins/insomnia-plugin-core-themes/themes/one-light.js b/plugins/insomnia-plugin-core-themes/themes/one-light.js index 88e2cac58..aa3949c99 100644 --- a/plugins/insomnia-plugin-core-themes/themes/one-light.js +++ b/plugins/insomnia-plugin-core-themes/themes/one-light.js @@ -24,6 +24,11 @@ module.exports = { xl: 'rgba(114, 121, 133, 0.8)', }, styles: { + appHeader: { + background: { + default: '#eaeaeb', + }, + }, sidebar: { background: { default: '#eaeaeb', diff --git a/plugins/insomnia-plugin-core-themes/themes/purple.js b/plugins/insomnia-plugin-core-themes/themes/purple.js index e4eb6cf5a..417a1f57a 100644 --- a/plugins/insomnia-plugin-core-themes/themes/purple.js +++ b/plugins/insomnia-plugin-core-themes/themes/purple.js @@ -6,6 +6,11 @@ module.exports = { default: '#555', }, styles: { + appHeader: { + background: { + default: '#695eb8', + }, + }, link: { foreground: { default: '#68a9a2', diff --git a/plugins/insomnia-plugin-core-themes/themes/solarized.js b/plugins/insomnia-plugin-core-themes/themes/solarized.js index e5c0ea603..ca156e386 100644 --- a/plugins/insomnia-plugin-core-themes/themes/solarized.js +++ b/plugins/insomnia-plugin-core-themes/themes/solarized.js @@ -24,6 +24,11 @@ module.exports = { xl: 'rgba(142, 149, 146, 0.8)', }, styles: { + appHeader: { + background: { + default: '#002b36', + }, + }, sidebar: { background: { default: '#002b36', diff --git a/plugins/insomnia-plugin-core-themes/themes/studio-dark.js b/plugins/insomnia-plugin-core-themes/themes/studio-dark.js index 3c9061f95..056b4c427 100644 --- a/plugins/insomnia-plugin-core-themes/themes/studio-dark.js +++ b/plugins/insomnia-plugin-core-themes/themes/studio-dark.js @@ -24,6 +24,11 @@ module.exports = { xl: 'rgba(133, 157, 176, 0.8)', }, styles: { + appHeader: { + foreground: { + default: '#fff', + }, + }, link: { foreground: { default: '#68a9a2', diff --git a/plugins/insomnia-plugin-core-themes/themes/studio-light.js b/plugins/insomnia-plugin-core-themes/themes/studio-light.js index f86276adf..9c7643afd 100644 --- a/plugins/insomnia-plugin-core-themes/themes/studio-light.js +++ b/plugins/insomnia-plugin-core-themes/themes/studio-light.js @@ -14,6 +14,11 @@ module.exports = { surprise: '#6030BF', }, styles: { + appHeader: { + background: { + default: '#f7fafc', + }, + }, link: { foreground: { default: '#68a9a2',