From d05b2f536d6c18025eaa11b78f0916d407da0846 Mon Sep 17 00:00:00 2001
From: Meskat <marciniszyn.k@gmail.com>
Date: Tue, 30 Apr 2019 12:14:17 +0200
Subject: [PATCH] PAN-290: Responsiveness and switching to mixin based style
 architecture + minor improvements (#646)

- Bemize and fix styles for targeting select component
- Remove space between currency symbol and value
- When your wallet is equal 0 there should be only 2 decimal values
---
 ...rgeting-custom-option-input.component.scss | 10 ++-
 .../targeting-select.component.html           | 78 ++++-------------
 .../targeting-select.component.scss           | 86 +++++++++----------
 src/app/common/pipes/adshares-token.pipe.ts   |  2 +-
 .../user-wallet/user-wallet.component.html    |  7 +-
 .../user-wallet/user-wallet.component.scss    |  4 +-
 src/styles/_mixins.scss                       | 10 +--
 7 files changed, 80 insertions(+), 117 deletions(-)

diff --git a/src/app/common/components/targeting/targeting-custom-option-input/targeting-custom-option-input.component.scss b/src/app/common/components/targeting/targeting-custom-option-input/targeting-custom-option-input.component.scss
index 84fd97a88..449146ccc 100644
--- a/src/app/common/components/targeting/targeting-custom-option-input/targeting-custom-option-input.component.scss
+++ b/src/app/common/components/targeting/targeting-custom-option-input/targeting-custom-option-input.component.scss
@@ -2,8 +2,15 @@
 
 .targeting-custom-option {
   &__form {
+    @include container(
+      $border-color: pal(gray, light),
+      $padding-vertical: 8px,
+      $padding-horizontal: 8px,
+      $margin-top: 0
+    );
+    border-top-color: transparent;
+    cursor: pointer;
     width: 100%;
-    padding: 8px;
 
     &--input-hidden {
       display: flex;
@@ -25,7 +32,6 @@
   }
 
   &__btn {
-    margin-top: 8px;
     border: none;
     background: transparent;
     display: flex;
diff --git a/src/app/common/components/targeting/targeting-select/targeting-select.component.html b/src/app/common/components/targeting/targeting-select/targeting-select.component.html
index 478e1bb38..acd7cbd94 100644
--- a/src/app/common/components/targeting/targeting-select/targeting-select.component.html
+++ b/src/app/common/components/targeting/targeting-select/targeting-select.component.html
@@ -4,19 +4,13 @@
     [(ngModel)]="searchTerm"
     (input)="onSearchTermChange()"
     title="Search for targeting option"
-    class="
-      dwmth-form-input
-      dwmth-form-input--full"
+    class="targeting-select__input"
     data-test="common-targeting-select-search-input"
   >
   <img
     src="/assets/images/search.svg"
     alt=""
-    class="
-      dwmth-icon--prepend
-      search-icon
-      absolute"
-  >
+    class="targeting-select__search-icon">
 </div>
 
 <button
@@ -24,59 +18,33 @@
   *ngIf="backAvailable"
   (click)="changeViewModel(parentViewModel)"
   role="button"
-  class="
-    dwmth-box
-    dwmth-box--no-margin
-    dwmth-box--light-border
-    parent-option-box"
-  data-test="common-targeting-select-navigate-to-parent-button"
->
+  class="targeting-select__option targeting-select__option--back"
+  data-test="common-targeting-select-navigate-to-parent-button">
   <img
-    class="dwmth-icon--prepend"
+    class="targeting-select__input-icon"
     src="/assets/images/chevron--left.svg"
-    alt="Go back"
-  >
-  <span
-    class="
-      dwmth-copy
-      parent-option"
-    data-test="common-targeting-select-parent-option"
-  >
+    alt="Go back">
+  <span class="targeting-select__parent-option"
+        data-test="common-targeting-select-parent-option">
     {{ parentOption.label }}
   </span>
 </button>
 
 <ul *ngFor="let option of viewModel">
-  <li class="dwmth-box--light-border
-             dwmth-box--no-top-border">
+  <li class="">
     <button
       *ngIf="!optionsHasValue && !option.allowInput"
       [tabindex]="0"
-      class="
-      dwmth-box
-      dwmth-box--no-margin
-      dwmth-box--no-border
-      option
-      relative"
+      class="targeting-select__option"
       (click)="handleOptionClick(option)"
-      data-test="common-targeting-select-option"
-    >
-    <span
-      class="
-        dwmth-copy
-        dwmth-copy--x-dark
-        dwmth-copy--semi"
-      data-test="common-targeting-select-option-label"
-    >
+      data-test="common-targeting-select-option">
       {{ option.label }}
-    </span>
-
       <img
-        class="go-to-category"
+        class="targeting-select__option-arrow"
         src="/assets/images/chevron--right.svg"
-        alt="Go to category"
-      >
+        alt="">
     </button>
+
     <app-targeting-custom-option-input
       *ngIf="option.allowInput"
       [option]="option"
@@ -85,23 +53,9 @@
     <button
       *ngIf="optionsHasValue"
       [tabindex]="0"
-      class="
-      dwmth-box
-      dwmth-box--no-margin
-      dwmth-box--no-border
-      dwmth-box--no-top-border
-      option
-      relative"
-      (click)="toggleItem(option)"
-    >
-    <span
-      class="
-        dwmth-copy
-        dwmth-copy--x-dark
-        dwmth-copy--semi"
-    >
+      class="targeting-select__option"
+      (click)="toggleItem(option)">
       {{ option.label }}
-    </span>
       <span [ngClass]="{'input-valid': option.selected}"
             class="checkmark-unselected"
       ></span>
diff --git a/src/app/common/components/targeting/targeting-select/targeting-select.component.scss b/src/app/common/components/targeting/targeting-select/targeting-select.component.scss
index 41c17355f..b265dcf0c 100644
--- a/src/app/common/components/targeting/targeting-select/targeting-select.component.scss
+++ b/src/app/common/components/targeting/targeting-select/targeting-select.component.scss
@@ -1,56 +1,56 @@
 @import '../../../../../styles.scss';
 
-button {
-  width: 100%;
-  display: flex;
-  align-items: center;
-
-  &:focus {
-    background-color: darken(pal(gray, extreme-light), 1%);
+.targeting-select {
+  &__input {
+    @include input($max-width: initial);
+    width: 100%;
   }
-}
-
-.inactive {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  border: 1px solid pal(gray, mid-light);
-  position: absolute;
-  margin-right: 10px;
-  top: 7px;
-  right: 4px;
-}
 
-.search-icon {
-  top: 15px;
-  right: 15px;
-}
+  &__input-icon {
+    margin-right: 10px;
+  }
 
-.go-to-category {
-  position: absolute;
-  top: 10px;
-  right: 20px;
-}
+  &__search-icon,
+  &__option-arrow {
+    position: absolute;
+    top: 13px;
+    right: 20px;
+  }
 
-.parent-option {
-  @include font(14, normal);
+  &__search-icon {
+    top: 15px;
+  }
 
-  &-box {
-    padding: 6px 15px;
+  &__option {
+    @include container(
+      $border-color: pal(gray, light),
+      $padding-vertical: 8px,
+      $padding-horizontal: 15px,
+      $margin-top: 0
+    );
+    @include copy(
+      $color: pal(navy, light),
+      $font-weight: semi);
     border-top: none;
     cursor: pointer;
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    &:hover,
+    &:focus {
+      background-color: darken(pal(gray, extreme-light), 1%);
+      transition: background-color 0.2s ease;
+      cursor: pointer;
+    }
+
+    &--back {
+      padding: 6px 15px;
+    }
   }
-}
 
-.option {
-  &:hover {
-    background-color: darken(pal(gray, extreme-light), 1%);
-    transition: background-color 0.2s ease;
-    cursor: pointer;
+  &__parent-option {
+    @include copy($font-size: 14)
   }
 }
-
-.targeting-custom-option {
-  display: flex;
-}
diff --git a/src/app/common/pipes/adshares-token.pipe.ts b/src/app/common/pipes/adshares-token.pipe.ts
index 991f77131..1b8de12ac 100644
--- a/src/app/common/pipes/adshares-token.pipe.ts
+++ b/src/app/common/pipes/adshares-token.pipe.ts
@@ -28,7 +28,7 @@ export class AdsharesTokenPipe implements PipeTransform {
       code = format !== 'symbol' ? environment.currencySymbol : '';
     }
 
-    return `${symbol} ${formatMoney(removeDecimalPart(value), precision)} ${code}`;
+    return `${symbol}${formatMoney(removeDecimalPart(value), precision)} ${code}`;
   }
 }
 
diff --git a/src/app/settings/billing/user-wallet/user-wallet.component.html b/src/app/settings/billing/user-wallet/user-wallet.component.html
index 8b103b03b..7626cf4b8 100644
--- a/src/app/settings/billing/user-wallet/user-wallet.component.html
+++ b/src/app/settings/billing/user-wallet/user-wallet.component.html
@@ -23,7 +23,8 @@
       <h1 class="user-wallet__funds"
           data-test="user-total-funds"
       >
-        {{ wallet.walletBalance | formatMoney:11:crypto:code }}
+        {{ wallet.walletBalance > 0 ? (wallet.walletBalance | formatMoney:11:crypto:code) :
+        (wallet.walletBalance | formatMoney:2:crypto:code) }}
       </h1>
 
       <div class="user-wallet__funds-actions">
@@ -71,8 +72,8 @@ <h2 class="user-wallet__title">
         You can spend your bonus funds on advertising but you can't withdraw them.
       </p>
       <p
-         class="user-wallet__funds-in-currency"
-         data-test="bonus-funds-in-currency">
+        class="user-wallet__funds-in-currency"
+        data-test="bonus-funds-in-currency">
         {{ wallet.bonusBalance | calculateInCurrency:2 }}
       </p>
       <strong class="user-wallet__funds"
diff --git a/src/app/settings/billing/user-wallet/user-wallet.component.scss b/src/app/settings/billing/user-wallet/user-wallet.component.scss
index d8ac69bee..501879574 100644
--- a/src/app/settings/billing/user-wallet/user-wallet.component.scss
+++ b/src/app/settings/billing/user-wallet/user-wallet.component.scss
@@ -8,7 +8,9 @@
   flex-wrap: wrap;
 
   &__wallet-box {
-    @include container(20px, 20px);
+    @include container(20px, 20px,
+    $border-color: pal(gray, nearly-white)
+    );
     min-width: 450px;
     flex: 1;
     &--with-margin {
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index e2f172208..b84dfb76e 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -12,19 +12,19 @@
   $padding-horizontal: 8px,
   $padding-vertical: 8px,
   $background-color: pal(white),
-  $border-color: pal(gray, nearly-white),
+  $border-color: pal(white),
   $margin-top: 2px,
   $margin-bottom: 0,
   $border-width: 1px
 ) {
   border-radius: 2px;
   background-color: $background-color;
-  border: $border-width solid $background-color;
+  border: $border-width solid $border-color;
   padding: $padding-vertical $padding-horizontal;
   margin-top: $margin-top;
   margin-bottom: $margin-bottom;
 
-  & + & {
+  & > & {
     border: none;
   }
 }
@@ -86,13 +86,13 @@
   }
 }
 
-@mixin input() {
+@mixin input($max-width: 320px) {
   @include font(16, medium);
   border-radius: 2px;
   background-color: #f8f9fc;
   border: solid 1px pal(gray, light);
   padding: 12px 13px 12px 18px;
-  max-width: 320px;
+  max-width: $max-width;
 }
 
 @mixin label(