split overrides.scss; top menu toggle fix

react/package.json

@@ -38,7 +38,6 @@
     "express": "^4.14.0",
     "file-loader": "^0.10.0",
     "qrcode.react": "^0.7.1",
-    "rc-tree": "^1.4.6",
     "react": "^15.3.1",
     "react-dom": "^15.3.1",
     "react-hot-loader": "^1.3.0",

react/src/components/contextMenu.scss

@@ -0,0 +1,45 @@
+.receive-address-context-menu,
+.coin-tile-context-menu {
+  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.4);
+  background: #fff;
+  position: absolute;
+  z-index: 100;
+  margin-left: 65px;
+  margin-top: 5px;
+
+  ul {
+    margin: 0;
+    list-style: none;
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0;
+    -webkit-margin-start: 0;
+    -webkit-margin-end: 0;
+    -webkit-padding-start: 0;
+
+    li {
+      padding: 5px 15px;
+
+      &:first-child {
+        margin-top: 5px;
+      }
+      &:last-child {
+        margin-bottom: 5px;
+      }
+      &:hover {
+        background: #f9f9f9;
+        cursor: pointer;
+      }
+    }
+  }
+  &.closed {
+    z-index: 1700;
+    position: absolute;
+    top: -100%;
+    left: -100%;
+  }
+  .receive-address-context-menu-get-qr {
+    .modal {
+      cursor: default;
+    }
+  }
+}

react/src/components/dashboard/navbar/navbar.js

