feat: scss architecture.

client/src/components/MenuItem.js

@@ -0,0 +1,260 @@
+/*
+ * Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import classNames from "classnames";
+import React, {useState} from "react";
+
+// import {
+  // ,
+  //  } from "@bluprintjs/core/src/components/common";
+// import { DISPLAYNAME_PREFIX } from "../../common/props";
+import {
+  Icon,
+  Popover,
+  PopoverInteractionKind,
+  Text,
+  Menu,
+  Classes, Position,
+  AbstractPureComponent2,
+  DISPLAYNAME_PREFIX,
+  Collapse
+} from "@blueprintjs/core";
+
+// export interface IMenuItemProps extends IActionProps, ILinkProps {
+//     // override from IActionProps to make it required
+//     /** Item text, required for usability. */
+//     text: React.ReactNode;
+
+//     /** Whether this menu item should appear with an active state. */
+//     active?: boolean;
+//     /**
+//      * Children of this component will be rendered in a __submenu__ that appears when hovering or
+//      * clicking on this menu item.
+//      *
+//      * Use `text` prop for the content of the menu item itself.
+//      */
+//     children?: React.ReactNode;
+
+//     /**
+//      * Whether this menu item is non-interactive. Enabling this prop will ignore `href`, `tabIndex`,
+//      * and mouse event handlers (in particular click, down, enter, leave).
+//      */
+//     disabled?: boolean;
+
+//     /**
+//      * Right-aligned label text content, useful for displaying hotkeys.
+//      *
+//      * This prop actually supports JSX elements, but TypeScript will throw an error because
+//      * `HTMLAttributes` only allows strings. Use `labelElement` to supply a JSX element in TypeScript.
+//      */
+//     label?: string;
+
+//     /**
+//      * A space-delimited list of class names to pass along to the right-aligned label wrapper element.
+//      */
+//     labelClassName?: string;
+
+//     /**
+//      * Right-aligned label content, useful for displaying hotkeys.
+//      */
+//     labelElement?: React.ReactNode;
+
+//     /**
+//      * Whether the text should be allowed to wrap to multiple lines.
+//      * If `false`, text will be truncated with an ellipsis when it reaches `max-width`.
+//      * @default false
+//      */
+//     multiline?: boolean;
+
+//     /**
+//      * Props to spread to `Popover`. Note that `content` and `minimal` cannot be
+//      * changed and `usePortal` defaults to `false` so all submenus will live in
+//      * the same container.
+//      */
+//     popoverProps?: Partial<IPopoverProps>;
+
+//     /**
+//      * Whether an enabled item without a submenu should automatically close its parent popover when clicked.
+//      * @default true
+//      */
+//     shouldDismissPopover?: boolean;
+
+//     /**
+//      * Name of the HTML tag that wraps the MenuItem.
+//      * @default "a"
+//      */
+//     tagName?: keyof JSX.IntrinsicElements;
+
+//     /**
+//      * A space-delimited list of class names to pass along to the text wrapper element.
+//      */
+//     textClassName?: string;
+// }
+
+export default class MenuItem extends AbstractPureComponent2 {
+    static get defaultProps() {
+      return {
+        disabled: false,
+        multiline: false,
+        popoverProps: {},
+        shouldDismissPopover: true,
+        text: "",
+        dropdownType: 'popover',
+      };
+    };
+    static get displayName() {
+      return `${DISPLAYNAME_PREFIX}.MenuItem`;
+    }
+    
+    constructor(props) {
+        super(props);
+        this.state = {
+          isCollapseActive: false,
+        };
+      }
+
+    render() {
+        const {
+            active,
+            className,
+            children,
+            disabled,
+            icon,
+            intent,
+            labelClassName,
+            labelElement,
+            multiline,
+            popoverProps,
+            shouldDismissPopover,
+            text,
+            textClassName,
+            tagName = "a",
+            dropdownType,
+            ...htmlProps
+        } = this.props;
+        const hasSubmenu = children != null;
+
+        const intentClass = Classes.intentClass(intent);
+        const anchorClasses = classNames(
+            Classes.MENU_ITEM,
+            intentClass,
+            {
+                [Classes.ACTIVE]: active,
+                [Classes.INTENT_PRIMARY]: active && intentClass == null,
+                [Classes.DISABLED]: disabled,
+                // prevent popover from closing when clicking on submenu trigger or disabled item
+                [Classes.POPOVER_DISMISS]: shouldDismissPopover && !disabled && !hasSubmenu,
+            },
+            className,
+        );
+ 
+        const handleAnchorClick = () => {
+          if (dropdownType === 'collapse') {
+            this.setState({ isCollapseActive: !this.state.isCollapseActive });
+          }          
+        };
+        const target = React.createElement(
+            tagName,
+            {
+                ...htmlProps,
+                ...(disabled ? DISABLED_PROPS : {}),
+                className: anchorClasses,
+                onClick: handleAnchorClick,
+            },
+            <Icon icon={icon} />,
+            <Text className={classNames(Classes.FILL, textClassName)} ellipsize={!multiline}>
+                {text}
+            </Text>,
+            this.maybeRenderLabel(labelElement),
+            hasSubmenu ? <Icon icon="caret-right" /> : undefined,
+        );
+
+        const liClasses = classNames({ [Classes.MENU_SUBMENU]: hasSubmenu });
+        return <li className={liClasses}>{
+          (dropdownType === 'collapse') ?
+            this.maybeRenderCollapse(target, children) :
+            this.maybeRenderPopover(target, children)
+        }</li>;
+    }
+
+    maybeRenderLabel(labelElement) {
+        const { label, labelClassName } = this.props;
+        if (label == null && labelElement == null) {
+            return null;
+        }
+        return (
+            <span className={classNames(Classes.MENU_ITEM_LABEL, labelClassName)}>
+                {label}
+                {labelElement}
+            </span>
+        );
+    }
+
+    maybeRenderCollapse(target, children) {
+      if (children == null) {
+        return target;
+      }
+      return (
+        <>
+          {target}
+          <Collapse isOpen={this.state.isCollapseActive}>{ children }</Collapse>
+        </>
+       );
+    }
+
+    maybeRenderPopover(target, children) {
+        if (children == null) {
+            return target;
+        }
+        const { disabled, popoverProps } = this.props;
+        return (
+            <Popover
+                autoFocus={false}
+                captureDismiss={false}
+                disabled={disabled}
+                enforceFocus={false}
+                hoverCloseDelay={0}
+                interactionKind={PopoverInteractionKind.HOVER}
+                modifiers={SUBMENU_POPOVER_MODIFIERS}
+                position={Position.RIGHT_TOP}
+                usePortal={false}
+                {...popoverProps}
+                content={<Menu>{children}</Menu>}
+                minimal={true}
+                popoverClassName={classNames(Classes.MENU_SUBMENU, popoverProps.popoverClassName)}
+                target={target}
+            />
+        );
+    }
+}
+
+const SUBMENU_POPOVER_MODIFIERS =  {
+    // 20px padding - scrollbar width + a bit
+    flip: { boundariesElement: "viewport", padding: 20 },
+    // shift popover up 5px so MenuItems align
+    offset: { offset: -5 },
+    preventOverflow: { boundariesElement: "viewport", padding: 20 },
+};
+
+// props to ignore when disabled
+const DISABLED_PROPS = {
+    href: undefined,
+    onClick: undefined,
+    onMouseDown: undefined,
+    onMouseEnter: undefined,
+    onMouseLeave: undefined,
+    tabIndex: -1,
+};

