toasts and more

app/components/Sidebar.js

@@ -89,9 +89,10 @@ class Sidebar extends Component {
             <button onClick={(e) => addRequest(requestGroup.id)}>
               <i className="fa fa-plus-circle"></i>
             </button>
-            <RequestGroupActionsDropdown requestGroup={requestGroup}
-                                         right={true}
-                                         className="tall"/>
+            <RequestGroupActionsDropdown
+              requestGroup={requestGroup}
+              right={true}
+              className="tall"/>
           </div>
         </div>
         <ul>
@@ -140,7 +141,12 @@ class Sidebar extends Component {
           <h1><WorkspaceDropdown /></h1>
         </header>
         <div className="grid--v grid--start grid__cell">
-          <div className="stock-height form-control form-control--outlined">
+          <ul
+            className="grid--v grid--start grid__cell sidebar__scroll hover-scrollbars sidebar__request-list">
+            {this.renderRequestGroupRow(null)}
+            {requestGroups.map(requestGroup => this.renderRequestGroupRow(requestGroup))}
+          </ul>
+          <div className="form-control form-control--underlined">
             <DebouncingInput
               type="text"
               placeholder="Filter Requests"
@@ -148,11 +154,6 @@ class Sidebar extends Component {
               value={activeFilter}
               onChange={this.onFilterChange.bind(this)}/>
           </div>
-          <ul
-            className="grid--v grid--start grid__cell sidebar__scroll hover-scrollbars sidebar__request-list">
-            {this.renderRequestGroupRow(null)}
-            {requestGroups.map(requestGroup => this.renderRequestGroupRow(requestGroup))}
-          </ul>
         </div>
       </aside>
     )

app/components/dropdowns/RequestGroupActionsDropdown.js

@@ -15,11 +15,6 @@ class RequestGroupActionsDropdown extends Component {
           <i className="fa fa-caret-down"></i>
         </button>
         <ul>
-          <li>
-            <button onClick={e => actions.duplicateRequest(requestGroup, requestGroupId)}>
-              <i className="fa fa-copy"></i> Duplicate
-            </button>
-          </li>
           <li>
             <button onClick={e => actions.showRequestGroupUpdateNamePrompt(requestGroup)}>
               <i className="fa fa-edit"></i> Rename

app/components/modals/ModalContainer.js

@@ -71,6 +71,14 @@ class Modals extends Component {
             return isVisible ? modal : null;
           })}
         </div>
+        <div ref="toasts">
+          {/*<div className="toast grid">
+            <div className="toast__message">Request deleted</div>
+            <button className="btn toast__action">
+              Undo
+            </button>
+          </div> */}
+        </div>
       </div>
     );
   }

app/constants/global.js

@@ -1,6 +1,7 @@
 // Global
 export const LOCALSTORAGE_DEBOUNCE_MILLIS = 500;
 export const LOCALSTORAGE_KEY = 'insomnia';
+export const DEFAULT_FONT_SIZE = '12px';
 
 // HTTP Methods
 export const METHOD_GET = 'GET';

app/containers/App.js

@@ -16,6 +16,8 @@ import * as RequestGroupActions from '../actions/requestGroups'
 import * as RequestActions from '../actions/requests'
 import * as ResponseActions from '../actions/responses'
 
+import {DEFAULT_FONT_SIZE} from '../constants/global';
+
 // Don't inject component styles (use our own)
 Tabs.setUseDefaultStyles(false);
 
@@ -123,13 +125,33 @@ class App extends Component {
     )
   }
 
