partial overrides.scss split

7 years ago · 55c9e762bf
14 changed files with 515 additions and 532 deletions
--- a/react/src/components/addcoin/addcoin.scss
+++ b/react/src/components/addcoin/addcoin.scss
@ -1,5 +1,43 @@
 .add-coin-modal {
  color: #757575;
+
+  .modal-body {
+    max-height: 590px;
+    overflow-y: auto;
+  }
+
+  .multi {
+    .col-sm-8 {
+      width: 30%;
+    }
+    .col-sm-12 {
+      &.text-center {
+        width: 60%;
+        padding: 0;
+
+        .col-lg-4 {
+          width: 25%;
+          margin-right: 8%;
+          padding: 0;
+
+          .input{
+            &.to-labelauty+label {
+              max-width: 136px;
+            }
+          }
+        }
+        .col-lg-4 {
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+        .col-sm-1 {
+          width: 44px;
+          padding: 0;
+        }
+      }
+    }
+  }
 }

 .vertical-margin-20 {
@ -24,4 +62,25 @@
      margin: 0;
    }
  }
+}
+
+.btn-add-coin-item,
+.btn-add-coin-item-options,
+.btn-save-coin-selection,
+.btn-load-coin-selection {
+  position: absolute;
+  right: 32px;
+  z-index: 50;
+}
+.btn-add-coin-item {
+  right: 60px;
+}
+.btn-add-coin-item-options {
+  padding: 6px;
+}
+.btn-save-coin-selection {
+  top: 60px;
+}
+.btn-load-coin-selection {
+  top: 95px;
 }
