Merge pull request #214 from Cryptorubic/develop

Develop
Cryptorubic · Apr 9, 2021 · 2867c9f · 2867c9f
2 parents e51498f + b6071d9
commit 2867c9f
Show file tree

Hide file tree

Showing 54 changed files with 1,584 additions and 29,787 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/core/header/components/header/components/user-profile/user-profile.component.ts b/src/app/core/header/components/header/components/user-profile/user-profile.component.ts
@@ -45,6 +45,7 @@ export class UserProfileComponent implements AfterViewInit {
     this.router.events.subscribe(event => {
       if (event instanceof NavigationStart) {
         this.headerStore.setUserMenuOpeningStatus(false);
+        this.headerStore.setMobileMenuOpeningStatus(false);
         this.headerStore.setConfirmModalOpeningStatus(false);
       }
     });

diff --git a/src/app/core/header/services/header.store.ts b/src/app/core/header/services/header.store.ts
@@ -78,6 +78,10 @@ export class HeaderStore {
     return this.$isMobileMenuOpened.asObservable();
   }
 
+  public setMobileMenuOpeningStatus(value): void {
+    this.$isMobileMenuOpened.next(value);
+  }
+
   public toggleMobileMenuOpeningStatus(): void {
     const currentValue = this.$isMobileMenuOpened.value;
     this.$isMobileMenuOpened.next(!currentValue);

diff --git a/src/app/features/bridge-page/components/bridge/bridge.component.scss b/src/app/features/bridge-page/components/bridge/bridge.component.scss
@@ -75,17 +75,7 @@
   }
 }
 
