From 2e1fda8b64e2d5758ece26a496e63a8ee4447c83 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Tue, 17 Jul 2018 20:48:10 -0400 Subject: [PATCH] Theme tweaks --- packages/insomnia-app/app/plugins/misc.js | 28 ++++++----- .../ui/components/base/dropdown/dropdown.js | 2 +- .../ui/components/modals/settings-modal.js | 3 +- .../app/ui/components/settings/theme.js | 2 +- .../ui/components/sidebar/sidebar-filter.js | 2 +- .../app/ui/components/sidebar/sidebar.js | 46 ++++++++++--------- .../insomnia-app/app/ui/containers/app.js | 3 +- .../app/ui/css/components/dropdown.less | 5 +- .../app/ui/css/components/sidebar.less | 5 ++ .../app/ui/css/components/tag.less | 1 - .../app/ui/css/components/themes.less | 2 +- .../app/ui/css/components/tooltip.less | 5 -- .../app/ui/css/constants/colors.less | 4 +- packages/insomnia-app/app/ui/index.js | 8 ++-- .../themes/default.js | 9 ++-- .../themes/hyper.js | 12 ++++- .../themes/material.js | 10 ++++ .../themes/one-dark.js | 8 ++-- .../themes/railscasts.js | 2 +- .../themes/solarized-dark.js | 2 +- .../themes/solarized-light.js | 2 +- .../themes/solarized.js | 4 +- 22 files changed, 98 insertions(+), 67 deletions(-) diff --git a/packages/insomnia-app/app/plugins/misc.js b/packages/insomnia-app/app/plugins/misc.js index fd7690157b..f57d12a2bf 100644 --- a/packages/insomnia-app/app/plugins/misc.js +++ b/packages/insomnia-app/app/plugins/misc.js @@ -1,6 +1,7 @@ // @flow import { render, THROW_ON_ERROR } from '../common/render'; import { getThemes } from './index'; +import type { Theme } from './index'; type ThemeBlock = { background?: { @@ -144,9 +145,7 @@ export async function generateThemeCSS(theme: PluginTheme): Promise { css += wrapStyles(n, '.CodeMirror-info', getThemeBlockCSS(styles.dialog)); } - return typeof renderedTheme.rawCss === 'string' - ? css + '\n\n' + renderedTheme.rawCss - : css; + return css; } function getThemeBlockCSS(block?: ThemeBlock): string { @@ -229,31 +228,38 @@ function wrapStyles(theme: string, selector: string, styles: string) { ].join('\n'); } -export async function setThemes() { +export async function setTheme(themeName: string) { if (!document) { return; } const head = document.head; + const body = document.body; - if (!head) { + if (!head || !body) { return; } - const themes = await getThemes(); + body.setAttribute('theme', themeName); + const themes: Array = await getThemes(); for (const theme of themes) { - const themeCSS = (await generateThemeCSS(theme.theme)) + '\n'; + let themeCSS = (await generateThemeCSS(theme.theme)) + '\n'; + const { name } = theme.theme; + const { rawCss } = theme.theme.theme; + + let s = document.querySelector(`style[data-theme-name="${name}"]`); - let s = document.querySelector( - `style[data-theme-name="${theme.theme.name}"]` - ); if (!s) { s = document.createElement('style'); - s.setAttribute('data-theme-name', theme.theme.name); + s.setAttribute('data-theme-name', name); head.appendChild(s); } + if (typeof rawCss === 'string' && name === themeName) { + themeCSS += '\n\n' + rawCss; + } + s.innerHTML = themeCSS; } } diff --git a/packages/insomnia-app/app/ui/components/base/dropdown/dropdown.js b/packages/insomnia-app/app/ui/components/base/dropdown/dropdown.js index 056c396017..61d7469848 100644 --- a/packages/insomnia-app/app/ui/components/base/dropdown/dropdown.js +++ b/packages/insomnia-app/app/ui/components/base/dropdown/dropdown.js @@ -402,7 +402,7 @@ class Dropdown extends PureComponent { /> {noResults && ( -
Nothing to show
+
No match :(
)}
    {dropdownItems}