client/src/components/Sidebar/SidebarMenu.js

@@ -1,23 +1,37 @@
-import React from 'react';
+import React, { useState } from 'react';
-import {Menu, MenuItem, MenuDivider} from "@blueprintjs/core";
+import {Menu, MenuDivider, Collapse} from "@blueprintjs/core";
 import {useHistory} from 'react-router-dom';
 import sidebarMenuList from 'config/sidebarMenu';
 import Icon from 'components/Icon';
+import MenuItem from 'components/MenuItem';
 
 export default function SidebarMenu() {
   let history = useHistory();
 
-  const items = sidebarMenuList.map((item) => 
+  const menuItemsMapper = (list) => {
-    (item.divider) ? 
+    return list.map((item, index) => {
-      <MenuDivider
+      const children = Array.isArray(item.children) ? menuItemsMapper(item.children) : null;
-        title={item.title} /> : 
+
-      <MenuItem
+      return (
-        icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
+        (item.divider) ? 
-        text={item.text}
+          <MenuDivider
-        label={item.label}
+            title={item.title} /> : 
-        disabled={item.disabled}
+          <MenuItem
-        onClick={() => { history.push(item.href); }} />
+            icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
-  );
+            text={item.text}
+            label={item.label}
+            disabled={item.disabled}
+            children={children}
+            dropdownType={item.dropdownType || 'collapse'}
+            onClick={() => {
+              history.push(item.href);
+            }} />
+      );
+    });
+  };
+
+  const items = menuItemsMapper(sidebarMenuList);
+  
   return (
     <Menu className="sidebar-menu">
       {items}

client/src/config/sidebarMenu.js

@@ -4,13 +4,6 @@ export default [
   {
     divider: true,
   },
-  {
-    icon: 'homepage',
-    iconSize: 20,
-    text: 'Items List',
-    disabled: false,
-    href: '/dashboard/items/list',
-  },
   {
     icon: 'homepage',
     iconSize: 20,
@@ -21,6 +14,24 @@ export default [
   {
     divider: true,
   },
+  {
+    icon: 'homepage',
+    iconSize: 20,
+    text: 'Items',
+    children: [
+      {
+        text: 'Items List',
+        href: '/dashboard/accounts',
+      },
+      {
+        text: 'New Item',
+        href: '/dashboard/accounts',
+      },
+    ]
+  },
+  {
+    divider: true,
+  },
   {
     icon: 'balance-scale',
     iconSize: 20,
@@ -28,26 +39,12 @@ export default [
     href: '/dashboard/accounts',
     children: [
       {
-        text: 'cut',
+        text: 'Accounts Chart',
-        label: '⌘C',
+        href: '/dashboard/accounts',
-        disabled: false,
-      },
-
-      {
-        text: 'cut',
-        label: '⌘C',
-        disabled: false,
       },
       {
-        text: 'cut',
+        text: 'Make Journal',
-        label: '⌘C',
+        href: '/dashboard/accounting/make-journal-entry'
-        disabled: false,
-      },
-
-      {
-        text: 'cut',
-        label: '⌘C',
-        disabled: false,
       },
     ]
   },
@@ -57,12 +54,7 @@ export default [
     text: 'Banking',
     href: '/dashboard/accounts',
     children: [
-      {
+      
-        icon: 'cut',
-        text: 'cut',
-        label: '⌘C',
-        disabled: false,
-      }
     ]
   },
   {
@@ -71,12 +63,7 @@ export default [
     text: 'Sales',
     href: '/dashboard/accounts',
     children: [
-      {
+     
-        icon: 'cut',
-        text: 'cut',
-        label: '⌘C',
-        disabled: false,
-      }
     ]
   },
   {
@@ -100,36 +87,41 @@ export default [
     href: '/dashboard/accounts',
     children: [
       {
-        icon: 'cut',
+        text: 'Balance Sheet',
-        text: 'cut',
+        href: '/dashboard/accounting/balance-sheet',
-        label: '⌘C',
+      },
-        disabled: false,
+      {
-      }
+        text: 'Trial Balance Sheet',
+        href: '/dashboard/accounting/trial-balance-sheet',
+      },
+      {
+        text: 'Journal',
+        href: '/dashboard/accounting/journal-sheet',
+      },
+      {
+        text: 'General Ledger',
+        href: '/dashboard/accounting/general-ledger',
+      },
+      {
+        text: 'Profit Loss Sheet',
+        href: '/dashboard/accounting/profit-loss-sheet',
+      },
     ]
   },
   {
     text: 'Expenses',
-    href: '/dashboard/expenses',
+    icon: 'receipt',
-  },
+    iconSize: 18,
-  {
+    children: [
-    text: 'New Expenses',
+      {
-    href: '/dashboard/expenses/new',
+        text: 'Expenses List',
-  },
+        href: '/dashboard/expenses',
-  {
+      },
-    text: 'Make Journal',
+      {
-    href: '/dashboard/accounting/make-journal-entry'
+        text: 'New Expenses',
-  },
+        href: '/dashboard/expenses/new',
-  {
+      },
-    text: 'Balance Sheet',
+    ]
-    href: '/dashboard/accounting/balance-sheet',
-  },
-  {
-    text: 'Trial Balance Sheet',
-    href: '/dashboard/accounting/trial-balance-sheet',
-  },
-  {
-    text: 'Journal',
-    href: '/dashboard/accounting/journal-sheet',
   },
   {
     divider: true,

client/src/static/json/icons.js

@@ -62,5 +62,9 @@ export default {
   "filter": {
     path: ['M91,32.1H8c-2.5,0-4.6-2.1-4.6-4.6s2.1-4.6,4.6-4.6H91c2.5,0,4.6,2.1,4.6,4.6S93.5,32.1,91,32.1z M21.9,45.9  h55.3c2.5,0,4.6,2.1,4.6,4.6c0,2.5-2.1,4.6-4.6,4.6H21.9c-2.5,0-4.6-2.1-4.6-4.6C17.2,48,19.3,45.9,21.9,45.9z M35.7,68.9h27.6  c2.5,0,4.6,2.1,4.6,4.6s-2.1,4.6-4.6,4.6H35.7c-2.5,0-4.6-2.1-4.6-4.6S33.1,68.9,35.7,68.9z'],
     viewBox: '0 0 91 91',
+  },
+  "receipt": {
+    path: ['M344 288H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zM400.8 5.7L357.3 37 318.7 9.2c-16.8-12.1-39.2-12.1-56.1 0L224 37 185.4 9.2a47.888 47.888 0 0 0-56.1 0L90.7 37 47.2 5.7C27.4-8.5 0 5.6 0 29.9v452.3c0 23.8 27.1 38.6 47.2 24.2L90.7 475l38.6 27.8c16.8 12.1 39.2 12.1 56.1 0L224 475l38.6 27.8c16.8 12.1 39.3 12.1 56.1 0l38.6-27.8 43.5 31.3c19.8 14.2 47.2.1 47.2-24.1V29.9C448 6 420.9-8.7 400.8 5.7zm-.8 440.8l-42.7-30.7-66.7 48-66.7-48-66.7 48-66.7-48L48 446.5v-381l42.7 30.7 66.7-48 66.7 48 66.7-48 66.7 48L400 65.5v381zM344 176H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zz'],
+    viewBox: '0 0 448 512',
   }
 }

client/src/style/App.scss

@@ -9,851 +9,34 @@ $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02), 0 2px 4px rgba(16, 22,
 $menu-item-color-hover: $light-gray4;
 $menu-item-color-active: $light-gray3;
 
-
 // Blueprint framework.
 @import "@blueprintjs/core/src/blueprint.scss";
-@import "@blueprintjs/table/src/table.scss";
 @import "@blueprintjs/datetime/src/blueprint-datetime.scss";
 
 @import "basscss";
 
-
-@import "pages/authentication.scss";
-
 $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
 
+// Objects
+@import "objects/form";
+@import "objects/typography";
 
-// Breadcrumbs component.
+// Components
-.#{$ns}-breadcrumbs-collapsed{
+@import "components/data-table";
-  background: $light-gray3;
+@import "components/dialog";
 
-  &:hover{
+// Pages
-    background: $light-gray2;
+@import "pages/dashboard";
-  }
+@import "pages/accounts-chart";
-}
+@import "pages/authentication";
+@import "pages/expense-form";
+@import "pages/financial-statements";
+@import "pages/make-journal-entries";
+@import "pages/preferences";
+@import "pages/view-form";
 
-// Tabs component.
+// Views
-.#{$ns}-tab-indicator-wrapper .#{$ns}-tab-indicator{
+@import "views/filter-dropdown";
-  height: 2px;
+@import "views/sidebar";
-}
-.#{$ns}-large > .#{$ns}-tab{
-  line-height: 50px;
-  font-size: 15px;
-}
 
-.dashboard{
-  display: flex;
-  height: 100vh;
- 
-  &__topbar{
-    width: 100%;
-    height: 80px;
-    display: flex;
-    justify-content: space-between;
-    border-bottom: 1px solid #F2EFEF;
 
-    &-right,
-    &-left{
-      display: flex;
-    }
-    &-actions{
-      
-    }
-    &-sidebar-toggle{
-      display: flex;
-      align-items: center;
-      margin-left: 4px;
-
-      .#{$ns}-button{
-        color: #8E8E8E;
-
-        &,
-        &:hover,
-        &:focus{
-          border-radius: 0;
-          box-shadow: none;
-          background-color: transparent;
-          border: 0;
-        }
-      }
-    }
-
-    &-navbar{
-      display: flex;
-      align-items: center;
-      margin-right: 18px;
-
-      .#{$ns}-button{
-        color: #1552C8;
-        font-weight: 5000;
-        font-size: 14px;
-
-        &:hover,
-        &:focus{
-          background-color: rgba(178, 220, 253, 0.15);
-        }
-        .#{$ns}-icon{
-          color: #1552C8;
-        }
-      }
-    }
-
-    &-user{
-      display: flex;
-      align-items: center;
-      margin-right: 28px;
-
-      .#{$ns}-button{
-        background-size: contain;
-        border-radius: 50%;
-        height: 40px;
-        width: 40px;
-        
-        &,
-        &:hover,
-        &:focus{
-          background-color: transparent;
-          border: 0;
-          box-shadow: none;
-          background-image: url(http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=400);
-        }
-      }
-    }
-  }
-
-  &__breadcrumbs{
-    display: flex;
-    margin-left: 16px;
-    align-items: center;
-  }
-
-  &__actions-bar{
-    border-bottom: 2px solid #EAEAEA;
-
-    .#{$ns}-navbar{
-      box-shadow: none;
-
-      &,
-      &-group{
-        height: 44px;
-      }
-
-      .#{$ns}-navbar-divider{
-        margin-left: 0;
-        margin-right: 0;
-      }
-      .#{$ns}-button{
-        color: #5C5C5C;
-        padding: 8px 12px;
-
-        &:hover{
-          background: rgba(167, 182, 194, 0.12);
-          color: #5C5C5C;
-        }
-        .#{$ns}-icon{
-          color: #666;
-          margin-right: 7px;
-        }
-      }
-
-      .button--table-views{
-        .#{$ns}-icon{
-          color: #1183DA;
-        }
-      }
-    }
-  }
-
-  &__breadcrumbs{
-    display: flex;
-    align-items: center;
-    margin-left: 1rem;
-  }
-  &__title{
-    align-items: center;;
-    display: flex;
-    margin-left: 6px;
-
-    h1{
-      font-size: 26px;
-      font-weight: 100;
-      margin: 0;
-    }
-
-    .sep{
-      margin-left: 12px;
-      margin-right: 12px;
-      color: #999;
-      border-left: 1px solid #d9d9d9;
-      width: 1px;
-      height: 25px;
-    }
-
-    h3{
-      font-size: 16px;
-      font-weight: 300;
-      color: #777;
-      margin: 0;
-    }
-  }
-
-  &-content{
-    width: calc(100% - 220px);
-    display: flex;
-    flex-direction: column;
-
-    
-  }
-
-  &__insider{
-    height: 100%;
-    
-    &--loading{
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  &__page-content{
-    // padding: 22px;
-  }
-
-  &__preferences-topbar{
-    border-bottom: 1px solid #E5E5E5;
-    height: 70px;
-    padding: 0 22px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-
-    h2{
-      font-size: 22px;
-      font-weight: 200;
-      margin: 0;
-    }
-  }
-}
-
-$sidebar-background: #01194E;
-$sidebar-text-color: #fff;
-$sidebar-width: 220px;
-$sidebar-menu-item-color: #E9EBF7;
-
-$sidebar-popover-submenu-bg: rgb(1, 20, 62);
-
-.sidebar{
-  background: $sidebar-background;
-  color: $sidebar-text-color;
-  width: $sidebar-width;
-
-  &__head{
-    padding: 16px 10px;
-   
-    &-company-meta{
-
-      .company-name{
-        font-size: 16px;
-        font-weight: 200;
-        margin-bottom: 5px;
-      }
-      .company-meta{
-        color: #A7AFC2;
-        font-size: 12px;
-      }
-    }
-  }
-
-  &-menu{
-    background: transparent;
-    padding: 0;
-    min-width: $sidebar-width;
-    border-radius: 0;
-
-    .#{$ns}-menu-item{
-      color: $sidebar-menu-item-color;
-      border-radius: 0;
-      padding: 10px 16px;
-      font-size: 15px;
-      font-weight: 200;
-
-      &:hover{
-        background: #012470;
-      }
-      &:focus,
-      &:active{
-       background: #01143e;
-      }
-
-      > .#{$ns}-icon{
-        color: #767B9B;
-        margin-right: 12px;
-        margin-top: 0;
-      }
-
-      > .#{$ns}-icon-caret-right{
-        margin-right: -2px;
-        margin-top: 2px;
-        color: #767B9B;
-      }
-    }
-
-    .#{$ns}-submenu{
-
-      .#{$ns}-menu{
-        padding: 10px 0;
-        margin: 0;
-        background: $sidebar-popover-submenu-bg;
-        border-radius: 0;
-
-        &-item{
-          padding-top: 7px;
-          padding-bottom: 7px;
-          padding-left: 16px;
-          padding-right: 16px;
-          font-size: 14px;
-
-          &,
-          &:hover,
-          &:active,
-          &:focus{
-            color: #fff;
-            background: transparent;
-          }
-        }
-      }
-
-      .#{$ns}-popover{
-        padding: 0;
-
-        &-content{
-          box-shadow: 0 0 0;
-        }
-      }
-    }
-    .#{$ns}-popover-target.#{$ns}-popover-open .#{$ns}-menu-item{
-      color: $sidebar-menu-item-color;
-    }
-    .#{$ns}-menu-divider{
-      border-top-color: #183C86;
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-}
-.navbar--dashboard-views{
-  box-shadow: 0 0 0;
-  border-bottom: 1px solid #EAEAEA;
-}
-
-.tabs--dashboard-views{
-
-  .#{$ns}-tab{
-    color: #5C5C5C;
-    font-size: 14px;
-    line-height: 50px;
-    font-weight: 400;
-    padding: 0 14px;
-    margin-right: 0;
-  }
-
-  .#{$ns}-tab-indicator-wrapper{
-    .#{$ns}-tab-indicator{
-      height: 2px;
-    }
-  }
-
-  .button--new-view{
-    margin: 0;
-    height: 50px;
-
-    &,
-    &:hover,
-    &:active,
-    &:focus{
-      background: transparent;
-      border: 0;
-      box-shadow: 0 0 0;
-    }
-
-    .#{$ns}-icon{
-      color: #A7A7A7;
-    }
-  }
-}
-
-
-// Dialog
-.#{$ns}-dialog{
-  background: #fff;
-
-  &-header{
-    background: #ebf1f5;
-  }
-}
-
-// Form
-label{
-  font-weight: 400;
-}
-
-.#{$ns}-input{
-  box-shadow: 0 0 0 0 rgba(19, 124, 189, 0),
-    0 0 0 0 rgba(19, 124, 189, 0),
-    inset 0 0 0 1px rgba(16, 22, 26, 0.1),
-    inset 0 1px 1px rgba(16, 22, 26, 0.15);
-}
-
-.#{$ns}-heading{
-  font-weight: 300;
-}
-
-// Dialog Account Form.
-.dialog--account-form{
-  
-  .#{$ns}-form-group{
-    .#{$ns}-label{
-      width: 130px;
-    }
-  }
-}
-
-.divider{
-  border-top: 1px solid #e8e8e8;
-  height: 1px;
-}
-
-.view-form{
-
-  &--name-section{
-    padding: 35px 28px;
-    background: #fbfafa;
-    margin-bottom: 22px;
-
-    .bp3-form-group.bp3-inline{
-      margin-bottom: 0;
-    }
-  }
-
-  &--logic-expression-section{
-    padding: 20px 25px;
-    margin: 1rem -25px 1.5rem;
-    background: #fbfafa;
-
-    .#{$ns}-form-group{
-      margin-bottom: 0;
-    }
-  }
-
-  .condition-number{
-    color: #666;
-  }
-
-  .#{$ns}-form-group.#{$ns}-inline{
-
-    .#{$ns}-label{
-      width: 200px;
-    }
-
-    .#{$ns}-form-content{
-      width: 100%;
-    }
-  }
-
-  .new-conditional-btn{
- 
-  }
-
-  .dragable-columns{
-
-    &__items{
-      border: 1px solid #e1e1e1;
-      padding: 10px 8px;
-      height: 300px;
-      overflow: auto;
-    }
-
-    &__title{
-      color: #666;
-    }
-  }
-
-  .dragable-columns{
-    &__column{
-
-      .bp3-input-group .bp3-input{
-        border-radius: 3px 3px 0 0;
-      }
-
-    }
-    
-
-    &__arrows{
-      text-align: center;
-      margin-top: 140px;
-    }
-  }
-
-  .dragable-resource-columns{
-    
-  }
-
-  &__role-conditional{
-    margin-top: 1rem;
-  }
-
-
-}
-
-.preferences{
-  &__inside-content--tabable{
-    margin-left: -25px;
-    margin-right: -25px;
-  }
-
-  &__inside-content{
-
-    .#{$ns}-tab-list{
-      border-bottom: 1px solid #E5E5E5;
-      padding-left: 15px;
-
-      .#{$ns}-tab{
-        font-weight: 300;
-      }
-    }
-  }
-
-  
-}
-
-.preferences__sidebar{
-  background: #fdfdfd;
-  min-width: 210px;
-  max-width: 210px;
-  
-  &-head{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border-bottom: 1px solid #E5E5E5;
-    height: 70px;
-    padding: 0 22px;
-
-    h2{
-      font-size: 22px;
-      font-weight: 200;
-      margin: 0;
-    }
-  }
-
-  &-menu{
-    padding: 0;
-    background: transparent;
-
-    .#{$ns}-menu-item{
-      padding: 10px 18px;
-      font-size: 15px;
-      font-weight: 300;
-      color: #333;
-    }
-  }
-}
-
-#root{
-  // Essential JS 2 Datatable.
-  .e-grid{
-    border-left: 0;
-    border-right: 0;
-
-    .e-headercell,
-    .e-detailheadercell{
-      background-color: #F8FAFA;
-      height: 48px;
-      line-height: 48px;
-    }
-    .e-headercelldiv{
-      font-size: 14px;
-      color: #666;
-    }
-    .e-rowcell{
-      padding-top: 10px;
-      padding-bottom: 10px;
-      font-size: 14px;
-    }
-    .e-rowcell:not(.e-editedbatchcell),
-    .e-detailrowcollapse:not(.e-editedbatchcell),
-    .e-detailrowexpand:not(.e-editedbatchcell),
-    .e-gridcontent .e-rowdragdrop:not(.e-editedbatchcell),
-    .e-emptyrow:not(.e-editedbatchcell){
-      color: #333;
-    }
-    &.e-gridhover tr[role="row"]:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-    &.e-gridhover tr[role="row"]:hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-    &.e-gridhover tr[role="row"]:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-    &.e-rtl .e-gridhover tr[role="row"]:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
-    &.e-gridhover tr[role="row"]:hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell){
-      background: #F8FAFA;
-      color: #333;
-    }
-  }
-
-  .e-spinner-pane .e-spinner-inner .e-spin-material {
-    stroke: #999;
-  }
-  .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop){
-    color: #666;
-  }
-
-  .#{$ns}-button--action{
-    background: #E6EFFB;
-    border: 0;
-    box-shadow: 0 0 0;
-    padding: 5px 15px;
-  }
-}
-
-.dashboard__insider--accounts-chart{
-
-  .e-grid{
-    .e-gridheader{
-      border-top: 0;
-    }
-
-    .account-normal{
-
-      .#{$ns}-icon{
-        color: #666;
-        padding-left: 15px;
-      }
-    }
-
-    .checkbox-row{
-      width: 0;
-      
-      
-      .#{$ns}-control{
-        margin: 0;
-      }
-    }
-  }
-}
-
-.dashboard__insider--expense-form{
-  padding: 40px 20px;
-
-  .#{$ns}-form-group{
-    margin-bottom: 22px;
-
-    .#{$ns}-label{
-      min-width: 130px;
-    }
-
-    .#{$ns}-form-content{
-      width: 300px;
-    }
-  }
-}
-
-
-.form{
-  &__floating-footer{
-    position: fixed;
-    bottom: 0;
-    left: 220px;
-    right: 0;
-    background: #fff;
-    padding: 14px 16px;
-    border-top: 1px solid #ececec;
-  }
-}
-
-.dashboard__insider--view-form{
-  padding-left: 25px;
-  padding-right: 25px;
-
-  .view-form--name-section{
-    margin-left: -25px;
-    margin-right: -25px;
-  }
-}
-
-.#{$ns}-form-group{
-
-  &.#{$ns}-intent-danger{
-    select{
-      box-shadow: 0 0 0 0 rgba(219, 55, 55, 0),
-        0 0 0 0 rgba(219, 55, 55, 0),
-        inset 0 0 0 1px #db3737,
-        inset 0 0 0 1px rgba(16, 22, 26, 0.15),
-        inset 0 1px 1px rgba(16, 22, 26, 0.2);
-    }
-  }
-}
-
-
-.bigcapital-datatable{
-
-  table {
-    text-align: left;
-    border-spacing: 0;
-    width: 100%;
-
-    thead{
-      th{
-        height: 48px;
-        padding: 0.5rem 1.5rem;
-        background: #F8FAFA;
-        font-size: 14px;
-        color: #666;
-        font-weight: 500;
-
-        border-bottom: 1px solid rgb(224, 224, 224);
-      }
-    }
-
-    tr {
-      :last-child {
-        td {
-          border-bottom: 0;
-        }
-      }
-    }
-
-    th,
-    td {
-      margin: 0;
-      padding: 0.5rem;
-
-      :last-child {
-        border-right: 0;
-      }
-    }
-  }
-}
-
-.financial-statement{
-
-  &__header{
-    padding: 30px;
-    background: #FDFDFD;
-  }
-}
-
-.make-journal-entries{
-
-  &__header{
-    padding: 25px 40px;
-    background: #fbfbfb;
-  }
-
-  &__table{
-    .bp3-form-group{
-      margin-bottom: 0;
-    }
-    table{
-      border: 1px solid transparent;
-
-      thead{
-        th.index{ width: 3%; }
-        th.account{ width: 22%; }
-        th.note{ width: 40%; }
-        th.credit{ width: 17.5%; }
-        th.debit{ width: 17.5%; }
-      }
-
-      th,
-      td{
-        border-right: 1px dotted #999;
-      }
-      th{
-        color: #444;
-        font-weight: 600;
-        border-bottom: 1px dotted #666;
-      }
-
-      td{
-        border-bottom: 1px dotted #999;
-      }
-    }
-  }
-}
-
-.financial-statement{
-
-  &__body{
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-}
-
-.financial-sheet{
-  border: 1px solid #E2E2E2;
-  min-width: 640px;
-  width: 0;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 20px;
-  margin-top: 40px;
-
-  &__title{
-    font-weight: 200;
-    font-size: 22px;
-    color: #222;
-    text-align: center;
-  }
-
-  &__sheet-type{
-    text-align: center;
-  }
-
-  &__date{
-    text-align: center;
-  }
-
-  &__table{
-
-  }
-
-  &__accounting-basis{
-
-  }
-}
-
-.filter-dropdown{
-  width: 500px;
-
-  &__body{
-    padding: 12px;
-  }
-
-  &__condition{
-    display: flex;
-
-    &:not(:first-of-type) {
-      padding-top: 8px;
-      border-top: 1px solid #e6e6e6;
-      margin-top: 8px;
-    }
-  }
-
-  .bp3-form-group{
-    padding-right: 16px;
-    margin-bottom: 0;
-
-    &:not(:last-of-type) {
-      padding-right: 15px;
-    }
-  }
-
-  &__footer{
-    border-top: 1px solid #e8e8e8;
-    padding: 5px 10px;
-  }
-  .form-group{
-    &--condition{ width: 25%; }
-    &--field{ width: 45%; }
-    &--compatator{ width: 30%; }
-    &--value{ width: 25%; }
-  }
-}

client/src/style/components/data-table.scss

@@ -0,0 +1,51 @@
+
+.bigcapital-datatable{
+
+  table {
+    text-align: left;
+    border-spacing: 0;
+    width: 100%;
+
+    thead{
+      th{
+        height: 48px;
+        padding: 0.5rem 1.5rem;
+        background: #F8FAFA;
+        font-size: 14px;
+        color: #666;
+        font-weight: 500;
+
+        border-bottom: 1px solid rgb(224, 224, 224);
+      }
+    }
+
+    tr {
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    th,
+    td {
+      margin: 0;
+      padding: 0.5rem;
+
+      :last-child {
+        border-right: 0;
+      }
+    }
+
+    tbody{
+      
+      .#{$ns}-button--action{
+        background: #E6EFFB;
+        border: 0;
+        box-shadow: 0 0 0;
+        padding: 5px 15px;
+      }
+    }
+  }
+}
+

client/src/style/components/dialog.scss

@@ -0,0 +1,9 @@
+
+// Dialog
+.#{$ns}-dialog{
+  background: #fff;
+
+  &-header{
+    background: #ebf1f5;
+  }
+}

