src/app/modules/blockchain/marketing/eth-modal.component.html

@@ -3,7 +3,7 @@
   (closed)="close.next(true)"
   >
 
-  <div class="m-blockchain--marketing--modal">
+  <div class="m-blockchain--marketing--modal m-blockchain__ethModal">
 
     <h2>Buy ETH</h2>
 
@@ -12,7 +12,7 @@
         <input type="number"
           class="m-input"
           [(ngModel)]="usd"
-          max="50"
+          max="40"
           />
         <label>USD</label>
       </div>
@@ -29,20 +29,26 @@
       </div>
     </div>
 
-    <p>ETH is estimated at 1 ETH = <b>$</b>{{ ethRate }}. The checkout process will produce a more accurate ETH value.</p>
+    <p class="m-blockchainEthModal__ethPrice">
+      ETH is estimated at 1 ETH = <b>$</b>{{ ethRate }}. The checkout process will produce a more accurate ETH value.
+    </p>
 
-    <p class="m-error mdl-color-text--red" *ngIf="usd > 50">
-      You can not purchase more than $50 worth of ETH
+    <p class="m-error mdl-color-text--red" *ngIf="usd > 40">
+      You can not purchase more than $40 worth of ETH
     </p>
 
     <button class="m-btn m-btn--slim m-btn--action" (click)="buy()" *ngIf="hasMetamask">
       Buy with SendWyre
     </button>
 
-    <a href="https://metamask.io/" target="_blank" *ngIf="!hasMetamask">
+    <a href="https://metamask.io/" target="_blank" *ngIf="!hasMetamask && !isMobile()">
       <button class="m-btn m-btn--slim m-btn--action">Download Metamask</button>
     </a>
 
+    <a *ngIf="!hasMetamask && isMobile()">
+      <button class="m-btn m-btn--slim">Sorry, this feature is only available on desktop</button>
+    </a>
+
   </div> 
 
 </m-modal>

src/app/modules/blockchain/marketing/eth-modal.component.scss

 .m-blockchainEthModal__form {
   margin: 36px 0;
 
+  &.m-layout__row {
+    @media screen and (max-width: 900px) {
+      flex-wrap: wrap;
+      align-items: center;
+      flex-direction: column;
+    }
+  }
+
   .m-input {
     padding: 16px;
     font-size: 24px;
@@ -25,3 +33,14 @@
     padding: 0 16px;
   }
 }
+
+.m-blockchain__ethModal {
+  .m-btn.m-btn--slim {
+    height: auto;
+  }
+  .m-blockchainEthModal__ethPrice {
+    @media screen and (max-width: 500px) {
+      display: none;
+    }
+  }
+}   

src/app/modules/blockchain/marketing/eth-modal.component.ts

@@ -17,6 +17,7 @@ import { BlockchainTdeBuyComponent } from '../tde-buy/tde-buy.component';
 import { Session } from '../../../services/session';
 import { Web3WalletService } from '../web3-wallet.service';
 import { TokenDistributionEventService } from '../contracts/token-distribution-event.service';
+import isMobile from '../../../helpers/is-mobile';
 import * as BN from 'bn.js';
 
 @Component({
@@ -89,4 +90,8 @@ export class BlockchainEthModalComponent implements OnInit {
     this.cd.detectChanges();
   }
 
+  isMobile() {
+    return isMobile();
+  }
+
 }

src/app/modules/groups/profile/profile.component.scss

+@import "defaults";
+
 .m-group__grid {
   display: flex;
   flex-direction: row;
@@ -23,15 +25,25 @@
   }
 
   .m-groupGrid__toggleBtn {
+    display: block;
+    z-index: 99;
+    cursor: pointer;
+    position: fixed;
+    right: 65px;
+    top: 55px;
+    @media screen and (max-width: $min-desktop) {
+      right: 8px;
+      top: 106px;
+    }
+    i {
+      font-size: 32px;
+    }
     .material-icons {
       @include m-theme(){
         text-shadow: 0px 0px 1px themed($m-white), 0px 0px 1px themed($m-white);
         color: themed($m-grey-400);
       }
     }
-    @media screen and (max-width: 900px) {
-      right: 8px !important;
-    }
   }
 }
 

src/app/modules/groups/profile/profile.html

@@ -253,23 +253,10 @@
     </div> <!-- End Feeds -->
   </div> <!-- END LEFT BLOCK -->
 
-  <div class="m-groupGrid__toggleBtn" style="
-    /* left: 0; */
-    position: fixed;
-    top: 55px;
-    right: 65px;
-    display: block;
-    z-index: 99;
-    cursor: pointer;
-    "
-    (click)="toggleConversations()">
-     <i class="material-icons" style="
-      font-size: 32px;
-      " *ngIf="showRight">keyboard_arrow_right</i>
-     <i class="material-icons" style="
-      font-size: 32px;
-      " *ngIf="!showRight">keyboard_arrow_left</i>
-    </div>
+  <div class="m-groupGrid__toggleBtn" (click)="toggleConversations()">
+     <i class="material-icons" *ngIf="showRight">keyboard_arrow_right</i>
+     <i class="material-icons" *ngIf="!showRight">keyboard_arrow_left</i>
+  </div>
 
   <div class="m-groupGrid__right" [hidden]="!showRight">
     <!-- Conversation filter -->

src/app/modules/wallet/balances/balance.component.scss

@@ -129,6 +129,10 @@ m-wallet--balance-money, m-wallet--balance-reward, m-wallet--balance-tokens {
 .m-wallet--balance--metamask {
   margin-top: 16px;
 
+  @media screen and (max-width: $max-mobile) {
+    display: none;
+  }
+
   .m-wallet--balance--metamask-logo {
     width: 50px;
   }