Fix: provide changes according to QA (openware#283)

* Fix: accoount activity list pagination * Fix: profile verification container not scrollable * Fix: deposit-history pagination visible * Fix: handle disabled user otp * Fix: change expired session modal styles * Fix: add mobile web alerts * Fix: change delete api key button color * Fix: sign-in/registration modals visability imporvment * Fix: change modal height styles * Fix: change wallet action buttons styles * Fix: add beneficiaries fetch on update * Fix: change basic color theme to dark * Fix: cancel button added for input in CurrenMarketInfo component * Fix: change filter input clear * Fix: add wallet banner on withdraw screen * Fix: num pad for price/amount fields on Trading page * Feature: dropdown insted of tabs for orders and charts headers * Fix: change dropdown style names * Feature: remove toolbars from Trading view for mobile devices * Fix: polish mobile chart styles * Feature: add order input action buttons * Feature: add order price input action buttons * Fix: add check for finex enabled to price filters * Fix: change error message styles * Fix: add check for existing price filters * Fix: clear user data from alert error * Fix: change ob styles and depth fetch hook * Fix: change search field icon * Fix: add orders pagination * Fix: change search icon indentation * Fix: remove arrows from order input * Fix: change KYC upload image styles Co-authored-by: Kohelbekker <[email protected]>
nunumichael · Nov 19, 2020 · 89cc4c7 · 89cc4c7
1 parent a9dd546
commit 89cc4c7
Show file tree

Hide file tree

Showing 69 changed files with 877 additions and 202 deletions.
diff --git a/...o/market/orders/GET--limit=25&page=1.mock → ...o/market/orders/GET--page=1&limit=25.mock b/...o/market/orders/GET--limit=25&page=1.mock → ...o/market/orders/GET--page=1&limit=25.mock
diff --git a/...o/market/orders/GET--limit=25&page=2.mock → ...o/market/orders/GET--page=2&limit=25.mock b/...o/market/orders/GET--limit=25&page=2.mock → ...o/market/orders/GET--page=2&limit=25.mock
diff --git a/mocks/api/v2/peatio/market/orders/GET.mock b/mocks/api/v2/peatio/market/orders/GET.mock
@@ -18,31 +18,5 @@ Access-Control-Allow-Credentials: true
  "remaining_volume":"123.1234",
  "executed_volume":"50",
  "trades_count":0
- },
- { "id":16,
- "side":"sell",
- "ord_type":"limit",
- "price":"0.3",
- "avg_price":"0.4",
- "state":"wait",
- "market":"ethbtc",
- "created_at":"2018-11-20T10:24:48+01:00",
- "origin_volume":"123.1234",
- "remaining_volume":"123.1234",
- "executed_volume":"0.0",
- "trades_count":0
- },
- { "id":162,
- "side":"buy",
- "ord_type":"market",
- "price":"0.1",
- "avg_price":"0.4",
- "state":"wait",
- "market":"btczar",
- "created_at":"2018-11-09T13:21:55+01:00",
- "origin_volume":"123.1234",
- "remaining_volume":"123.1234",
- "executed_volume":"0.0",
- "trades_count":0
  }
 ]
diff --git a/public/css/tradingview.css b/public/css/tradingview.css
@@ -1,3 +1,7 @@
+html.theme-dark .chart-page {
+ background-color: var(--body-background-color);
+}
+
 html.theme-dark .group-wWM3zP_M- {
- background-color: var(--trading-view-background);
+ background-color: transparent;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -52,6 +52,7 @@ const RenderDeviceContainers = () => {
  return (
  <div className="pg-mobile-app">
  <MobileHeader />
+ <AlertsContainer/>
  <LayoutContainer/>
  <MobileFooter />
  </div>

diff --git a/src/assets/images/SearchFieldCloseIcon.tsx b/src/assets/images/SearchFieldCloseIcon.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface SearchFieldCloseIconProps {
+ className?: string;
+ onClick?: (e?: any) => void;
+}
+
+export const SearchFieldCloseIcon: React.FC<SearchFieldCloseIconProps> = (props: SearchFieldCloseIconProps) => {
+ return (
+ <svg className={props.className} onClick={props.onClick} width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M7.5 0C11.6475 0 15 3.3525 15 7.5C15 11.6475 11.6475 15 7.5 15C3.3525 15 0 11.6475 0 7.5C0 3.3525 3.3525 0 7.5 0ZM10.1925 3.75L7.5 6.4425L4.8075 3.75L3.75 4.8075L6.4425 7.5L3.75 10.1925L4.8075 11.25L7.5 8.5575L10.1925 11.25L11.25 10.1925L8.5575 7.5L11.25 4.8075L10.1925 3.75Z" fill="var(--icons)"/>
+ </svg>
+ );
+};
diff --git a/src/components/CustomInput/CustomInput.pcss b/src/components/CustomInput/CustomInput.pcss
@@ -38,3 +38,15 @@
  transition: background-color 5000s ease-in-out 0s;
  }
 }
+
+.pg-mobile-app .custom-input {
+ font-size: 12px;
+
+ input {
+ font-size: 14px;
+
+ &::placeholder {
+ font-size: 14px;
+ }
+ }
+}
diff --git a/src/components/Dropdown/Dropdown.pcss b/src/components/Dropdown/Dropdown.pcss
@@ -4,7 +4,7 @@
  position: relative;
 
  .show > .btn-primary.dropdown-toggle {
- border: 1px solid var(--input-border-color-active) !important;
+ border: 1px solid var(--input-border-color-active);
  box-shadow: none !important;
  color: var(--dropdown-text-color-active) !important;
 
@@ -32,9 +32,9 @@
 
  &:focus,
  &:active {
- border: 1px solid var(--input-border-color-active) !important;
+ border: 1px solid var(--input-border-color-active);
  box-shadow: none !important;
- color: var(--dropdown-text-color-active) !important;
+ color: var(--dropdown-text-color-active);
  }
 
  &::after {
@@ -76,4 +76,63 @@
  }
  }
  }