client/src/style/components/tabs.scss

@@ -0,0 +1,8 @@
+// Tabs component.
+.#{$ns}-tab-indicator-wrapper .#{$ns}-tab-indicator{
+  height: 2px;
+}
+.#{$ns}-large > .#{$ns}-tab{
+  line-height: 50px;
+  font-size: 15px;
+}

client/src/style/objects/form.scss

@@ -0,0 +1,39 @@
+
+.form{
+  &__floating-footer{
+    position: fixed;
+    bottom: 0;
+    left: 220px;
+    right: 0;
+    background: #fff;
+    padding: 14px 16px;
+    border-top: 1px solid #ececec;
+  }
+}
+
+// Form
+label{
+  font-weight: 400;
+}
+
+.#{$ns}-input{
+  box-shadow: 0 0 0 0 rgba(19, 124, 189, 0),
+    0 0 0 0 rgba(19, 124, 189, 0),
+    inset 0 0 0 1px rgba(16, 22, 26, 0.1),
+    inset 0 1px 1px rgba(16, 22, 26, 0.15);
+}
+
+
+
+.#{$ns}-form-group{
+
+  &.#{$ns}-intent-danger{
+    select{
+      box-shadow: 0 0 0 0 rgba(219, 55, 55, 0),
+        0 0 0 0 rgba(219, 55, 55, 0),
+        inset 0 0 0 1px #db3737,
+        inset 0 0 0 1px rgba(16, 22, 26, 0.15),
+        inset 0 1px 1px rgba(16, 22, 26, 0.2);
+    }
+  }
+}