--- a/react/src/components/dashboard/claimInterestModal/claimInterestModal.scss
+++ b/react/src/components/dashboard/claimInterestModal/claimInterestModal.scss
@ -0,0 +1,48 @@
+.modal-claim-interest {
+  .modal-dialog {
+    width: 70%;
+
+    .table > tbody > tr > td,
+    .table > tbody > tr > th,
+    .table > tfoot > tr > td,
+    .table > tfoot > tr > th,
+    .table > thead > tr > td,
+    .table > thead > tr > th {
+      padding: 8px 30px 8px 0;
+    }
+
+    .claim-btn {
+      position: absolute;
+      right: 29px;
+      top: 66px;
+    }
+    .table-scroll {
+      height: 366px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      width: 100%;
+    }
+    .bold {
+      font-weight: bold;
+    }
+    .green {
+      color: #66bb6a;
+    }
+    .red {
+      color: #f96868;
+    }
+    .locktime {
+      i {
+        font-size: 20px;
+        line-height: 1.1;
+      }
+    }
+
+    .refresh-icon {
+      position: absolute;
+      right: 20px;
+      font-size: 20px;
+      z-index: 100;
+    }
+  }
+}
--- a/react/src/components/dashboard/coindDownModal/coindDownModal.scss
+++ b/react/src/components/dashboard/coindDownModal/coindDownModal.scss
@ -0,0 +1,24 @@
+.coind-down-modal {
+  .modal-body {
+    height: 60vh;
+
+    > div {
+      height: 100%;
+    }
+    .form-group {
+      &.form-material {
+        &.floating {
+          height: 80%;
+        }
+      }
+    }
+    .page-content {
+      width: 90%;
+      height: 100%;
+
+      textarea {
+        height: 100%;
+      }
+    }
+  }
+}
--- a/react/src/components/dashboard/jumblr/jumblr.scss
+++ b/react/src/components/dashboard/jumblr/jumblr.scss
@ -0,0 +1,89 @@
+.jumblr {
+  p {
+    width: calc(100% - 100px);
+  }
+  .breadcrumb {
+    padding: 8px 30px;
+    position: relative;
+    top: 0;
+  }
+  .img-responsive {
+    position: absolute;
+    top: -28px;
+    right: 18px;
+
+    .coin {
+      font-size: 30px;
+      position: relative;
+      left: -18px;
+      top: 4px;
+    }
+    .image {
+      width: 60px;
+    }
+  }
+  .header-easydex-section {
+    img {
+      max-width: inherit;
+    }
+  }
+  .copy-string-btn {
+    position: absolute;
+    right: 36px;
+    margin-top: -68px;
+  }
+  .btn-next {
+    position: absolute;
+    top: 60px;
+    right: 32px;
+  }
+  input.labelauty+label,
+  input.labelauty+label {
+    background: #d6d5d5;
+    color: #504e4e;
+  }
+  input.labelauty:checked+label {
+    color: #fff;
+    background-color: #3949ab;
+  }
+  input.labelauty + label:hover .labelauty-unchecked,
+  input.labelauty + label .labelauty-unchecked {
+    color: #504e4e;
+  }
+  .nofloat {
+    float: none;
+    display: inline-block;
+    padding-left: 0;
+  }
+}
+
+.jumblr-mode-selector {
+  .nav-tabs {
+    li {
+      cursor: pointer;
+
+      &.active {
+        > a {
+          cursor: pointer;
+          color: #fff;
+          background-color: #62a8ea;
+          border-color: transparent;
+          border-bottom-color: #62a8ea;
+        }
+      }
+    }
+  }
+
+  .panel-heading {
+    background: #f3f3f3;
+    cursor: pointer;
+  }
+  .panel-title {
+    color: #676767;
+  }
+  .jumblr-addresses-list {
+    .col-xs-3 {
+      padding: 0;
+    }
+  }
+}
--- a/react/src/components/dashboard/qrModal/qrModal.scss
+++ b/react/src/components/dashboard/qrModal/qrModal.scss
@ -0,0 +1,5 @@
+.qr-modal-send-block {
+  position: absolute;
+  top: 15px;
+  right: 30px;
+}
--- a/react/src/components/dashboard/settings/settings.scss
+++ b/react/src/components/dashboard/settings/settings.scss
@ -0,0 +1,115 @@
+.support-box {
+  padding: 15px 20px;
+  width: 220px;
+  display: inline-block;
+  cursor: pointer;
+
+  &-title {
+    font-weight: bold;
+    padding-top: 12px;
+    padding-bottom: 3px;
+  }
+  img {
+    height: 50px;
+  }
+}
+
+.support-box-wrapper {
+  display: inline-block;
+  margin-right: 50px;
+
+  &:last-child, {
+    margin-right: 0;
+  }
+}
+
+.support-box:hover {
+  .support-box-link {
+    color: #5683ad;
+    font-weight: 500;
+  }
+}
+
+.login-settings-modal {
+  #AppUpdate {
+    .col-sm-4 {
+      width: 100%;
+    }
+  }
+  .modal-dialog {
+    width: 80%;
+  }
+  .modal-body {
+    background: #f3f4f5;
+    border-radius: 4px;
+  }
+  .modal-footer {
+    margin-top: 15px;
+  }
+  .page-content {
+    padding-top: 0;
+  }
+  .support-box-wrapper {
+    .support-box {
+      margin: 0;
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.settings-help {
+  font-size: 20px;
+  position: relative;
+  top: 2px;
+  left: 10px;
+  color: #5683ad;
+}
+
+#SettingsAccordion {
+  .toggle {
+    position: relative;
+    top: 4px;
+  }
+  table {
+    width: 100%;
+
+    td {
+      &:first-child {
+        width: 40%;
+      }
+      &:last-child {
+        width: 60%;
+      }
+    }
+  }
+}
+
+#SettingsAccordion {
+  .panel {
+    .panel-collapse {
+      transition: all .3s;
+
+      &.collapse {
+        height: 0;
+      }
+    }
+  }
+}
+
+#section-iguana-wallet-settings {
+  background: #f3f4f5;
+
+  .panel-title {
+    cursor: pointer;
+    cursor: hand;
+
+    &:before {
+      content: '\F273';
+    }
+    &.collapsed {
+      &:before {
+        content: '\F278';
+      }
+    }
+  }
+}
--- a/react/src/components/dashboard/syncOnly/syncOnly.scss
+++ b/react/src/components/dashboard/syncOnly/syncOnly.scss
@ -0,0 +1,37 @@
+.sync-only-forks {
+  color: #757575;
+
+  .modal-body {
+    overflow-y: auto;
+  }
+  .badge{
+    &.up {
+      position: absolute;
+      top: 40px;
+      left: 65px;
+      margin: 0 5px;
+    }
+  }
+  .avatar {
+    width: 20%;
+    display: inline-block;
+    text-align: center;
+    vertical-align: top;
+
+    img {
+      width: 55px;
+      display: inherit;
+    }
+  }
+  .progress-bars {
+    padding-left: 40px;
+    display: inline-block;
+    width: 80%;
+    margin: 0 auto;
+  }
+  .padding-bottom-60 {
+    &:last-child {
+      padding-bottom: 0 !important;
+    }
+  }
+}
--- a/react/src/components/dashboard/walletsData/pagination.js
+++ b/react/src/components/dashboard/walletsData/pagination.js
@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PaginationRender from './pagination.render';

 export default class TablePaginationRenderer extends Component {
-  constructor (props) {
+  constructor(props) {
    super();
    this.state = {
      page: props.page
--- a/react/src/components/dashboard/walletsData/walletsData.scss
+++ b/react/src/components/dashboard/walletsData/walletsData.scss
@ -0,0 +1,89 @@
+.search-box {
+  float: right;
+  padding-right: 0;
+}
+.basilisk-progress-bar {
+  position: absolute;
+  width: 100%;
+}
+.breadcrumb--basilisk,
+.breadcrumb--native {
+  top: 0;
+}
+.dropdown-menu {
+  .no--hover {
+    pointer-events: none;
+  }
+}
+.ReactTable {
+  border: none;
+
+  .pagination-bottom {
+    margin-top: 35px;
+  }
+  .rt-td {
+    text-align: center;
+  }
+  .rt-table {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .rt-thead .rt-th,
+  .rt-thead .rt-td {
+    padding: 10px 5px;
+  }
+  .rt-tr.-odd div,
+  .rt-tr.-even div {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  .-pagination,
+  .rt-thead,
+  .rt-tfoot {
+    border: none;
+  }
+  .rt-tfoot {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .rt-thead {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .colum--direction {
+    width: 40px !important;
+    flex: 40 0 auto !important;
+    padding-right: 10px;
+  }
+  .colum--txinfo {
+    width: 40px !important;
+    flex: 40 0 auto !important;
+  }
+  .colum--type {
+    width: 40px !important;
+    flex: 40 0 auto !important;
+  }
+  .-pagination {
+    .-pageJump {
+      margin-right: 5px;
+      margin-left: 5px;
+    }
+    .-btn {
+      color: #757575;
+      background-color: #efefef;
+      border: 1px solid #e0e0e0;
+
+      &:hover {
+        color: #fff;
+      }
+    }
+    .-btn[disabled]:hover {
+      color: #757575;
+    }
+  }
+  .rt-noData {
+    top: 46px;
+    width: 100%;
+    text-align: center;
+    height: 98px;
+    padding: 38px;
+    background: rgba(255, 255, 255, 0.85);
+  }
+}
--- a/react/src/components/dashboard/walletsNative/walletsNative.js
+++ b/react/src/components/dashboard/walletsNative/walletsNative.js
@ -26,18 +26,18 @@ class WalletsNative extends React.Component {
    if (data &&
        data.komodod &&
        data.komodod.error) {
-        switch (data.komodod.error) {
-          case 'run -reindex':
-            Store.dispatch(
-              triggerToaster(
-                translate('TOASTR.RESTART_AGAMA_WITH_REINDEX_PARAM'),
-                translate('TOASTR.WALLET_NOTIFICATION'),
-                'info',
-                false
-              )
-            );
-            break;
-        }
+      switch (data.komodod.error) {
+        case 'run -reindex':
+          Store.dispatch(
+            triggerToaster(
+              translate('TOASTR.RESTART_AGAMA_WITH_REINDEX_PARAM'),
+              translate('TOASTR.WALLET_NOTIFICATION'),
+              'info',
+              false
+            )
+          );
+          break;
+      }
    }
  }

@ -81,7 +81,7 @@ const mapStateToProps = (state) => {
      mode: state.ActiveCoin.mode,
    }
  };
- 
+
 };

 export default connect(mapStateToProps)(WalletsNative);
--- a/react/src/components/login/login.scss
+++ b/react/src/components/login/login.scss
@ -103,7 +103,7 @@ input[type="password"] {
    z-index: 1;
    top: -5px;
    left: 105%;
-    
+
    &::after {
      content: '';
      position: absolute;
@ -152,4 +152,10 @@ input[type="password"] {
  a {
    color: #fb8c00;
  }
+}
+
+.login-form,
+.register-form {
+  width: 540px;
+  margin: 30px 0;
 }
--- a/react/src/components/overrides.scss
+++ b/react/src/components/overrides.scss
@ -1,6 +1,8 @@
 /* TODO: nesting, separate */

 #app {
+  height: 100%;
+
  > div {
    height: 100%;
  }
@ -28,30 +30,6 @@ body {
  padding-top: 44px;
 }

-.login-form,
-.register-form {
-  width: 540px;
-  margin: 30px 0;
-}
-
-#section-iguana-wallet-settings {
-  background: #f3f4f5;
-
-  .panel-title {
-    cursor: pointer;
-    cursor: hand;
-
-    &:before {
-      content: '\F273';
-    }
-    &.collapsed {
-      &:before {
-        content: '\F278';
-      }
-    }
-  }
-}
-
 #section-dashboard {
  height: 100%;
 }
@ -147,131 +125,12 @@ body {
  }
 }

-.display-sync-only-coins-toggle {
-  cursor: pointer;
-
-  &:hover {
-    color: #ffa726;
-  }
-}
-
-.btn-add-coin-item,
-.btn-add-coin-item-options,
-.btn-save-coin-selection,
-.btn-load-coin-selection {
-  position: absolute;
-  right: 32px;
-  z-index: 50;
-}
-.btn-add-coin-item {
-  right: 60px;
-}
-.btn-add-coin-item-options {
-  padding: 6px;
-}
-.btn-save-coin-selection {
-  top: 60px;
-}
-.btn-load-coin-selection {
-  top: 95px;
-}
-
 .btn-outline-primary {
  color: #FF6600;
  background-color: #fff;
  border-color: #FF6600;
 }

-.add-coin-modal {
-  .modal-body {
-    max-height: 590px;
-    overflow-y: auto;
-  }
-
-  .multi {
-    .col-sm-8 {
-      width: 30%;
-    }
-    .col-sm-12 {
-      &.text-center {
-        width: 60%;
-        padding: 0;
-
-        .col-lg-4 {
-          width: 25%;
-          margin-right: 8%;
-          padding: 0;
-
-          .input{
-            &.to-labelauty+label {
-              max-width: 136px;
-            }
-          }
-        }
-        .col-lg-4 {
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-        .col-sm-1 {
-          width: 44px;
-          padding: 0;
-        }
-      }
-    }
-  }
-}
-
-.sync-only-forks {
-  color: #757575;
-
-  .modal-body {
-    overflow-y: auto;
-  }
-  .badge{
-    &.up {
-      position: absolute;
-      top: 40px;
-      left: 65px;
-      margin: 0 5px;
-    }
-  }
-  .avatar {
-    width: 20%;
-    display: inline-block;
-    text-align: center;
-    vertical-align: top;
-
-    img {
-      width: 55px;
-      display: inherit;
-    }
-  }
-  .progress-bars {
-    padding-left: 40px;
-    display: inline-block;
-    width: 80%;
-    margin: 0 auto;
-  }
-  .padding-bottom-60 {
-    &:last-child {
-      padding-bottom: 0 !important;
-    }
-  }
-}
-
-#SettingsAccordion {
-  .panel {
-    .panel-collapse {
-      transition: all .3s;
-
-      &.collapse {
-        height: 0;
-      }
-    }
-  }
-}
-
 .center {
  text-align: center;
 }
@ -314,6 +173,13 @@ body {
  -webkit-transition: .4s;
  transition: .4s;

+  &.round {
+    border-radius: 34px;
+
+    &:before {
+      border-radius: 50%;
+    }
+  }
  &:before {
    border-radius: 50%;
    position: absolute;
@ -356,15 +222,6 @@ input:checked + .slider:before {
  }
 }

-.slider {
-  &.round {
-    border-radius: 34px;
-    &:before {
-      border-radius: 50%;
-    }
-  }
-}
-
 .pointer {
  cursor: pointer;
 }
@ -373,8 +230,10 @@ input:checked + .slider:before {
  text-align: center;
 }

-.coin-logo.breadcrumb {
-  z-index: 100;
+.coin-logo {
+  &.breadcrumb {
+    z-index: 100;
+  }
 }
 .breadcrumb > li + li:before {
  display: none;
@ -521,10 +380,6 @@ input:checked + .slider:before {
  width: 200px;
 }

-#app {
-  height: 100%;
-}
-
 .spinner {
  width: 50px;
  height: 40px;
@ -625,31 +480,6 @@ select{
  margin-left: 10px;
 }

-.coind-down-modal {
-  .modal-body {
-    height: 60vh;
-
-    > div {
-      height: 100%;
-    }
-    .form-group {
-      &.form-material {
-        &.floating {
-          height: 80%;
-        }
-      }
-    }
-    .page-content {
-      width: 90%;
-      height: 100%;
-
-      textarea {
-        height: 100%;
-      }
-    }
-  }
-}
-
 .backround-gray {
  background: #f3f4f5;
 }
@ -669,12 +499,6 @@ select{
  }
 }

-.qr-modal-send-block {
-  position: absolute;
-  top: 15px;
-  right: 30px;
-}
-
@media only screen and (min-width : 1201px) {
  .wallet-widgets {
    .flex {
@ -751,338 +575,10 @@ select{
  height: 75px;
 }

-#toast-container {
-  > div {
-    padding: 15px 15px 15px 60px;
-    width: 310px;
-    opacity: 1;
-  }
-}
-
 .toggle-filters:hover {
  background-color: #f3f1f1;
 }

-/* jumblr */
-.jumblr {
-  p {
-    width: calc(100% - 100px);
-  }
-  .breadcrumb {
-    padding: 8px 30px;
-    position: relative;
-    top: 0;
-  }
-  .img-responsive {
-    position: absolute;
-    top: -28px;
-    right: 18px;
-
-    .coin {
-      font-size: 30px;
-      position: relative;
-      left: -18px;
-      top: 4px;
-    }
-    .image {
-      width: 60px;
-    }
-  }
-  .header-easydex-section {
-    img {
-      max-width: inherit;
-    }
-  }
-  .copy-string-btn {
-    position: absolute;
-    right: 36px;
-    margin-top: -68px;
-  }
-  .btn-next {
-    position: absolute;
-    top: 60px;
-    right: 32px;
-  }
-  input.labelauty+label,
-  input.labelauty+label {
-    background: #d6d5d5;
-    color: #504e4e;
-  }
-  input.labelauty:checked+label {
-    color: #fff;
-    background-color: #3949ab;
-  }
-  input.labelauty + label:hover .labelauty-unchecked,
-  input.labelauty + label .labelauty-unchecked {
-    color: #504e4e;
-  }
-  .nofloat {
-    float: none;
-    display: inline-block;
-    padding-left: 0;
-  }
-}
-
-.jumblr-mode-selector {
-  .nav-tabs {
-    li {
-      cursor: pointer;
-
-      &.active {
-        > a {
-          cursor: pointer;
-          color: #fff;
-          background-color: #62a8ea;
-          border-color: transparent;
-          border-bottom-color: #62a8ea;
-        }
-      }
-    }
-  }
-
-  .panel-heading {
-    background: #f3f3f3;
-    cursor: pointer;
-  }
-  .panel-title {
-    color: #676767;
-  }
-  .jumblr-addresses-list {
-    .col-xs-3 {
-      padding: 0;
-    }
-  }
-}
-
-.modal-claim-interest {
-  .modal-dialog {
-    width: 70%;
-
-    .table > tbody > tr > td,
-    .table > tbody > tr > th,
-    .table > tfoot > tr > td,
-    .table > tfoot > tr > th,
-    .table > thead > tr > td,
-    .table > thead > tr > th {
-      padding: 8px 30px 8px 0;
-    }
-
-    .claim-btn {
-      position: absolute;
-      right: 29px;
-      top: 66px;
-    }
-    .table-scroll {
-      height: 366px;
-      overflow-y: auto;
-      overflow-x: hidden;
-      width: 100%;
-    }
-    .bold {
-      font-weight: bold;
-    }
-    .green {
-      color: #66bb6a;
-    }
-    .red {
-      color: #f96868;
-    }
-    .locktime {
-      i {
-        font-size: 20px;
-        line-height: 1.1;
-      }
-    }
-
-    .refresh-icon {
-      position: absolute;
-      right: 20px;
-      font-size: 20px;
-      z-index: 100;
-    }
-  }
-}
-
-.search-box {
-  float: right;
-  padding-right: 0;
-}
-
 .no-padding-left {
  padding-left: 0;
-}
-
-.basilisk-progress-bar {
-  position: absolute;
-  width: 100%;
-}
-
-.breadcrumb--basilisk,
-.breadcrumb--native {
-  top: 0;
-}
-
-.dropdown-menu {
-  .no--hover {
-    pointer-events: none;
-  }
-}
-
-.ReactTable {
-  border: none;
-
-  .pagination-bottom {
-    margin-top: 35px;
-  }
-  .rt-td {
-    text-align: center;
-  }
-  .rt-table {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-  }
-  .rt-thead .rt-th,
-  .rt-thead .rt-td {
-    padding: 10px 5px;
-  }
-  .rt-tr.-odd div,
-  .rt-tr.-even div {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-  .-pagination,
-  .rt-thead,
-  .rt-tfoot {
-    border: none;
-  }
-  .rt-tfoot {
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-  }
-  .rt-thead {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  }
-  .colum--direction {
-    width: 40px !important;
-    flex: 40 0 auto !important;
-    padding-right: 10px;
-  }
-  .colum--txinfo {
-    width: 40px !important;
-    flex: 40 0 auto !important;
-  }
-  .colum--type {
-    width: 40px !important;
-    flex: 40 0 auto !important;
-  }
-  .-pagination {
-    .-pageJump {
-      margin-right: 5px;
-      margin-left: 5px;
-    }
-    .-btn {
-      color: #757575;
-      background-color: #efefef;
-      border: 1px solid #e0e0e0;
-
-      &:hover {
-        color: #fff;
-      }
-    }
-    .-btn[disabled]:hover {
-      color: #757575;
-    }
-  }
-  .rt-noData {
-    top: 46px;
-    width: 100%;
-    text-align: center;
-    height: 98px;
-    padding: 38px;
-    background: rgba(255, 255, 255, 0.85);
-  }
-}
-
-.support-box {
-  padding: 15px 20px;
-  width: 220px;
-  display: inline-block;
-  cursor: pointer;
-
-  &-title {
-    font-weight: bold;
-    padding-top: 12px;
-    padding-bottom: 3px;
-  }
-  img {
-    height: 50px;
-  }
-}
-
-.support-box-wrapper {
-  display: inline-block;
-  margin-right: 50px;
-
-  &:last-child, {
-    margin-right: 0;
-  }
-}
-
-.support-box:hover {
-  .support-box-link {
-    color: #5683ad;
-    font-weight: 500;
-  }
-}
-
-.login-settings-modal {
-  #AppUpdate {
-    .col-sm-4 {
-      width: 100%;
-    }
-  }
-  .modal-dialog {
-    width: 80%;
-  }
-  .modal-body {
-    background: #f3f4f5;
-    border-radius: 4px;
-  }
-  .modal-footer {
-    margin-top: 15px;
-  }
-  .page-content {
-    padding-top: 0;
-  }
-  .support-box-wrapper {
-    .support-box {
-      margin: 0;
-      margin-bottom: 20px;
-    }
-  }
-}
-
-.settings-help {
-  font-size: 20px;
-  position: relative;
-  top: 2px;
-  left: 10px;
-  color: #5683ad;
-}
-
-#SettingsAccordion {
-  .toggle {
-    position: relative;
-    top: 4px;
-  }
-  table {
-    width: 100%;
-
-    td {
-      &:first-child {
-        width: 40%;
-      }
-      &:last-child {
-        width: 60%;
-      }
-    }
-  }
 }
--- a/react/src/components/toaster/toaster.scss
+++ b/react/src/components/toaster/toaster.scss
@ -0,0 +1,7 @@
+#toast-container {
+  > div {
+    padding: 15px 15px 15px 60px;
+    width: 310px;
+    opacity: 1;
+  }
+}
--- a/react/src/styles/index.scss
+++ b/react/src/styles/index.scss
@ -34,4 +34,12 @@
@import '../components/dashboard/main/dashboard.scss';
@import '../components/login/login.scss';
@import '../components/overrides.scss';
+@import '../components/dashboard/settings/settings.scss';
+@import '../components/dashboard/walletsData/walletsData.scss';
+@import '../components/dashboard/claimInterestModal/claimInterestModal.scss';
+@import '../components/dashboard/jumblr/jumblr.scss';
+@import '../components/dashboard/qrModal/qrModal.scss';
+@import '../components/dashboard/coindDownModal/coindDownModal.scss';
+@import '../components/dashboard/syncOnly/syncOnly.scss';
+@import '../components/toaster/toaster.scss';
@import '~react-table/react-table.css';