diff --git a/packages/insomnia-app/app/ui/components/modals/settings-modal.js b/packages/insomnia-app/app/ui/components/modals/settings-modal.js index f3c82be77b..75c31d3487 100644 --- a/packages/insomnia-app/app/ui/components/modals/settings-modal.js +++ b/packages/insomnia-app/app/ui/components/modals/settings-modal.js @@ -18,6 +18,7 @@ import { Curl } from 'insomnia-libcurl'; import { getAppName, getAppVersion } from '../../../common/constants'; import * as session from '../../../sync/session'; import Tooltip from '../tooltip'; +import { setTheme } from '../../../plugins/misc'; export const TAB_INDEX_EXPORT = 1; export const TAB_INDEX_SHORTCUTS = 3; @@ -58,7 +59,7 @@ class SettingsModal extends PureComponent { } async _handleChangeTheme(theme, persist = true) { - document.body.setAttribute('theme', theme); + setTheme(theme); if (persist) { models.settings.update(this.props.settings, { theme }); diff --git a/packages/insomnia-app/app/ui/components/settings/theme.js b/packages/insomnia-app/app/ui/components/settings/theme.js index ed8ab9bce7..eb08354038 100644 --- a/packages/insomnia-app/app/ui/components/settings/theme.js +++ b/packages/insomnia-app/app/ui/components/settings/theme.js @@ -5,7 +5,7 @@ import Button from '../base/button'; import type { Theme as ThemeType } from '../../../plugins'; import { getThemes } from '../../../plugins'; -const THEMES_PER_ROW = 4; +const THEMES_PER_ROW = 5; type Props = { handleChangeTheme: string => void, diff --git a/packages/insomnia-app/app/ui/components/sidebar/sidebar-filter.js b/packages/insomnia-app/app/ui/components/sidebar/sidebar-filter.js index 612fa88131..2f676f870c 100644 --- a/packages/insomnia-app/app/ui/components/sidebar/sidebar-filter.js +++ b/packages/insomnia-app/app/ui/components/sidebar/sidebar-filter.js @@ -62,7 +62,7 @@ class SidebarFilter extends React.PureComponent { const { filter } = this.props; return ( -
+
-
- - -
+
+
+ + +
- + +
{ + const { settings } = this.props; await plugins.getPlugins(true); templating.reload(); - themes.setThemes(); + themes.setTheme(settings.theme); console.log('[plugins] reloaded'); }); diff --git a/packages/insomnia-app/app/ui/css/components/dropdown.less b/packages/insomnia-app/app/ui/css/components/dropdown.less index 62fe5f716d..1269f490c3 100644 --- a/packages/insomnia-app/app/ui/css/components/dropdown.less +++ b/packages/insomnia-app/app/ui/css/components/dropdown.less @@ -25,8 +25,6 @@ } .dropdown__menu { - opacity: 0.96; - &.dropdown__menu--open .dropdown__backdrop { display: block; } @@ -69,7 +67,10 @@ input { margin: 0; padding: @padding-xs @padding-sm; + color: var(--color-font); } + + color: var(--hl); } &.dropdown__list--filtering { diff --git a/packages/insomnia-app/app/ui/css/components/sidebar.less b/packages/insomnia-app/app/ui/css/components/sidebar.less index a6ec199cd0..4fb1940d97 100644 --- a/packages/insomnia-app/app/ui/css/components/sidebar.less +++ b/packages/insomnia-app/app/ui/css/components/sidebar.less @@ -149,6 +149,11 @@ } } + .sidebar__top { + background: var(--color-bg); + color: var(--color-font); + } + &.sidebar--skinny .sidebar__filter { grid-template-columns: 100%; padding-right: @padding-sm; diff --git a/packages/insomnia-app/app/ui/css/components/tag.less b/packages/insomnia-app/app/ui/css/components/tag.less index 8e20bc5e02..88bab97218 100644 --- a/packages/insomnia-app/app/ui/css/components/tag.less +++ b/packages/insomnia-app/app/ui/css/components/tag.less @@ -11,7 +11,6 @@ background: @hl-sm; border: 1px solid rgba(0, 0, 0, 0.07); white-space: nowrap; - color: var(--hl); &:last-child { margin-right: 0; diff --git a/packages/insomnia-app/app/ui/css/components/themes.less b/packages/insomnia-app/app/ui/css/components/themes.less index 658565d4c1..e07b96d692 100644 --- a/packages/insomnia-app/app/ui/css/components/themes.less +++ b/packages/insomnia-app/app/ui/css/components/themes.less @@ -7,7 +7,7 @@ .themes__row { display: flex; flex-direction: row; - margin-bottom: @padding-md; + margin-bottom: @padding-lg; } .themes__theme { diff --git a/packages/insomnia-app/app/ui/css/components/tooltip.less b/packages/insomnia-app/app/ui/css/components/tooltip.less index 6a7179b95b..a9eb49b20c 100644 --- a/packages/insomnia-app/app/ui/css/components/tooltip.less +++ b/packages/insomnia-app/app/ui/css/components/tooltip.less @@ -3,11 +3,6 @@ .tooltip { position: relative; display: inline-block; - opacity: 0.8; - - &:hover { - opacity: 1; - } } .tooltip__bubble { diff --git a/packages/insomnia-app/app/ui/css/constants/colors.less b/packages/insomnia-app/app/ui/css/constants/colors.less index e3c0eb2cb3..a371c59f3e 100644 --- a/packages/insomnia-app/app/ui/css/constants/colors.less +++ b/packages/insomnia-app/app/ui/css/constants/colors.less @@ -19,8 +19,8 @@ --hl-xxs: rgba(130, 130, 130, 0.05); --hl-xs: rgba(130, 130, 130, 0.1); - --hl-sm: rgba(130, 130, 130, 0.2); - --hl-md: rgba(130, 130, 130, 0.3); + --hl-sm: rgba(130, 130, 130, 0.25); + --hl-md: rgba(130, 130, 130, 0.35); --hl-lg: rgba(130, 130, 130, 0.5); --hl-xl: rgba(130, 130, 130, 0.8); --hl: rgba(130, 130, 130, 1); diff --git a/packages/insomnia-app/app/ui/index.js b/packages/insomnia-app/app/ui/index.js index 7adda7e632..095d2115d2 100644 --- a/packages/insomnia-app/app/ui/index.js +++ b/packages/insomnia-app/app/ui/index.js @@ -12,14 +12,17 @@ import { init as initPlugins } from '../plugins'; import DNDBackend from './dnd-backend'; import './css/index.less'; import { isDevelopment } from '../common/constants'; -import { setThemes } from '../plugins/misc'; +import { setTheme } from '../plugins/misc'; // Handy little helper document.body.setAttribute('data-platform', process.platform); (async function() { - await setThemes(); await db.initClient(); + await initPlugins(); + + const settings = await models.settings.getOrCreate(); + await setTheme(settings.theme); // Create Redux store const store = await initStore(); @@ -48,7 +51,6 @@ document.body.setAttribute('data-platform', process.platform); // Do things that can wait process.nextTick(initSync); - process.nextTick(initPlugins); })(); // Export some useful things for dev diff --git a/plugins/insomnia-plugin-core-themes/themes/default.js b/plugins/insomnia-plugin-core-themes/themes/default.js index fe0404d9b8..ff0ee12401 100644 --- a/plugins/insomnia-plugin-core-themes/themes/default.js +++ b/plugins/insomnia-plugin-core-themes/themes/default.js @@ -65,9 +65,9 @@ module.exports = { success: '#75ba24', notice: '#d8c84d', warning: '#ec8702', - danger: '#ee5655', - surprise: '#a590ff', - info: '#22c1ee' + danger: '#e15251', + surprise: '#8776d5', + info: '#20aed9' } }, pane: { @@ -80,9 +80,6 @@ module.exports = { surprise: '{{ styles.sidebar.background.surprise }}', info: '{{ styles.sidebar.background.info }}' }, - foreground: { - default: 'e0e0e0' - }, highlight: { default: '#999' } diff --git a/plugins/insomnia-plugin-core-themes/themes/hyper.js b/plugins/insomnia-plugin-core-themes/themes/hyper.js index 47d0b98e01..ee72fe8400 100644 --- a/plugins/insomnia-plugin-core-themes/themes/hyper.js +++ b/plugins/insomnia-plugin-core-themes/themes/hyper.js @@ -3,7 +3,7 @@ module.exports = { displayName: 'Hyper', theme: { foreground: { - default: '#ccc' + default: '#ddd' }, background: { default: '#000', @@ -14,6 +14,11 @@ module.exports = { surprise: '#f24aff', info: '#23dce8' }, + rawCss: ` + .tooltip, .dropdown__menu { + opacity: 0.95; + } + `, styles: { dialog: { background: { @@ -25,6 +30,11 @@ module.exports = { default: 'rgba(0, 0, 0, 0.5)' } }, + sidebar: { + highlight: { + default: '#aaa' + } + }, paneHeader: { background: { default: '#000', diff --git a/plugins/insomnia-plugin-core-themes/themes/material.js b/plugins/insomnia-plugin-core-themes/themes/material.js index 145252e3bb..7434693619 100644 --- a/plugins/insomnia-plugin-core-themes/themes/material.js +++ b/plugins/insomnia-plugin-core-themes/themes/material.js @@ -29,6 +29,11 @@ module.exports = { lg: 'rgba(114, 145, 143, 0.6)', xl: 'rgba(114, 145, 143, 0.8)' }, + rawCss: ` + .tooltip, .dropdown__menu { + opacity: 0.95; + } + `, styles: { link: { foreground: { @@ -83,6 +88,11 @@ module.exports = { lg: 'rgba(114, 145, 143, 0.5)', xl: 'rgba(114, 145, 143, 0.7)' } + }, + transparentOverlay: { + background: { + default: 'rgba(37, 49, 55, 0.9)' + } } } } diff --git a/plugins/insomnia-plugin-core-themes/themes/one-dark.js b/plugins/insomnia-plugin-core-themes/themes/one-dark.js index aefe126397..833eff7b2e 100644 --- a/plugins/insomnia-plugin-core-themes/themes/one-dark.js +++ b/plugins/insomnia-plugin-core-themes/themes/one-dark.js @@ -5,7 +5,7 @@ module.exports = { background: { default: '#272c35', success: '#98c379', - notice: '#d19a66', + notice: '#e3a96c', warning: '#d19a66', danger: '#e06c75', surprise: '#c678dd', @@ -25,8 +25,8 @@ module.exports = { xxs: 'rgba(114, 121, 133, 0.05)', xs: 'rgba(114, 121, 133, 0.1)', sm: 'rgba(114, 121, 133, 0.2)', - md: 'rgba(114, 121, 133, 0.3)', - lg: 'rgba(114, 121, 133, 0.5)', + md: 'rgba(114, 121, 133, 0.4)', + lg: 'rgba(114, 121, 133, 0.6)', xl: 'rgba(114, 121, 133, 0.8)' }, styles: { @@ -37,7 +37,7 @@ module.exports = { }, dialog: { background: { - default: '#2b303a' + default: '#303640' } }, paneHeader: { diff --git a/plugins/insomnia-plugin-core-themes/themes/railscasts.js b/plugins/insomnia-plugin-core-themes/themes/railscasts.js index b1f1197a47..12ea08d349 100644 --- a/plugins/insomnia-plugin-core-themes/themes/railscasts.js +++ b/plugins/insomnia-plugin-core-themes/themes/railscasts.js @@ -10,7 +10,7 @@ module.exports = { success: '#a5c261', notice: '#ffc66d', warning: '#e48a37', - danger: '#dc4939', + danger: '#ee4b3b', surprise: '#b6b3eb', info: '#6d9cbe' }, diff --git a/plugins/insomnia-plugin-core-themes/themes/solarized-dark.js b/plugins/insomnia-plugin-core-themes/themes/solarized-dark.js index 2605b723fc..600839b1d6 100644 --- a/plugins/insomnia-plugin-core-themes/themes/solarized-dark.js +++ b/plugins/insomnia-plugin-core-themes/themes/solarized-dark.js @@ -12,7 +12,7 @@ module.exports = { info: '#2aa198' }, foreground: { - default: '#8ea0a2' + default: '#98aaac' }, highlight: { default: 'rgb(142, 149, 146)', diff --git a/plugins/insomnia-plugin-core-themes/themes/solarized-light.js b/plugins/insomnia-plugin-core-themes/themes/solarized-light.js index 8baeb89f4a..be3d2c1e81 100644 --- a/plugins/insomnia-plugin-core-themes/themes/solarized-light.js +++ b/plugins/insomnia-plugin-core-themes/themes/solarized-light.js @@ -12,7 +12,7 @@ module.exports = { info: '#2aa198' }, foreground: { - default: '#657b83' + default: '#586d75' }, highlight: { default: 'rgb(142, 149, 146)', diff --git a/plugins/insomnia-plugin-core-themes/themes/solarized.js b/plugins/insomnia-plugin-core-themes/themes/solarized.js index 4f7ee4f0b9..0a4a3355e6 100644 --- a/plugins/insomnia-plugin-core-themes/themes/solarized.js +++ b/plugins/insomnia-plugin-core-themes/themes/solarized.js @@ -12,7 +12,7 @@ module.exports = { info: '#2aa198' }, foreground: { - default: '#657b83' + default: '#556970' }, highlight: { default: 'rgb(142, 149, 146)', @@ -29,7 +29,7 @@ module.exports = { default: '#073642' }, foreground: { - default: '#8ea0a2' + default: '#9cafb1' } } }