client/src/style/objects/typography.scss

@@ -0,0 +1,9 @@
+
+.#{$ns}-heading{
+  font-weight: 300;
+}
+
+.divider{
+  border-top: 1px solid #e8e8e8;
+  height: 1px;
+}

client/src/style/pages/account-form.scss

@@ -0,0 +1,11 @@
+
+
+// Dialog Account Form.
+.dialog--account-form{
+  
+  .#{$ns}-form-group{
+    .#{$ns}-label{
+      width: 130px;
+    }
+  }
+}

client/src/style/pages/accounts-chart.scss

@@ -0,0 +1,25 @@
+
+.dashboard__insider--accounts-chart{
+
+  .e-grid{
+    .e-gridheader{
+      border-top: 0;
+    }
+
+    .account-normal{
+
+      .#{$ns}-icon{
+        color: #666;
+        padding-left: 15px;
+      }
+    }
+
+    .checkbox-row{
+      width: 0;
+       
+      .#{$ns}-control{
+        margin: 0;
+      }
+    }
+  }
+}

client/src/style/pages/dashboard.scss

@@ -0,0 +1,246 @@
+
+
+.dashboard{
+  display: flex;
+  height: 100vh;
+ 
+  &__topbar{
+    width: 100%;
+    height: 80px;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #F2EFEF;
+
+    &-right,
+    &-left{
+      display: flex;
+    }
+    &-actions{
+      
+    }
+    &-sidebar-toggle{
+      display: flex;
+      align-items: center;
+      margin-left: 4px;
+
+      .#{$ns}-button{
+        color: #8E8E8E;
+
+        &,
+        &:hover,
+        &:focus{
+          border-radius: 0;
+          box-shadow: none;
+          background-color: transparent;
+          border: 0;
+        }
+      }
+    }
+
+    &-navbar{
+      display: flex;
+      align-items: center;
+      margin-right: 18px;
+
+      .#{$ns}-button{
+        color: #1552C8;
+        font-weight: 5000;
+        font-size: 14px;
+
+        &:hover,
+        &:focus{
+          background-color: rgba(178, 220, 253, 0.15);
+        }
+        .#{$ns}-icon{
+          color: #1552C8;
+        }
+      }
+    }
+
+    &-user{
+      display: flex;
+      align-items: center;
+      margin-right: 28px;
+
+      .#{$ns}-button{
+        background-size: contain;
+        border-radius: 50%;
+        height: 40px;
+        width: 40px;
+        
+        &,
+        &:hover,
+        &:focus{
+          background-color: transparent;
+          border: 0;
+          box-shadow: none;
+          background-image: url(http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=400);
+        }
+      }
+    }
+  }
+
+  &__breadcrumbs{
+    display: flex;
+    margin-left: 16px;
+    align-items: center;
+
+    // Breadcrumbs component.
+    .#{$ns}-breadcrumbs-collapsed{
+      background: $light-gray3;
+
+      &:hover{
+        background: $light-gray2;
+      }
+    }
+  }
+
+  &__actions-bar{
+    border-bottom: 2px solid #EAEAEA;
+
+    .#{$ns}-navbar{
+      box-shadow: none;
+
+      &,
+      &-group{
+        height: 44px;
+      }
+
+      .#{$ns}-navbar-divider{
+        margin-left: 0;
+        margin-right: 0;
+      }
+      .#{$ns}-button{
+        color: #5C5C5C;
+        padding: 8px 12px;
+
+        &:hover{
+          background: rgba(167, 182, 194, 0.12);
+          color: #5C5C5C;
+        }
+        .#{$ns}-icon{
+          color: #666;
+          margin-right: 7px;
+        }
+      }
+
+      .button--table-views{
+        .#{$ns}-icon{
+          color: #1183DA;
+        }
+      }
+    }
+  }
+
+  &__breadcrumbs{
+    display: flex;
+    align-items: center;
+    margin-left: 1rem;
+  }
+  &__title{
+    align-items: center;;
+    display: flex;
+    margin-left: 6px;
+
+    h1{
+      font-size: 26px;
+      font-weight: 100;
+      margin: 0;
+    }
+
+    .sep{
+      margin-left: 12px;
+      margin-right: 12px;
+      color: #999;
+      border-left: 1px solid #d9d9d9;
+      width: 1px;
+      height: 25px;
+    }
+
+    h3{
+      font-size: 16px;
+      font-weight: 300;
+      color: #777;
+      margin: 0;
+    }
+  }
+
+  &-content{
+    width: calc(100% - 220px);
+    display: flex;
+    flex-direction: column;
+
+    
+  }
+
+  &__insider{
+    height: 100%;
+    
+    &--loading{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &__page-content{
+    // padding: 22px;
+  }
+
+  &__preferences-topbar{
+    border-bottom: 1px solid #E5E5E5;
+    height: 70px;
+    padding: 0 22px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    h2{
+      font-size: 22px;
+      font-weight: 200;
+      margin: 0;
+    }
+  }
+}
+
+.tabs--dashboard-views{
+
+  .#{$ns}-tab{
+    color: #5C5C5C;
+    font-size: 14px;
+    line-height: 50px;
+    font-weight: 400;
+    padding: 0 14px;
+    margin-right: 0;
+  }
+
+  .#{$ns}-tab-indicator-wrapper{
+    .#{$ns}-tab-indicator{
+      height: 2px;
+    }
+  }
+
+  .button--new-view{
+    margin: 0;
+    height: 50px;
+
+    &,
+    &:hover,
+    &:active,
+    &:focus{
+      background: transparent;
+      border: 0;
+      box-shadow: 0 0 0;
+    }
+
+    .#{$ns}-icon{
+      color: #A7A7A7;
+    }
+  }
+}
+
+.navbar--dashboard-views{
+  box-shadow: 0 0 0;
+  border-bottom: 1px solid #EAEAEA;
+}