+
+ &--mobile {
+ height: 34px;
+
+ .show > .btn-primary.dropdown-toggle {
+ border: 0;
+ color: var(--primary-cta-color);
+ }
+
+ .dropdown {
+ &-toggle,
+ &-toggle:focus,
+ &-toggle:active {
+ border: 0;
+ color: var(--primary-cta-color);
+ height: 34px;
+ }
+
+ &-toggle {
+ background: var(--tab-panel-background-color) !important;
+ color: var(--primary-cta-color);
+ display: flex;
+ font-size: 14px;
+ justify-content: flex-start;
+ min-width: 60px;
+ padding: 5px 8px;
+
+ .cr-dropdown__arrow {
+ padding-left: 5px;
+ position: initial;
+
+ path {
+ fill: var(--primary-cta-color);
+ }
+ }
+ }
+
+ .dropdown-menu {
+ border-radius: 4px;
+ min-width: 0;
+ top: -32px !important;
+
+ .dropdown-item {
+ align-items: center;
+ border-radius: 4px;
+ display: flex;
+ font-size: 14px;
+ height: 36px;
+ justify-content: flex-start;
+ padding: 0 12px;
+
+ &:nth-child(1) {
+ background: var(--primary-cta-color);
+ border-radius: 4px 4px 0 0;
+ }
+ }
+ }
+ }
+ }
 }
diff --git a/src/components/EmailForm/EmailForm.pcss b/src/components/EmailForm/EmailForm.pcss
@@ -140,3 +140,30 @@
  }
  }
 }
+
+@media screen and (max-width: 767px), (max-height: 599px) {
+ .cr-email-form {
+ background: unset;
+ margin: 0 auto;
+ }
+
+ .cr-email-form__form-content {
+ background: var(--body-background-color);
+ position: static;
+ }
+
+ .cr-email-form__button-wrapper {
+ position: static;
+
+ button {
+ font-size: 14px;
+ height: 41px;
+ text-transform: uppercase;
+ }
+ }
+
+ .cr-email-form__group--focused input:focus {
+ border-color: var(--button-primary-cta-background-color);
+ border-width: 2px;
+ }
+}
diff --git a/src/components/EmailForm/index.tsx b/src/components/EmailForm/index.tsx
@@ -99,7 +99,7 @@ const EmailForm = React.memo((props: EmailFormProps) => {
  handleFocusInput={props.handleFieldFocus}
  classNameLabel="cr-email-form__label"
  classNameInput="cr-email-form__input"
- autoFocus={true}
+ autoFocus={!isMobileDevice}
  />
  {emailError && <div className="cr-email-form__error">{emailError}</div>}
  </div>

diff --git a/src/components/ExpiredSessionModal/ExpiredSessionModal.pcss b/src/components/ExpiredSessionModal/ExpiredSessionModal.pcss
@@ -53,3 +53,9 @@
  }
  }
 }
+
+@media screen and (max-width: 767px), (max-height: 599px) {
+ .expired-session-modal .cr-modal .cr-email-form__button-wrapper {
+ padding: 0 14px;
+ }
+}
diff --git a/src/components/FilterInput/index.tsx b/src/components/FilterInput/index.tsx
@@ -1,5 +1,6 @@
 import classnames from 'classnames';
 import * as React from 'react';
+import { SearchFieldCloseIcon } from '../../assets/images/SearchFieldCloseIcon';
 import SearchIcon from './Search.svg';
 
 interface OnChangeEvent {
@@ -48,8 +49,8 @@ export class FilterInput extends React.Component<FilterInputProps, SearchInputSt
  this.filterList = this.filterList.bind(this);
  }
 
