Publish

 - insomnia-plugin-core-themes@1.0.1
 - insomnia-app@1.0.28

packages/insomnia-app/app/ui/components/base/dropdown/dropdown.js

@@ -242,6 +242,8 @@ class Dropdown extends PureComponent {
     if (!container) {
       container = document.createElement('div');
       container.id = 'dropdowns-container';
+      container.style.zIndex = '1000000';
+      container.style.position = 'relative';
       document.body.appendChild(container);
     }
 

packages/insomnia-app/app/ui/components/modals/settings-modal.js

@@ -18,7 +18,6 @@ import { Curl } from 'insomnia-libcurl';
 import { getAppName, getAppVersion } from '../../../common/constants';
 import * as session from '../../../sync/session';
 import Tooltip from '../tooltip';
-import { generateThemeCSS } from '../../../plugins/misc';
 
 export const TAB_INDEX_EXPORT = 1;
 export const TAB_INDEX_SHORTCUTS = 3;

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 = 5;
+const THEMES_PER_ROW = 4;
 
 type Props = {
   handleChangeTheme: string => void,

packages/insomnia-app/app/ui/components/tooltip.js

@@ -126,6 +126,8 @@ class Tooltip extends React.PureComponent<Props, State> {
     if (!container) {
       container = document.createElement('div');
       container.id = 'tooltips-container';
+      container.style.zIndex = '1000000';
+      container.style.position = 'relative';
 
       document.body && document.body.appendChild(container);
     }

packages/insomnia-app/app/ui/containers/app.js

@@ -68,7 +68,6 @@ import * as templating from '../../templating/index';
 import AskModal from '../components/modals/ask-modal';
 import { updateMimeType } from '../../models/request';
 import MoveRequestGroupModal from '../components/modals/move-request-group-modal';
-import { generateThemeCSS } from '../../plugins/misc';
 import * as themes from '../../plugins/misc';
 
 @autobind

packages/insomnia-app/app/ui/css/components/dropdown.less

@@ -11,7 +11,6 @@
   &:focus {
     outline: none;
   }
-
 }
 
 .dropdown__backdrop {
@@ -26,6 +25,8 @@
 }
 
 .dropdown__menu {
+  opacity: 0.96;
+
   &.dropdown__menu--open .dropdown__backdrop {
     display: block;
   }
@@ -165,4 +166,3 @@
     animation: fadeIn 200ms ease-out;
   }
 }
-

packages/insomnia-app/app/ui/css/components/themes.less

@@ -61,7 +61,6 @@
   button {
     position: relative;
     margin: 0 @padding-md;
-    opacity: 0.9;
     font-size: 0;
     border-radius: @radius-md;
     overflow: hidden;
@@ -72,7 +71,6 @@
     }
 
     &:hover {
-      opacity: 1;
       transform: scale(1.05);
     }
 
@@ -97,14 +95,5 @@
       bottom: 0;
       visibility: hidden;
     }
-
-    //&.themes__theme--locked:hover::after {
-    //  content: 'Upgrade to Plus';
-    //  visibility: visible;
-    //  font-size: @font-size-md;
-    //  transform: rotate(-15deg);
-    //  mix-blend-mode: exclusion;
-    //  opacity: 1;
-    //}
   }
 }

packages/insomnia-app/app/ui/css/constants/colors.less

@@ -3,12 +3,12 @@
   --color-bg: #fff;
   --color-font: #555;
 
-  --color-success: #59a210;
-  --color-notice: #ae9602;
-  --color-warning: #d07502;
-  --color-danger: #d04444;
-  --color-surprise: #7d69cb;
-  --color-info: #1c90b4;
+  --color-success: #50a500;
+  --color-notice: #b59e00;
+  --color-warning: #da7c02;
+  --color-danger: #d04845;
+  --color-surprise: #8570d2;
+  --color-info: #0092bf;
 
   --color-font-success: #fff;
   --color-font-notice: #fff;
@@ -26,7 +26,7 @@
   --hl: rgba(130, 130, 130, 1);
 
   .theme--transparent-overlay {
-    --color-bg: rgba(30, 30, 30, 0.8);
+    --color-bg: rgba(5, 5, 5, 0.7);
     --color-font: #ddd;
   }
 }