client/src/style/pages/expense-form.scss

@@ -0,0 +1,17 @@
+
+
+.dashboard__insider--expense-form{
+  padding: 40px 20px;
+
+  .#{$ns}-form-group{
+    margin-bottom: 22px;
+
+    .#{$ns}-label{
+      min-width: 130px;
+    }
+
+    .#{$ns}-form-content{
+      width: 300px;
+    }
+  }
+}

client/src/style/pages/financial-statements.scss

@@ -0,0 +1,48 @@
+
+
+
+.financial-statement{
+
+  &__header{
+    padding: 30px;
+    background: #FDFDFD;
+  }
+
+  &__body{
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+.financial-sheet{
+  border: 1px solid #E2E2E2;
+  min-width: 640px;
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  margin-top: 40px;
+
+  &__title{
+    font-weight: 200;
+    font-size: 22px;
+    color: #222;
+    text-align: center;
+  }
+
+  &__sheet-type{
+    text-align: center;
+  }
+
+  &__date{
+    text-align: center;
+  }
+
+  &__table{
+
+  }
+
+  &__accounting-basis{
+
+  }
+}

client/src/style/pages/make-journal-entries.scss

@@ -0,0 +1,39 @@
+
+.make-journal-entries{
+
+  &__header{
+    padding: 25px 40px;
+    background: #fbfbfb;
+  }
+
+  &__table{
+    .bp3-form-group{
+      margin-bottom: 0;
+    }
+    table{
+      border: 1px solid transparent;
+
+      thead{
+        th.index{ width: 3%; }
+        th.account{ width: 22%; }
+        th.note{ width: 40%; }
+        th.credit{ width: 17.5%; }
+        th.debit{ width: 17.5%; }
+      }
+
+      th,
+      td{
+        border-right: 1px dotted #999;
+      }
+      th{
+        color: #444;
+        font-weight: 600;
+        border-bottom: 1px dotted #666;
+      }
+
+      td{
+        border-bottom: 1px dotted #999;
+      }
+    }
+  }
+}

client/src/style/pages/preferences.scss

@@ -0,0 +1,54 @@
+
+
+
+.preferences{
+  &__inside-content--tabable{
+    margin-left: -25px;
+    margin-right: -25px;
+  }
+
+  &__inside-content{
+
+    .#{$ns}-tab-list{
+      border-bottom: 1px solid #E5E5E5;
+      padding-left: 15px;
+
+      .#{$ns}-tab{
+        font-weight: 300;
+      }
+    }
+  }  
+}
+
+.preferences__sidebar{
+  background: #fdfdfd;
+  min-width: 210px;
+  max-width: 210px;
+  
+  &-head{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid #E5E5E5;
+    height: 70px;
+    padding: 0 22px;
+
+    h2{
+      font-size: 22px;
+      font-weight: 200;
+      margin: 0;
+    }
+  }
+
+  &-menu{
+    padding: 0;
+    background: transparent;
+
+    .#{$ns}-menu-item{
+      padding: 10px 18px;
+      font-size: 15px;
+      font-weight: 300;
+      color: #333;
+    }
+  }
+}

