---
# System prepended metadata

title: 'Styles:'

---

# Styles:
- styles declared globally. Should be spitted per component. better to use styles-modules;

# Architecture:
- store config should be declared in separate file.
- redux action types should be declared as constants in separate file; 
- `./components/common/` - APIRequest and all helper functions should be placed in utils dir.
- redux state architecture is very poor. Therefore almost all project keep state inside DOM elements and changing state in same behavior.
  redux state should keep this state.
- `./components/grpc_service_files/` - should be placed in assets. looks like it vendor libs;
- Almost all components - are overloaded, should be splitted and reused where its possible.
- Redux async-middleware is absent. Recommend to use Thunk or Saga to manage async API calls;


# Code
- unused files: `./includes`
- very dirty code (comments, unused code, console.logs)
- code not formatted (prettier should be setup)
- no code standard:
    * some object properties described with string, some w\o;
    * some components using hooks, some classes
    * variable declarations 
- PropTypes doesn't covered in components
- very weird solution for managing modals. used document selectors to open/close modals inside components. 
  React allows to manipulate modals via Portals. (or use material-ui)
- very weird solution for managing custom <select>. used document selectors to open/close <selects> inside components. 
- direct manipulation with DOM -- bad practice, react life-cycle should be used instead.
- `valueFormatter` - duplicated in several places. should be moved to utils and reused.
- `triggerResetModal, closeModal` - duplicated in several places. (see recommendation for modals above)


# Components:
- `BuySell` overloaded component (should be spitted).
 direct manipulation with DOM -- bad practice, react life-cycle should be used instead.
- `CoinCard` - direct manipulation with DOM.
- `MarketAndPerformance` - props as array -- very weird solution. all calculations should be places in utils methods.
    Component is overloaded.
- `DepositSummary` - overloaded component; can be slitted to different views.
- `DepositTwoFa` - direct manipulation with DOM.
- `TradeBuySell` - direct manipulation with DOM.
- `PortfolioTransactionsList` - direct manipulation with DOM. overloaded component;
- `ActivityLog` - unoptimized usage of useEffect, 2nd argument should be provided
- `BankAccountDeposit` - direct manipulation with DOM.
- `BankAccountWithdrawal` - direct manipulation with DOM.
- `BankAccount` - direct manipulation with DOM.
- `Profile` - direct manipulation with DOM.
- `Security` - direct manipulation with DOM.
- `SettingsNavbar` - better to build navbar with array;
- `SignIn` - overloaded component. direct manipulation with DOM
- `CellPhoneBind` - direct manipulation with DOM, unsafe JSON.parse
- `IdentityDetails` - direct manipulation with DOM. overloaded component;
- `Register` - direct manipulation with DOM. overloaded component;
- `UploadDoc` - direct manipulation with DOM. overloaded component;