packages/insomnia-app/app/ui/css/editor/nunjucks-tag.less

@@ -19,13 +19,16 @@
       left: 0;
       height: 100%;
       width: 100%;
-      opacity: 0.7; // not so bright!
-      content: " ";
+      content: ' ';
       z-index: -1;
       border-radius: 0.2em;
       box-sizing: border-box;
       box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.4);
       transition: background-color 300ms;
+
+      // not so bright!
+      opacity: 0.8;
+      filter: grayscale(20%);
     }
 
     label {
@@ -61,14 +64,14 @@
       background: rgba(255, 255, 255, 0.1);
     }
 
-    &[data-error="on"] {
+    &[data-error='on'] {
       color: var(--color-font-danger);
       &::after {
         background: var(--color-danger);
       }
     }
 
-    &[data-ignore="on"]::after {
+    &[data-ignore='on']::after {
       background: var(--hl-xl);
       color: bar(--color-font);
     }

packages/insomnia-app/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.0.27",
+  "version": "1.0.28",
   "name": "insomnia-app",
   "app": {
     "name": "insomnia",
@@ -110,7 +110,7 @@
     "insomnia-importers": "^2.0.6",
     "insomnia-libcurl": "^0.0.10",
     "insomnia-plugin-base64": "^1.0.4",
-    "insomnia-plugin-core-themes": "^1.0.0",
+    "insomnia-plugin-core-themes": "^1.0.1",
     "insomnia-plugin-file": "^1.0.4",
     "insomnia-plugin-hash": "^1.0.4",
     "insomnia-plugin-jsonpath": "^1.0.4",

plugins/insomnia-plugin-core-themes/index.js

@@ -6,6 +6,7 @@ module.exports.themes = [
   require('./themes/one-light'),
   require('./themes/one-dark'),
   require('./themes/purple'),
+  require('./themes/hyper'),
   require('./themes/railscasts'),
   require('./themes/solarized-light'),
   require('./themes/solarized'),

plugins/insomnia-plugin-core-themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "insomnia-plugin-core-themes",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Gregory Schier <gschier1990@gmail.com>",
   "description": "Insomnia core themes",
   "license": "MIT",
@@ -13,7 +13,6 @@
     "name": "core-themes"
   },
   "scripts": {
-    "test": "jest --silent"
-  },
-  "dependencies": {}
+    "test": "node --version"
+  }
 }

plugins/insomnia-plugin-core-themes/themes/hyper.js

@@ -0,0 +1,41 @@
+module.exports = {
+  name: 'hyper',
+  displayName: 'Hyper',
+  theme: {
+    foreground: {
+      default: '#ccc'
+    },
+    background: {
+      default: '#000',
+      success: '#87ee59',
+      notice: '#f8d245',
+      warning: '#f9ac2a',
+      danger: '#ff505c',
+      surprise: '#ec48f9',
+      info: '#23dce8'
+    },
+    styles: {
+      dialog: {
+        background: {
+          default: '#111'
+        }
+      },
+      transparentOverlay: {
+        background: {
+          default: 'rgba(0, 0, 0, 0.5)'
+        }
+      },
+      paneHeader: {
+        background: {
+          default: '#000',
+          success: '#6ac04b',
+          notice: '#ebc742',
+          warning: '#ea9f29',
+          danger: '#df4b56',
+          surprise: '#d945e5',
+          info: '#20bec9'
+        }
+      }
+    }
+  }
+};

plugins/insomnia-plugin-core-themes/themes/simple-dark.js

@@ -27,7 +27,7 @@ module.exports = {
       },
       dialog: {
         background: {
-          default: '#282828'
+          default: '#2a2a2a'
         }
       }
     }

plugins/insomnia-plugin-core-themes/themes/simple-light.js

@@ -2,6 +2,15 @@ module.exports = {
   name: 'light',
   displayName: 'Simple Light',
   theme: {
-    styles: {}
+    styles: {
+      transparentOverlay: {
+        background: {
+          default: 'rgba(240, 240, 240, 0.8)'
+        },
+        foreground: {
+          default: '#555'
+        }
+      }
+    }
   }
 };