client/src/style/pages/view-form.scss

@@ -0,0 +1,91 @@
+
+
+
+.dashboard__insider--view-form{
+  padding-left: 25px;
+  padding-right: 25px;
+
+  .view-form--name-section{
+    margin-left: -25px;
+    margin-right: -25px;
+  }
+}
+.view-form{
+
+  &--name-section{
+    padding: 35px 28px;
+    background: #fbfafa;
+    margin-bottom: 22px;
+
+    .bp3-form-group.bp3-inline{
+      margin-bottom: 0;
+    }
+  }
+
+  &--logic-expression-section{
+    padding: 20px 25px;
+    margin: 1rem -25px 1.5rem;
+    background: #fbfafa;
+
+    .#{$ns}-form-group{
+      margin-bottom: 0;
+    }
+  }
+
+  .condition-number{
+    color: #666;
+  }
+
+  .#{$ns}-form-group.#{$ns}-inline{
+
+    .#{$ns}-label{
+      width: 200px;
+    }
+
+    .#{$ns}-form-content{
+      width: 100%;
+    }
+  }
+
+  .new-conditional-btn{
+ 
+  }
+
+  .dragable-columns{
+
+    &__items{
+      border: 1px solid #e1e1e1;
+      padding: 10px 8px;
+      height: 300px;
+      overflow: auto;
+    }
+
+    &__title{
+      color: #666;
+    }
+  }
+
+  .dragable-columns{
+    &__column{
+
+      .bp3-input-group .bp3-input{
+        border-radius: 3px 3px 0 0;
+      }
+
+    }
+    
+
+    &__arrows{
+      text-align: center;
+      margin-top: 140px;
+    }
+  }
+
+  .dragable-resource-columns{
+    
+  }
+
+  &__role-conditional{
+    margin-top: 1rem;
+  }
+}