+  componentDidMount () {
+    document.documentElement.style.fontSize = DEFAULT_FONT_SIZE;
+  }
+
+  _keyDown (e) {
+    if (e.metaKey) {
+      if (e.keyCode === 189) { // MINUS
+        let fontSize = parseFloat(document.documentElement.style.fontSize);
+        document.documentElement.style.fontSize = `${fontSize - 0.5}px`;
+      } else if (e.keyCode === 187) { // EQUALS
+        let fontSize = parseFloat(document.documentElement.style.fontSize);
+        document.documentElement.style.fontSize = `${fontSize + 0.5}px`;
+      } else if (e.keyCode === 48) { // ZERO
+        document.documentElement.style.fontSize = DEFAULT_FONT_SIZE;
+      } else {
+        // console.log('CTRL + ' + e.keyCode);
+      }
+    }
+  }
+
   render () {
     const {actions, requests, responses, requestGroups, prompt, tabs} = this.props;
     const activeRequest = requests.all.find(r => r.id === requests.active);
     const activeResponse = responses[activeRequest && activeRequest.id];
 
     return (
-      <div className="grid bg-super-dark tall">
+      <div className="grid bg-super-dark tall" onKeyDown={this._keyDown.bind(this)}>
         <Modals />
         <Sidebar
           activateRequest={actions.activateRequest}

app/css/components/dropdown.scss

@@ -11,29 +11,20 @@
     left: 0;
     display: none;
     z-index: 100;
-    width: 180px;
+    min-width: $dropdown-min-width;
     box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
-    padding-top: 4px;
-    padding-bottom: 4px;
 
     li {
       background: $bg-super-light;
-      //border: 1px solid $hl;
-      border-bottom-width: 0;
-      border-top-width: 0;
 
       &:first-child {
         border-top-left-radius: $radius-md;
         border-top-right-radius: $radius-md;
-        padding-top: 2px;
-        border-top-width: 1px;
       }
 
       &:last-child {
         border-bottom-left-radius: $radius-md;
         border-bottom-right-radius: $radius-md;
-        padding-bottom: 2px;
-        border-bottom-width: 1px;
       }
 
       & > button {

app/css/components/header.scss

@@ -2,7 +2,6 @@
 
 .header {
   height: $line-height-md;
-  line-height: $line-height-md;
   flex-shrink: 0;
 
   .header__content {

app/css/components/toast.scss

@@ -0,0 +1,31 @@
+@import '../constants/dimensions';
+@import '../constants/colors';
+
+.toast {
+  position: absolute;
+  z-index: 100;
+  bottom: $padding-md;
+  right: $padding-md;
+  background: $bg-light;
+  color: $font-light-bg;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
+
+  .toast__message,
+  .toast__action {
+    padding: $padding-sm $padding-md;
+    height: auto;
+  }
+
+  .toast__message {
+    border-right: 1px solid $hl-md;
+  }
+
+  .toast__action {
+    color: $font-light-bg;
+
+    &:hover {
+      color: $font-super-light-bg;
+      background: rgba(0, 0, 0, 0.05);
+    }
+  }
+}

app/css/constants/colors.scss

@@ -7,7 +7,8 @@ $bg-super-dark: #292a26;
 $color-brand: #7D70CC;
 
 /* Font Colors */
-$font-light-bg: #555;
+$font-light-bg: #444;
+$font-super-light-bg: #555;
 $font-dark-bg: #ddd;
 $font-super-dark-bg: #c8c8c8;
 $font-primary-bg: #eee;
@@ -84,6 +85,6 @@ $info: #52adc1;
 .bg-super-light {
   background: $bg-super-light;
   &, a, textarea, input, button {
-    color: $font-light-bg;
+    color: $font-super-light-bg;
   }
 }

app/css/constants/dimensions.scss

@@ -20,11 +20,14 @@ $line-height-md: 4rem;
 $line-height-sm: $line-height-md * 0.75;
 
 /* Sidebar */
-$sidebar-width: 20rem;
+$sidebar-width: 19rem;
 
 /* Borders */
-$radius-sm: 1px;
-$radius-md: 2px;
+$radius-sm: 0.1rem;
+$radius-md: 0.2rem;
+
+/* Dropdowns */
+$dropdown-min-width: 15rem;
 
 /* Modals */
 $modal-width: 50rem;

app/css/index.scss

@@ -21,3 +21,4 @@
 @import 'components/scrollbars';
 @import 'components/dropdown';
 @import 'components/modal';
+@import 'components/toast';

app/css/layout/base.scss

@@ -3,7 +3,6 @@
 
 html {
   font-family: 'Open Sans', sans-serif;
-  font-size: $font-size;
 }
 
 html, body, #root {
@@ -94,10 +93,6 @@ i.fa {
   }
 }
 
-.stock-height {
-  height: $line-height-md;
-}
-
 .section:not(:last-child) {
   .section__header {
 

app/css/layout/sidebar.scss

@@ -56,6 +56,10 @@
     width: 100%;
     position: relative;
 
+    .tag {
+      padding-left: 0;
+    }
+
     &.sidebar__item--active {
       color: $font-dark-bg;
 
@@ -90,11 +94,15 @@
     border-top: 0;
   }
 
-  ul ul .sidebar__item__row > button {
+  ul .sidebar__item__row > button {
     padding-left: $padding-md !important;
   }
 
-  ul ul ul .sidebar__item__row > button {
+  ul ul .sidebar__item__row > button {
     padding-left: $padding-md * 2 !important;
   }
+
+  ul ul ul .sidebar__item__row > button {
+    padding-left: $padding-md * 3 !important;
+  }
 }

app/css/reset.scss

@@ -18,7 +18,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 }
 
 body {
-  line-height: 1;
+  line-height: normal;
 }
 
 ol, ul {
@@ -44,4 +44,4 @@ q {
 table {
   border-collapse: collapse;
   border-spacing: 0;
-}
+}