- public filterList(event: OnChangeEvent) {
- const value = event.target.value;
+ public filterList(event?: OnChangeEvent) {
+ const value = event ? event.target.value : '';
  const { data, filter } = this.props;
 
  const result = data
@@ -76,6 +77,9 @@ export class FilterInput extends React.Component<FilterInputProps, SearchInputSt
  placeholder={placeholder ? placeholder : 'Search'}
  onChange={this.filterList}
  />
+ <span className="cr-search__cancel">
+ <SearchFieldCloseIcon onClick={e => this.filterList()} />
+ </span>
  </div>
  );
  }

diff --git a/src/components/MarketDepths/index.tsx b/src/components/MarketDepths/index.tsx
@@ -93,7 +93,7 @@ export interface MarketDepthsProps {
  gradientHide?: boolean;
  /**
  * Current color theme mode
- * @default 'basic'
+ * @default 'dark'
  */
  colorTheme?: string;
 }
@@ -138,14 +138,14 @@ const getColorSettings = (colorTheme?: string) => {
  }
 
  return {
- strokeAreaAskColor: convertRgbToHex(getStylesValueByKey(colors.basic.depth.strokeAreaAsk)),
- strokeAreaBidColor: convertRgbToHex(getStylesValueByKey(colors.basic.depth.strokeAreaBid)),
- strokeAxisColor: convertRgbToHex(getStylesValueByKey(colors.basic.depth.strokeAxis)),
- strokeGridColor: convertRgbToHex(getStylesValueByKey(colors.basic.depth.strokeGrid)),
- fillAreaAskColor: convertRgbToHex(getStylesValueByKey(colors.basic.depth.fillAreaAsk)),
- fillAreaBidColor: convertRgbToHex(getStylesValueByKey(colors.basic.depth.fillAreaBid)),
- gridBackgroundStartColor: convertRgbToHex(getStylesValueByKey(colors.basic.depth.gridBackgroundStart)),
- gridBackgroundEndColor: convertRgbToHex(getStylesValueByKey(colors.basic.depth.gridBackgroundEnd)),
+ strokeAreaAskColor: convertRgbToHex(getStylesValueByKey(colors.dark.depth.strokeAreaAsk)),
+ strokeAreaBidColor: convertRgbToHex(getStylesValueByKey(colors.dark.depth.strokeAreaBid)),
+ strokeAxisColor: convertRgbToHex(getStylesValueByKey(colors.dark.depth.strokeAxis)),
+ strokeGridColor: convertRgbToHex(getStylesValueByKey(colors.dark.depth.strokeGrid)),
+ fillAreaAskColor: convertRgbToHex(getStylesValueByKey(colors.dark.depth.fillAreaAsk)),
+ fillAreaBidColor: convertRgbToHex(getStylesValueByKey(colors.dark.depth.fillAreaBid)),
+ gridBackgroundStartColor: convertRgbToHex(getStylesValueByKey(colors.dark.depth.gridBackgroundStart)),
+ gridBackgroundEndColor: convertRgbToHex(getStylesValueByKey(colors.dark.depth.gridBackgroundEnd)),
  };
 };
 

diff --git a/src/components/Order/index.tsx b/src/components/Order/index.tsx
@@ -89,6 +89,7 @@ export interface OrderComponentProps {
  * default tab index
  */
  defaultTabIndex?: number;
+ isMobileDevice?: boolean;
  currentMarketFilters: FilterPrice[];
  translate: (id: string, value?: any) => string;
 }
@@ -179,6 +180,7 @@ export class Order extends React.Component<OrderComponentProps, State> {
  asks,
  bids,
  currentMarketFilters,
+ isMobileDevice,
  listenInputPrice,
  translate,
  } = this.props;
@@ -217,6 +219,7 @@ export class Order extends React.Component<OrderComponentProps, State> {
  handleAmountChange={this.handleAmountChange}
  handleChangeAmountByButton={this.handleChangeAmountByButton}
  currentMarketFilters={currentMarketFilters}
+ isMobileDevice={isMobileDevice}
  translate={translate}
  />
  ),

diff --git a/src/components/OrderForm/OrderForm.pcss b/src/components/OrderForm/OrderForm.pcss
@@ -13,8 +13,8 @@
  display: flex;
  flex-direction: row;
  font-size: 12px;
- height: 24px;
- margin-top: 80px;
+ height: 0;
+ margin-top: 68px;
  opacity: 0;
  padding: 0 14px;
  position: fixed;
@@ -24,6 +24,8 @@
  z-index: 10;
 
  &--visible {
+ height: 24px;
+ margin-top: 80px;
  opacity: 1;
  }
  }