client/src/style/views/Sidebar.scss

@@ -0,0 +1,107 @@
+
+$sidebar-background: #01194E;
+$sidebar-text-color: #fff;
+$sidebar-width: 220px;
+$sidebar-menu-item-color: #E9EBF7;
+
+$sidebar-popover-submenu-bg: rgb(1, 20, 62);
+
+.sidebar{
+  background: $sidebar-background;
+  color: $sidebar-text-color;
+  width: $sidebar-width;
+
+  &__head{
+    padding: 16px 10px;
+   
+    &-company-meta{
+
+      .company-name{
+        font-size: 16px;
+        font-weight: 200;
+        margin-bottom: 5px;
+      }
+      .company-meta{
+        color: #A7AFC2;
+        font-size: 12px;
+      }
+    }
+  }
+
+  &-menu{
+    background: transparent;
+    padding: 0;
+    min-width: $sidebar-width;
+    border-radius: 0;
+
+    .#{$ns}-menu-item{
+      color: $sidebar-menu-item-color;
+      border-radius: 0;
+      padding: 10px 16px;
+      font-size: 15px;
+      font-weight: 200;
+
+      &:hover{
+        background: #012470;
+      }
+      &:focus,
+      &:active{
+       background: #01143e;
+      }
+
+      > .#{$ns}-icon{
+        color: #767B9B;
+        margin-right: 12px;
+        margin-top: 0;
+      }
+
+      > .#{$ns}-icon-caret-right{
+        margin-right: -2px;
+        margin-top: 2px;
+        color: #767B9B;
+      }
+    }
+
+    .#{$ns}-submenu{
+
+      .#{$ns}-menu{
+        padding: 10px 0;
+        margin: 0;
+        background: $sidebar-popover-submenu-bg;
+        border-radius: 0;
+
+        &-item{
+          padding-top: 7px;
+          padding-bottom: 7px;
+          padding-left: 16px;
+          padding-right: 16px;
+          font-size: 14px;
+
+          &,
+          &:hover,
+          &:active,
+          &:focus{
+            color: #fff;
+            background: transparent;
+          }
+        }
+      }
+
+      .#{$ns}-popover{
+        padding: 0;
+
+        &-content{
+          box-shadow: 0 0 0;
+        }
+      }
+    }
+    .#{$ns}-popover-target.#{$ns}-popover-open .#{$ns}-menu-item{
+      color: $sidebar-menu-item-color;
+    }
+    .#{$ns}-menu-divider{
+      border-top-color: #183C86;
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}

client/src/style/views/filter-dropdown.scss

@@ -0,0 +1,38 @@
+
+.filter-dropdown{
+  width: 500px;
+
+  &__body{
+    padding: 12px;
+  }
+
+  &__condition{
+    display: flex;
+
+    &:not(:first-of-type) {
+      padding-top: 8px;
+      border-top: 1px solid #e6e6e6;
+      margin-top: 8px;
+    }
+  }
+
+  .bp3-form-group{
+    padding-right: 16px;
+    margin-bottom: 0;
+
+    &:not(:last-of-type) {
+      padding-right: 15px;
+    }
+  }
+
+  &__footer{
+    border-top: 1px solid #e8e8e8;
+    padding: 5px 10px;
+  }
+  .form-group{
+    &--condition{ width: 25%; }
+    &--field{ width: 45%; }
+    &--compatator{ width: 30%; }
+    &--value{ width: 25%; }
+  }
+}