@@ -101,6 +101,7 @@ class Navbar extends React.Component {
 
   handleClickOutside(e) {
     if (e.srcElement.className !== 'dropdown-menu' &&
+        e.srcElement.className !== 'icon fa-bars' &&
         e.srcElement.title !== 'top menu' &&
         (e.srcElement.offsetParent && e.srcElement.offsetParent.className !== 'navbar-avatar-inner') &&
         e.srcElement.className.indexOf('navbar-avatar') === -1 &&

react/src/components/dashboard/navbar/navbar.scss

@@ -0,0 +1,48 @@
+.navbar-fixed-bottom,
+.navbar-fixed-top {
+  z-index: 100;
+}
+
+.navbar {
+  &.navbar-fixed-top {
+    .dropdown {
+      &.open {
+        .dropdown-menu {
+          right: 0;
+        }
+      }
+      .dropdown-menu {
+        display: block;
+        right: -165px;
+      }
+    }
+  }
+}
+
+.navbar-nav > li > a.navbar-avatar,
+.navbar-toolbar > li > a.navbar-avatar {
+  &.dropdown-toggle {
+    font-size: 24px;
+    padding-top: 24px;
+
+    i {
+      position: relative;
+      top: -2px;
+    }
+  }
+}
+
+.coind-actions-menu {
+  position: absolute;
+  top: 22px;
+  left: 20px;
+}
+
+.coin-tile-context-menu {
+  top: 45px;
+  left: -34px;
+
+  li {
+    color: #757575;
+  }
+}

react/src/components/dashboard/sendCoin/sendCoin.scss

@@ -0,0 +1,9 @@
+.send-coin-sync-warning {
+  .icon {
+    font-size: 18px;
+  }
+  .desc {
+    position: relative;
+    top: -2px;
+  }
+}

react/src/components/dashboard/settings/settings.scss

@@ -93,7 +93,6 @@
 #SettingsAccordion {
   .panel {
     .panel-collapse {
-
       &.collapse {
         max-height: 0;
         overflow: hidden;
@@ -153,4 +152,21 @@
 
 .select-settings {
   max-width: 200px;
+}
+
+.manual-debuglog-refresh {
+  position: absolute;
+  top: 40px;
+  right: 40px;
+  font-size: 20px;
+}
+
+.coind-stdout-refresh-icon {
+  font-size: 20px;
+  margin-top: 7px;
+}
+
+.settings-coind-stdout-textarea {
+  border: none;
+  background-image: none !important;
 }

react/src/components/dashboard/spinner/spinner.scss

@@ -118,4 +118,18 @@
   80%, 90% {
     stroke: #FF7D56;
   }
+}
+
+.spinner--small {
+  position: absolute;
+  right: 18px;
+  top: -15px;
+  transform: scale(0.4);
+}
+
+.spinner--medium {
+  position: absolute;
+  right: 38px;
+  top: 0;
+  transform: scale(0.5);
 }

react/src/components/dashboard/walletsBalance/walletsBalance.scss

@@ -0,0 +1,21 @@
+.col-lg-12 {
+  &.col-xs-12 {
+    &.balance-placeholder--bold {
+      .icon {
+        &.fa-eye {
+          position: relative;
+          top: -2px;
+          padding-right: 5px;
+        }
+      }
+    }
+  }
+}
+
+.balance-placeholder--bold {
+  .pull-left {
+    font-weight: 500;
+    font-size: 16px;
+    padding-top: 16px !important;
+  }
+}

react/src/components/dashboard/walletsData/walletsData.scss

@@ -2,11 +2,6 @@
   float: right;
   padding-right: 0;
 }
-.basilisk-progress-bar {
-  position: absolute;
-  width: 100%;
-}
-.breadcrumb--basilisk,
 .breadcrumb--native {
   top: 0;
 }
@@ -89,4 +84,20 @@
 }
 .table-cell-offset-16 {
   padding-left: 16px;
+}
+
+.dashboard-claim-interest-btn {
+  padding: 4px 14px 4px 7px;
+  margin-left: 20px;
+}
+
+.win-sync-workaround-btn {
+  padding: 4px 7px;
+}
+
+.manual-balance-refresh,
+.manual-txhistory-refresh {
+  position: absolute;
+  right: 4px;
+  top: 3px;
 }

react/src/components/dashboard/walletsNav/walletsNav.scss

@@ -0,0 +1,62 @@
+.breadcrumb {
+  padding: 8px 30px 0;
+  position: relative;
+  top: -10px;
+}
+
+.header-easydex-section {
+  img {
+    max-width: 60px;
+  }
+}
+
+.coin-logo-wide {
+  padding: 8px 30px 0;
+  position: relative;
+  top: 0;
+
+  .header-easydex-section {
+    img {
+      width: inherit;
+      max-width: inherit;
+      position: relative;
+      top: -5px;
+    }
+  }
+
+  &.native-coin-logo {
+    top: -93px;
+
+    .header-easydex-section {
+      img {
+        width: inherit;
+      }
+    }
+  }
+}
+
+.native-coin-logo {
+  float: left;
+  position: absolute;
+  top: -105px;
+  z-index: 100;
+
+  .header-easydex-section {
+    img {
+      width: 60px;
+      max-height: 60px;
+    }
+  }
+}
+
+.page-header--native {
+  height: 75px;
+}
+
+.page-header--spv {
+  height: 120px;
+
+  .page-header-actions {
+    top: 73%;
+  }
+}

react/src/components/dex/table/table.scss

@@ -2,11 +2,6 @@
   float: right;
   padding-right: 0;
 }
-.basilisk-progress-bar {
-  position: absolute;
-  width: 100%;
-}
-.breadcrumb--basilisk,
 .breadcrumb--native {
   top: 0;
 }

react/src/components/overrides.scss

@@ -1,5 +1,3 @@
-/* TODO: nesting, separate */
-
 #app {
   height: 100%;
 
@@ -77,43 +75,6 @@ body {
   transition: height 0.3s ease-out;
 }
 
-.rc-tree {
-  height: 450px;
-  overflow-y: scroll;
-  margin-top: 20px;
-
-  a {
-    pointer-events: none;
-  }
-  li {
-    span {
-      &.rc-tree-iconEle {
-        display: none;
-      }
-    }
-  }
-}
-
-.rc-tree-node-content-wrapper-close + ul {
-  height: 0;
-}
-.rc-tree-node-content-wrapper {
-  user-select: none;
-}
-.rc-tree-node-content-wrapper-normal {
-  color: inherit;
-  pointer-events: all;
-  user-select: all;
-}
-
-#RefreshBasiliskConnectionsMdl {
-  .btn-close {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-  }
-}
-
 .page-aside {
   position: fixed;
 }
@@ -135,88 +96,6 @@ body {
   text-align: center;
 }
 
-.navbar {
-  &.navbar-fixed-top {
-    .dropdown {
-      &.open {
-        .dropdown-menu {
-          right: 0;
-        }
-      }
-      .dropdown-menu {
-        display: block;
-        right: -165px;
-      }
-    }
-  }
-}
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 24px;
-
-   input {
-    display: none;
-  }
-}
-
-.slider {
-  border-radius: 20px;
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
-
-  &.round {
-    border-radius: 34px;
-
-    &:before {
-      border-radius: 50%;
-    }
-  }
-  &:before {
-    border-radius: 50%;
-    position: absolute;
-    content: '';
-    height: 20px;
-    width: 20px;
-    left: 2px;
-    bottom: 2px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-  }
-}
-
-.toggle-label {
-  color: #757575;
-  display: inline-block;
-  position: relative;
-  top: -12px;
-  left: 8px;
-}
-
-input:checked + .slider {
-  background-color: rgb(57, 73, 171);
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px rgb(57, 73, 171);
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(16px);
-  -ms-transform: translateX(16px);
-  transform: translateX(16px);
-}
-
 .dropdown-menu {
   li {
     cursor: pointer;
@@ -277,13 +156,6 @@ select{
   }
 }
 
-.basilisk-actions {
-  .caret {
-    margin-left: 10px;
-    margin-top: -2px;
-  }
-}
-
 .clipboard-edexaddr {
   margin-left: 10px;
 }
@@ -292,13 +164,6 @@ select{
   background: #f3f4f5;
 }
 
-.manual-balance-refresh,
-.manual-txhistory-refresh {
-  position: absolute;
-  right: 4px;
-  top: 3px;
-}
-
 .table-striped {
   > tbody {
     > tr.hover--none {
@@ -307,91 +172,6 @@ select{
   }
 }
 
-@media only screen and (min-width : 1201px) {
-  .wallet-widgets {
-    .flex {
-      display: flex;
-      flex-wrap: wrap;
-    }
-    > div {
-      display: flex;
-
-      .widget,
-      .widget-content {
-        height: 100%;
-
-        > div,
-        .clearfix {
-          height: 100%;
-        }
-      }
-    }
-  }
-}
-
-.breadcrumb {
-  padding: 8px 30px 0;
-  position: relative;
-  top: -10px;
-}
-
-.header-easydex-section {
-  img {
-    max-width: 60px;
-  }
-}
-
-.coin-logo-wide {
-  padding: 8px 30px 0;
-  position: relative;
-  top: 0;
-
-  .header-easydex-section {
-    img {
-      width: inherit;
-      max-width: inherit;
-      position: relative;
-      top: -5px;
-    }
-  }
-
-  &.native-coin-logo {
-    top: -93px;
-
-    .header-easydex-section {
-      img {
-        width: inherit;
-      }
-    }
-  }
-}
-
-.native-coin-logo {
-  float: left;
-  position: absolute;
-  top: -105px;
-  z-index: 100;
-
-  .header-easydex-section {
-    img {
-      width: 60px;
-      max-height: 60px;
-    }
-  }
-}
-
-.page-header--native {
-  height: 75px;
-}
-
-.page-header--spv {
-  height: 120px;
-
-  .page-header-actions {
-    top: 73%;
-  }
-}
-
 .toggle-filters:hover {
   background-color: #f3f1f1;
 }
@@ -433,14 +213,6 @@ select{
   }
 }
 
-.balance-placeholder--bold {
-  .pull-left {
-    font-weight: 500;
-    font-size: 16px;
-    padding-top: 16px !important;
-  }
-}
-
 .tx-interest {
   display: block;
   color: #4caf50;
@@ -448,24 +220,6 @@ select{
   padding-top: 5px;
 }
 
-.icon-spv-connection-warning,
-.icon-native-connection-warning {
-  position: absolute;
-  bottom: 20px;
-  right: 15px;
-
-  &:before {
-    color: #f2a654;
-    font-size: 18px;
-  }
-}
-
-.icon-native-connection-warning {
-  &:before {
-    color: #e9595b;
-  }
-}
-
 .color-warning {
   color: #FF6600;
 }
@@ -475,25 +229,6 @@ select{
   cursor: pointer;
 }
 
-.dashboard-claim-interest-btn {
-  padding: 4px 14px 4px 7px;
-  margin-left: 20px;
-}
-
-.win-sync-workaround-btn {
-  padding: 4px 7px;
-}
-
-.send-coin-sync-warning {
-  .icon {
-    font-size: 18px;
-  }
-  .desc {
-    position: relative;
-    top: -2px;
-  }
-}
-
 .dropdown-toggle {
   &.disabled {
     opacity: 1;
@@ -504,97 +239,12 @@ select{
   }
 }
 
-.coind-stop-icon,
-.coind-remove-icon {
-  font-size: 20px;
-  position: absolute;
-  top: 19px;
-  right: 12px;
-  color: #ccc !important;
-
-  &:hover {
-    color: #e9595b !important;
-  }
-}
-
-.coind-remove-icon {
-  transform: rotate(45deg);
-  top: 45px;
-}
-
-.coind-remove-icon-spv {
-  top: 19px;
-}
-
 .no-borders {
   tbody > tr > td {
     border: none;
   }
 }
 
-.manual-debuglog-refresh {
-  position: absolute;
-  top: 40px;
-  right: 40px;
-  font-size: 20px;
-}
-
-.coind-stdout-refresh-icon {
-  font-size: 20px;
-  margin-top: 7px;
-}
-
-.settings-coind-stdout-textarea {
-  border: none;
-  background-image: none !important;
-}
-
-.receive-address-context-menu,
-.coin-tile-context-menu {
-  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.4);
-  background: #fff;
-  position: absolute;
-  z-index: 100;
-  margin-left: 65px;
-  margin-top: 5px;
-
-  ul {
-    margin: 0;
-    list-style: none;
-    -webkit-margin-before: 0;
-    -webkit-margin-after: 0;
-    -webkit-margin-start: 0;
-    -webkit-margin-end: 0;
-    -webkit-padding-start: 0;
-
-    li {
-      padding: 5px 15px;
-
-      &:first-child {
-        margin-top: 5px;
-      }
-      &:last-child {
-        margin-bottom: 5px;
-      }
-      &:hover {
-        background: #f9f9f9;
-        cursor: pointer;
-      }
-    }
-  }
-  &.closed {
-    z-index: 1700;
-    position: absolute;
-    top: -100%;
-    left: -100%;
-  }
-  .receive-address-context-menu-get-qr {
-    .modal {
-      cursor: default;
-    }
-  }
-}
-
 .push-right {
   float: right;
 }
@@ -602,114 +252,18 @@ select{
   float: left;
 }
 
-.col-lg-12 {
-  &.col-xs-12 {
-    &.balance-placeholder--bold {
-      .icon {
-        &.fa-eye {
-          position: relative;
-          top: -2px;
-          padding-right: 5px;
-        }
-      }
-    }
-  }
-}
-
 .col-red {
   color: #f96868;
 }
 
-.spinner--small {
-  position: absolute;
-  right: 18px;
-  top: -15px;
-  transform: scale(0.4);
-}
-
-.spinner--medium {
-  position: absolute;
-  right: 38px;
-  top: 0;
-  transform: scale(0.5);
-}
-
-.Select {
-  cursor: pointer;
-
-  * { color: #757575 !important; }
-
-  .Select-clear {
-    display: none;
-  }
-  .Select-control {
-    height: 40px !important;
-
-    .Select-placeholder,
-    .Select-value {
-      line-height: 36px !important;
-    }
-  }
-}
-.Select-menu-outer {
-  max-height: 253px !important;
-}
-.Select-menu {
-  max-height: 250px !important;
-}
-.Select.is-open,
-.Select.is-focused {
-  .Select-control {
-    border-color: #FF6600 !important;
-    box-shadow: none !important;
-  }
-  .Select-menu-outer {
-    border-color: #FF6600 !important;
-    border-top-color: #d9d9d9 !important;
-  }
-}
-
 .modal-close-overlay {
   width: 100%;
   height: 100%;
   position: absolute;
 }
 
-.navbar-fixed-bottom,
-.navbar-fixed-top {
-  z-index: 100;
-}
-
 #section-iguana-wallet-settings {
   > .row {
     background: #f3f4f5;
   }
-}
-
-.navbar-nav > li > a.navbar-avatar,
-.navbar-toolbar > li > a.navbar-avatar {
-  &.dropdown-toggle {
-    font-size: 24px;
-    padding-top: 24px;
-
-    i {
-      position: relative;
-      top: -2px;
-    }
-  }
-}
-
-.coind-actions-menu {
-  position: absolute;
-  top: 22px;
-  left: 20px;
-}
-
-.coin-tile-context-menu {
-  top: 45px;
-  left: -34px;
-
-  li {
-    color: #757575;
-  }
 }

react/src/components/responsive.scss

@@ -0,0 +1,21 @@
+@media only screen and (min-width : 1201px) {
+  .wallet-widgets {
+    .flex {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    > div {
+      display: flex;
+
+      .widget,
+      .widget-content {
+        height: 100%;
+
+        > div,
+        .clearfix {
+          height: 100%;
+        }
+      }
+    }
+  }
+}

react/src/components/switch.scss

@@ -0,0 +1,65 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 24px;
+
+   input {
+    display: none;
+  }
+}
+
+.slider {
+  border-radius: 20px;
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+
+  &.round {
+    border-radius: 34px;
+
+    &:before {
+      border-radius: 50%;
+    }
+  }
+  &:before {
+    border-radius: 50%;
+    position: absolute;
+    content: '';
+    height: 20px;
+    width: 20px;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+  }
+}
+
+.toggle-label {
+  color: #757575;
+  display: inline-block;
+  position: relative;
+  top: -12px;
+  left: 8px;
+}
+
+input:checked + .slider {
+  background-color: rgb(57, 73, 171);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px rgb(57, 73, 171);
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(16px);
+  -ms-transform: translateX(16px);
+  transform: translateX(16px);
+}

react/src/styles/index.scss

@@ -29,11 +29,17 @@
 @import '../assets/global/fonts/web-icons/web-icons.css';
 @import '../assets/global/fonts/brand-icons/brand-icons.min.css';
 @import '../assets/skins/orange.min.css';
-@import '../../node_modules/rc-tree/assets/index.css';
 @import '../components/addcoin/addcoin.scss';
 @import '../components/dashboard/main/dashboard.scss';
 @import '../components/login/login.scss';
 @import '../components/overrides.scss';
+@import '../components/switch.scss';
+@import '../components/contextMenu.scss';
+@import '../components/responsive.scss';
+@import '../components/dashboard/sendCoin/sendCoin.scss';
+@import '../components/dashboard/walletsNav/walletsNav.scss';
+@import '../components/dashboard/coinTile/coinTile.scss';
+@import '../components/dashboard/navbar/navbar.scss';
 @import '../components/dashboard/settings/settings.scss';
 @import '../components/dashboard/walletsData/walletsData.scss';
 @import '../components/dashboard/claimInterestModal/claimInterestModal.scss';

react/src/translate/en.js

@@ -96,6 +96,7 @@ export const LANG_EN = {
     'NO_ACTIVE_COIN': 'No active coin',
   },
   'INDEX': {
+    'TOGGLE_COIN_CONTEXT_MENU': 'Toggle coin context menu',
     'TOP_MENU': 'Top menu',
     'ERROR_READING': 'Error reading',
     'SHOW': 'Show',