-@include b(800) {
-  .bridge-container {
-    padding-top: 115px;
-  }
-}
-
 @include b(600) {
-  .bridge-container {
-    padding: 115px 10px 0;
-  }
-
   .bridge-form {
     flex-direction: column;
   }

diff --git a/src/app/features/bridge-page/components/brifge-form/bridge-form.component.scss b/src/app/features/bridge-page/components/brifge-form/bridge-form.component.scss
@@ -1,4 +1,5 @@
-@import '../../../../../scss/mixins';
+@import 'src/scss/mixins';
+@import 'src/scss/vars';
 
 .index-start-form__wrapper {
   clear: both;
@@ -162,7 +163,7 @@
 
     border-radius: 5px;
 
-    box-shadow: inset 0 0 5px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: $shadow-block;
 
     &:first-child {
       margin-right: 7px;

diff --git a/...ok-trade-page/components/order-book-trade/components/token-form/token-form.component.scss b/...ok-trade-page/components/order-book-trade/components/token-form/token-form.component.scss
@@ -1,4 +1,5 @@
 @import 'src/scss/vars';
+@import 'src/scss/mixins';
 
 .token-block {
   background: white;
@@ -148,6 +149,15 @@
 
   padding: 15px 20px 19px 19px;
 
+  @include b($laptop) {
+    display: flex;
+    flex-direction: column;
+
+    > *:not(:last-child) {
+      margin-bottom: 15px;
+    }
+  }
+
   &__amount-input {
     padding: 12px;
 

diff --git a/...eatures/order-book-trade-page/components/order-book-trade/order-book-trade.component.scss b/...eatures/order-book-trade-page/components/order-book-trade/order-book-trade.component.scss
@@ -1,4 +1,12 @@
 @import 'src/scss/vars';
+@import 'src/scss/mixins';
+
+.trade {
+  @include b($desktop) {
+    padding: 0 2vw;
+    overflow: hidden;
+  }
+}
 
 .spinner-container {
   display: flex;
@@ -13,6 +21,10 @@
   max-width: 1180px;
   margin: 140px auto 80px;
 
+  @include b($mobile-md) {
+    margin-top: 90px;
+  }
+
   &__header {
     margin-bottom: 15px;
   }
@@ -33,10 +45,19 @@
   grid-gap: 30px;
   align-items: center;
 
+  @include b($mobile-md) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
   &__tokens-names {
     color: $dark;
     font-weight: bold;
     font-size: 25px;
+
+    @include b($mobile-md) {
+      margin-left: 0;
+    }
   }
 
   &__state {
@@ -47,6 +68,10 @@
 
     font-size: 24px;
 
+    @include b($mobile-md) {
+      margin-left: 15px;
+    }
+
     &::before {
       position: relative;
       top: -3px;
@@ -140,6 +165,11 @@
   grid-template-columns: 1fr 1fr;
 
   color: $dark;
+
+  @include b($tablet) {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 .trade-options {
@@ -154,6 +184,11 @@
 
   background: white;
 
+  @include b($mobile-md) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
   &__break {
     flex-basis: 100%;
 
@@ -169,11 +204,25 @@
 
   width: fit-content;
 
+  @include b($mobile-md) {
+    margin-bottom: 15px;
+  }
+
   &_public {
     flex-direction: row;
     grid-gap: 15px;
 
     margin-left: auto;
+
+    @include b($laptop) {
+      margin-top: 15px;
+      margin-left: 0;
+    }
+
+    @include b($mobile-md) {
+      margin-bottom: 0;
+      margin-left: 0;
+    }
   }
 
   &_broker {
@@ -187,6 +236,10 @@
     margin-top: 35px;
     margin-left: auto;
 
+    @include b($mobile-md) {
+      margin-left: 0;
+    }
+
     app-primary-button {
       width: 160px;
     }
@@ -207,6 +260,10 @@
 
     &_copy-link {
       color: $main-green;
+
+      @include b($mobile-md) {
+        font-size: 16px;
+      }
     }
 
     &_button {
@@ -264,6 +321,10 @@
 .copy-link {
   position: relative;
 
+  @include b($mobile-md) {
+    align-items: flex-start;
+  }
+
   &__copied-notification {
     position: absolute;
     top: -7px;

diff --git a/...aps-page/instant-trades/components/instant-trades-form/instant-trades-form.component.html b/...aps-page/instant-trades/components/instant-trades-form/instant-trades-form.component.html
@@ -118,24 +118,20 @@
                 {{ tradeController.trade.gasFeeInEth.toFixed(3) }}
                 ETH ≈ {{ tradeController.trade.gasFeeInUsd.toFixed(1) }}$
               </span>
-              <app-info-tooltip [emptyIcon]="true">
-                {{
-                  'Estimated gas fee amount. It will be required to provide more gas in MetaMask to complete the trade, the extra gas will be returned after the transaction is completed.'
-                    | translate
-                }}
-              </app-info-tooltip>
+
+              <img 
+                src="/assets/images/icons/info.svg"
+                matTooltip="{{ 'Estimated gas fee amount. It will be required to provide more gas in MetaMask to complete the trade, the extra gas will be returned after the transaction is completed.' | translate }}"
+                alt="{{ 'Estimated gas fee amount. It will be required to provide more gas in MetaMask to complete the trade, the extra gas will be returned after the transaction is completed.' | translate }}" />
             </div>
 
             <div class="selection-block__warning">
               <app-error-disclaimer
                 *ngIf="checkIfError(index)"
+                matTooltip="{{ 'Please make sure that selected token is supported on the specified DEX and try again later.' | translate }}"
                 [errorText]="
                   'Trading on ' + tradeController.tradeProviderInfo.label + ' is not available.'
                 "
-                [tooltipText]="
-                  'Please make sure that selected token is supported on the specified DEX and try again later.'
-                    | translate
-                "
               >
               </app-error-disclaimer>
             </div>

diff --git a/...aps-page/instant-trades/components/instant-trades-form/instant-trades-form.component.scss b/...aps-page/instant-trades/components/instant-trades-form/instant-trades-form.component.scss
@@ -1,3 +1,4 @@
+@import 'src/scss/mixins';
 @import 'src/scss/vars';
 
 .instant-trade {
@@ -9,6 +10,7 @@
     top: 18px;
     right: 30px;
 
+    max-width: calc(100% - 60px);
     margin-left: auto;
   }
 }
@@ -136,6 +138,10 @@
     margin-right: 8px;
 
     opacity: 0.5;
+
+    img {
+      vertical-align: bottom;
+    }
   }
 }
 
@@ -163,3 +169,95 @@
     }
   }
 }
+
+app-tooltip {
+  position: absolute;
+  right: -88px;
+  bottom: calc(100% - 7px);
+
+  z-index: 10;
+
+  font-size: 11px;
+
+  text-align: center;
+
+  visibility: hidden;
+  opacity: 0;
+
+  transition: opacity 0.3s ease-in-out;
+}
+
+@include b($laptop) {
+  .instant-trade-form {
+    display: block;
+
+    &__from-section_lowered {
+      margin-top: 0;
+      margin-bottom: 22px;
+    }
+
+    &__arrow-section {
+      display: none;
+    }
+  }
+
+  .selection-block {
+    &__label {
+      left: 0;
+    }
+
+    &__warning {
+      margin-bottom: 7px;
+    }
+  }
+}
+
+@include b($tablet) {
+  .instant-trade {
+    &-form {
+      &__from-section,
+      &__to-section {
+        padding: 20px 13px;
+        box-shadow: $shadow-block;
+      }
+
+      &__to-section {
+        display: block;
+
+        .instant-trade-button:nth-child(2) {
+          margin-bottom: 22px;
+        }
+      } 
+
+      &_from-section_lowered {
+        margin-bottom: 0;
+      }
+    }
+
+    &-button {
+      top: auto;
+
+      &_second {
+        margin-top: 22px;
+      }
+    }
+  }
+
+  .instant-trade-form {
+    display: block;
+  }
+}
+
+@include b($mobile-sm) {
+  .instant-trade {
+    &__warning {
+      right: 10px;
+
+      max-width: calc(100% - 20px);
+    }
+  }
+
+  .instant-trade-form {
+    padding: 27px 10px 29px;
+  }
+}
diff --git a/src/app/features/swaps-page/instant-trades/instant-trades.module.ts b/src/app/features/swaps-page/instant-trades/instant-trades.module.ts
@@ -12,10 +12,11 @@ import { BurgerSwapService } from './services/burger-swap-service/burger-swap-se
 import { OneInchEthService } from './services/one-inch-service/one-inch-eth-service/one-inch-eth.service';
 import { OneInchBscService } from './services/one-inch-service/one-inch-bsc-service/one-inch-bsc.service';
 import { PancakeSwapService } from './services/pancake-swap-service/pancake-swap.service';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
   declarations: [InstantTradesComponent, InstantTradesFormComponent, InstantTradesTableComponent],
-  imports: [CommonModule, TradesModule, SharedModule],
+  imports: [CommonModule, TradesModule, SharedModule, MatTooltipModule],
   exports: [InstantTradesComponent],
   providers: [
     {

diff --git a/...ponents/order-books-form/order-books-form-options/order-books-form-options.component.html b/...ponents/order-books-form/order-books-form-options/order-books-form-options.component.html
@@ -40,7 +40,7 @@
       </div>
     </div>
 
-    <div class="form-section__block form-section-block">
+    <div class="form-section__block form-section-block form-section-block_deal">
       <div class="form-section-block__input-container input-container">
         <label class="input-container__label" for="is-public-checkbox-id">Public deal</label>
         <input