From 1f953448e0b9f6938e465a634a29505e64b3f44f Mon Sep 17 00:00:00 2001
From: Jason Dreyzehner <jason@dreyzehner.com>
Date: Mon, 3 Oct 2016 16:32:45 -0400
Subject: [PATCH] refactor(scss): remove all rules and clean main.scss, create
 shame.scss

---
 public/views/coinbase.html                |   6 +-
 public/views/copayers.html                |   2 +-
 public/views/walletDetails.html           |   4 +-
 src/sass/directives/directives.scss       |   1 +
 src/sass/directives/gravatar.scss         |  18 +
 src/sass/main.scss                        | 565 +---------------------
 src/sass/shame.scss                       | 391 +++++++++++++++
 src/sass/views/copayers.scss              |   7 +
 src/sass/views/includes/tx-status.scss    |  46 +-
 src/sass/views/integrations/coinbase.scss |  11 +
 src/sass/views/views.scss                 |   1 +
 src/sass/views/walletDetails.scss         |  27 ++
 12 files changed, 491 insertions(+), 588 deletions(-)
 create mode 100644 src/sass/directives/directives.scss
 create mode 100644 src/sass/directives/gravatar.scss
 create mode 100644 src/sass/shame.scss
 create mode 100644 src/sass/views/copayers.scss

diff --git a/public/views/coinbase.html b/public/views/coinbase.html
index f23c7fc79..9e4457961 100644
--- a/public/views/coinbase.html
+++ b/public/views/coinbase.html
@@ -101,7 +101,7 @@
     </div>
 
     <ul ng-show="index.coinbaseAccount" class="no-bullet m0 size-12">
-      <li class="line-b line-t p15 pointer"
+      <li class="line-b line-t p15 coinbase-pointer"
         href ui-sref="buyCoinbase">
         <img src="img/buy-bitcoin.svg" alt="buy bitcoin" width="30">
         <span class="m10 text-normal text-bold">Buy Bitcoin</span>
@@ -109,7 +109,7 @@
           <i class="icon-arrow-right3 size-24 right"></i>
         </span>
       </li>
-      <li class="line-b p15 pointer"
+      <li class="line-b p15 coinbase-pointer"
         href ui-sref="sellCoinbase">
         <img src="img/sell-bitcoin.svg" alt="sell bitcoin" width="30">
         <span class="m10 text-normal text-bold">Sell Bitcoin</span>
@@ -128,7 +128,7 @@
       </div>
       <div ng-repeat="(id, tx) in index.coinbasePendingTransactions | orderObjectBy:'updated_at':true track by $index"
         ng-click="coinbase.openTxModal(tx)"
-        class="row collapse last-transactions-content">
+        class="row collapse coinbase-last-transactions-content">
         <div class="large-2 medium-2 small-2 columns">
           <img src="img/bought-pending.svg" alt="bought" width="24" ng-show="(tx.type == 'buy' || (tx.to && tx.type == 'send')) && tx.status != 'completed'">
           <img src="img/bought.svg" alt="bought" width="30" ng-show="(tx.type == 'buy' || (tx.to && tx.type == 'send')) && tx.status == 'completed'">
diff --git a/public/views/copayers.html b/public/views/copayers.html
index 89d97ca40..44222cdbd 100644
--- a/public/views/copayers.html
+++ b/public/views/copayers.html
@@ -20,7 +20,7 @@
                 <ion-spinner class="spinner-dark" icon="lines"></ion-spinner>
               </div>
             </div>
-            <div class="secret">
+            <div class="copayers-secret">
               {{secret || ('Loading...'|translate)}}
             </div>
           </div>
diff --git a/public/views/walletDetails.html b/public/views/walletDetails.html
index e630506f3..7c22d575a 100644
--- a/public/views/walletDetails.html
+++ b/public/views/walletDetails.html
@@ -51,7 +51,7 @@
         </div>
       </div> <!-- amount -->
 
-      <div class="wallet-info">
+      <div class="wallet-details-wallet-info">
         <span ng-include="'views/includes/walletInfo.html'"></span>
       </div>
     </div> <!-- oh -->
@@ -83,7 +83,7 @@
         </div>
       </div>
 
-      <div class="release size-12" ng-show="newRelease" ng-click="openExternalLink('https://github.com/bitpay/copay/releases/latest')">
+      <div class="wallet-details-release size-12" ng-show="newRelease" ng-click="openExternalLink('https://github.com/bitpay/copay/releases/latest')">
         <span>{{newRelease}}</span><i class="icon-arrow-right3 right size-18"></i>
       </div>
 
diff --git a/src/sass/directives/directives.scss b/src/sass/directives/directives.scss
new file mode 100644
index 000000000..79e3edbd3
--- /dev/null
+++ b/src/sass/directives/directives.scss
@@ -0,0 +1 @@
+@import "gravatar"
diff --git a/src/sass/directives/gravatar.scss b/src/sass/directives/gravatar.scss
new file mode 100644
index 000000000..49587d201
--- /dev/null
+++ b/src/sass/directives/gravatar.scss
@@ -0,0 +1,18 @@
+.gravatar {
+  border-radius: 50%;
+}
+
+.gravatar-content {
+  position: relative;
+  height: 70px;
+  border-color: #172565;
+  background-color: #1e3186;
+  background-image: linear-gradient(0deg, #172565, #172565 0%, transparent 0%);
+  color: #fff;
+  margin-bottom: 50px;
+  .gravatar {
+    position: absolute;
+    bottom: -30px;
+    left: 41%;
+  }
+}
diff --git a/src/sass/main.scss b/src/sass/main.scss
index c561a153f..121ecacbd 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -1,569 +1,8 @@
-.addressbook-input, .disabled-input {
-  display: block;
-  margin-bottom: 1.5rem;
-  background-color: #E4E8EC;
-  padding-left: 0.5rem;
-  color: #2C3E50;
-  font-size: 13px;
-  height: 35px;
-  padding-top: 7px;
-}
-
-.alt-currency {
-  padding: 0.05rem 0.2rem;
-  border-radius: 2px;
-  font-size: 10px;
-  color: #fff;
-  font-weight: 700;
-}
-
-.sub-header {
-  background: #F1f3F5;
-  padding: 0.8rem;
-  overflow: hidden;
-}
-
-.status {
-  color: #FFFFFF;
-  background-color: #A02F23;
-  position: absolute;
-  left: 250px;
-  right: 0;
-  bottom: 0;
-  padding: 10px 1rem 10px 0.5rem;
-  z-index: 9;
-  font-size: 14px;
-  text-align: left;
-  line-height: 17px;
-}
-
-.status-first-line {
-  z-index: 9;
-  font-size: 16px;
-}
-
-.box-notification {
-  padding: 0.5rem;
-  border: 1px solid;
-  margin: 10px;
-  a {
-    color: #fff;
-  }
-  &.notice {
-    border-color: #b2b2b2;
-    background-color: #f8f8f8;
-    color: #444;
-  }
-  &.warning {
-    border-color: #e6b500;
-    background-color: #ffc900;
-    color: #fff;
-  }
-  &.error {
-    background-color: #ef473a;
-    border-color: #e42112;
-    color: #fff;
-  }
-}
-
-a.close-notification {
-  position: absolute;
-  top: -4px;
-  right: 10px;
-  font-size: 24px;
-}
-
-ul.tx-copayers {
-  background: #E4E8EC;
-  padding: 0.3rem 0.8rem;
-  margin-left: 0;
-  box-shadow: inset 0 1px 1px 0 rgba(10, 19, 28, 0.12);
-  border-radius: 0 0 3px 3px;
-}
-
-.tx-copayers li {
-  list-style: none;
-  padding: 0.3rem;
-  font-size: 12px;
-  &.bottom-line-copayers {
-    border-bottom: 1px solid #CAD2DA;
-  }
-}
-
-.last-transactions-content {
-  background: #fff;
-  padding: 0.8rem 1rem;
-  cursor: pointer;
-  border-bottom: 1px solid #E4E8EC;
-}
-
-.sign-action {
-  background: #E4E8EC;
-  width: 100%;
-  padding: 1rem;
-  text-align: center;
-}
-
-.icon-circle-active {
-  position: absolute;
-  bottom: 2px;
-  right: 2px;
-}
-
-.icon-sign {
-  padding: 0.2rem 0.3rem;
-  border-radius: 100%;
-  color: #fff;
-  font-size: 10px;
-  margin-top: 3px;
-  &.check {
-    background-color: #3FBC9C;
-  }
-  &.x {
-    background-color: #C0392B;
-  }
-}
-
-.circle-icon {
-  background: #fff;
-  border-radius: 100%;
-  padding: 1.5rem;
-  width: 80px;
-  height: 80px;
-  margin: 0 auto;
-}
-
-.date-message {
-  background-color: #213140;
-  border-radius: 3px;
-  font-size: 12px;
-  padding: 0.2rem 0.4rem;
-  color: #7A8C9E;
-}
-
-.input-note {
-  margin-top: -10px;
-  display: block;
-  margin-bottom: 1rem;
-}
-
-.send-note {
-  background-color: #F8F8FB;
-  padding: 10px;
-  span {
-    margin-bottom: 5px;
-    font-size: 12px;
-    color: #2C3E50;
-  }
-}
-
-.manage a {
-  text-transform: uppercase;
-  font-weight: 700;
-  color: #4B6178;
-  padding: 1.5rem 1rem;
-  display: block;
-  overflow: hidden;
-  span {
-    display: block;
-    margin-top: 8px;
-    float: left;
-  }
-}
-
-ul.manage li {
-  border-bottom: 1px solid #f1f3f5;
-}
-
-.manage a i.circle {
-  background-color: #4B6178;
-  width: 50px;
-  height: 50px;
-  padding: 0.65rem;
-  border-radius: 100%;
-  display: block;
-  font-size: 30px;
-  color: #fff;
-  float: left;
-  margin-right: 20px;
-  &.plus-fixed {
-    padding: 0.1rem 0.9rem;
-  }
-}
-
-.name-wallet {
-  font-size: 14px;
-  font-weight: 400;
-  padding-top: 0 !important;
-  line-height: 14px;
-}
-
-.release {
-  cursor: pointer;
-  cursor: hand;
-  background-color: #E9E9EC;
-  margin-top: -30px;
-  margin-bottom: 5px;
-  padding-top: 30px;
-  padding-bottom: 20px;
-  text-align: center;
-  text-color: #444;
-  span {
-    margin-left: 15px;
-  }
-  i {
-    margin-right: 15px;
-  }
-}
-
-.locked {
-  font-size: 11px;
-  color: #7A8C9E;
-}
-
-.tx-proposal i {
-  padding: .1rem .3rem;
-  background-color: #A5B2BF;
-  border-radius: 100%;
-  color: #fff;
-  &.active {
-    background-color: #A02F23;
-  }
-}
-
-.header-modal {
-  background: #fff;
-  width: 100%;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  position: relative;
-}
-
-.ellipsis {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wallet-selection.wallets {
-  background-color: #213140;
-}
-
-ul.wallet-selection.wallets {
-  margin: 0;
-  overflow: hidden;
-}
-
-.wallet-selection.wallets li {
-  overflow: hidden;
-  padding: 1rem;
-  a {
-    display: block;
-  }
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.icon-wallet {
-  display: block;
-}
-
-.walletHome .icon-wallet {
-  display: inline-block;
-  margin: 0;
-  vertical-align: baseline;
-}
-
-.secret {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  text-align: center;
-  font-size: 14px;
-  margin: 10px;
-}
-
-.session-expired {
-  background: rgba(32, 48, 64, 0.9);
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  color: #fff;
-  z-index: 999;
-  padding-top: 20%;
-  text-align: center;
-  padding-left: 10%;
-  padding-right: 10%;
-}
-
-.wallet-info {
-  position: absolute;
-  top: inherit;
-  left: 10px;
-  bottom: 15px;
-  font-size: 20px;
-  color: #fff;
-}
-
-.camera-icon a {
-  background: #4B6178;
-  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
-  color: #fff;
-  display: block;
-  position: absolute;
-  padding: 15px 17px;
-  border-radius: 100%;
-  top: inherit;
-  right: 15px;
-  bottom: 2px;
-  line-height: 12px;
-}
-
-.send .camera-icon a {
-  top: inherit;
-  bottom: 0;
-}
-
-.popup-txsent i {
-  font-size: 5rem;
-  color: #4A90E2;
-}
-
-.popup-txsigned i, .popup-txrejected i {
-  font-size: 5rem;
-  color: #4A90E2;
-}
-
-.scroll {
-  padding-bottom: 35px;
-}
-
-// History
-.updatingHistory {
-  div {
-    text-align: center;
-  }
-
-  .spinner {
-    margin: auto;
-    height: 2em;
-    text-align: center;
-  }
-}
-
-// POSTFIX
-
-.postfix {
-  position: absolute;
-  right: 10px;
-  background-color: #f8f8f8;
-  color: #444;
-  border-radius: 4px;
-  padding: 2px 10px;
-  cursor: pointer;
-  label &{
-    top: 38px;
-    padding: 0 5px;
-  }
-}
-
-// QR Code
-
-#qr-canvas {
-  display: none;
-}
-
-#qrcode-scanner-video {
-  display: block;
-  margin: 0 auto;
-}
-
-// INPUT CAMERA / VALID / INVALID ICONS
-.input-notification {
-  float: right;
-  margin-right: 10px;
-}
-
-.qr-scan-icon a {
-  display: block;
-  position: absolute;
-  top: 25px;
-  right: 0;
-  padding: 0 10px;
-  font-size: 24px;
-  cursor: pointer;
-}
-
-// General purpose
-.oh {
-  overflow: hidden;
-}
-
-.vm {
-  vertical-align: middle;
-}
-
-.vt {
-  vertical-align: top;
-}
-
-.ma {
-  margin: 0 auto;
-}
-
-.tu {
-  text-transform: uppercase;
-}
-
-.tl {
-  text-transform: lowercase;
-}
-
-.text-italic {
-  font-style: italic;
-}
-
-.text-light {
-  font-weight: 200;
-}
-
-.text-bold {
-  font-weight: 700;
-}
-
-.qr-icon {
-  line-height: 45px;
-}
-
-.add-icon {
-  line-height: 33px;
-}
-
-.no-border {
-  border-style: none;
-  background-color: transparent !important;
-}
-
-input[type=file] {
-  margin-top: 10px;
-  margin-bottom: -10px;
-  line-height: 0px;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.right {
-  float: right;
-}
-
-.left {
-  float: left;
-}
-
-.input-label {
-  max-width: none;
-  width: inherit;
-}
-
-.wallets {
-  height: 110px;
-}
-
-.bar .button.back-button {
-  color: #444;
-  font-size: 14px;
-}
-
-.bar .button.button-clear .icon:before {
-  font-size: 16px;
-}
-
-// No looks likes locked
-input[type="number"] {
-  &[readonly] {
-    background-color: #F6F7F9;
-    padding-left: 0;
-  }
-}
-
-.tab-item {
-  max-width: 100%;
-}
-
-@media all and (max-height: 480px) {
-	.calculator .button-calc .columns { padding: 10px; }
-  .calculator .header-calc { top: 11%; }
-}
-
-@media (min-height: 481px) and (max-height: 670px) {
-	.calculator .button-calc .columns { padding: 15px; }
-  .calculator .header-calc { top: 15%; }
-}
-
-@media all and (min-height: 671px) {
-	.calculator .button-calc .columns { padding: 20px; }
-  .calculator .header-calc { top: 18%; }
-}
-
-/* Turn Off Number Input Spinners */
-
-input[type=number] {
-  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-}
-
-/** Gravatar **/
-
-.gravatar {
-  border-radius: 50%;
-}
-
-.gravatar-content {
-  position: relative;
-  height: 70px;
-  border-color: #172565;
-  background-color: #1e3186;
-  background-image: linear-gradient(0deg, #172565, #172565 0%, transparent 0%);
-  color: #fff;
-  margin-bottom: 50px;
-  .gravatar {
-    position: absolute;
-    bottom: -30px;
-    left: 41%;
-  }
-}
-
-/* Spinner */
-
-.item-icon-left ion-spinner {
-  float: left;
-  margin-left: -3.2em;
-  margin-right: 1em;
-  margin-top: -0.2em;
-  height: 24px;
-}
-
-.disclaimer {
-  .item, .item-content{
-    overflow: auto;
-    text-overflow: initial;
-    white-space: initial;
-  }
-}
-
 @import "fonts";
 @import "ionic";
 @import "common";
 @import "forms";
 @import "mixins/mixins";
 @import "views/views";
+@import "directives/directives";
+@import "shame";
diff --git a/src/sass/shame.scss b/src/sass/shame.scss
new file mode 100644
index 000000000..d79b4da3d
--- /dev/null
+++ b/src/sass/shame.scss
@@ -0,0 +1,391 @@
+/* This is for rules that don't yet have a home.
+ * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/
+ */
+
+.box-notification {
+  padding: 0.5rem;
+  border: 1px solid;
+  margin: 10px;
+  a {
+    color: #fff;
+  }
+  &.notice {
+    border-color: #b2b2b2;
+    background-color: #f8f8f8;
+    color: #444;
+  }
+  &.warning {
+    border-color: #e6b500;
+    background-color: #ffc900;
+    color: #fff;
+  }
+  &.error {
+    background-color: #ef473a;
+    border-color: #e42112;
+    color: #fff;
+  }
+}
+
+.input-label {
+  max-width: none;
+  width: inherit;
+}
+
+.wallets {
+  height: 110px;
+}
+
+// No looks likes locked
+input[type="number"] {
+  &[readonly] {
+    background-color: #F6F7F9;
+    padding-left: 0;
+  }
+}
+
+/* Turn Off Number Input Spinners */
+
+input[type=number] {
+  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
+/* Spinner */
+
+.item-icon-left ion-spinner {
+  float: left;
+  margin-left: -3.2em;
+  margin-right: 1em;
+  margin-top: -0.2em;
+  height: 24px;
+}
+
+.name-wallet {
+  font-size: 14px;
+  font-weight: 400;
+  padding-top: 0 !important;
+  line-height: 14px;
+}
+
+.header-modal {
+  background: #fff;
+  width: 100%;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  position: relative;
+}
+
+.ellipsis {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.updatingHistory {
+  div {
+    text-align: center;
+  }
+  .spinner {
+    margin: auto;
+    height: 2em;
+    text-align: center;
+  }
+}
+
+.postfix {
+  position: absolute;
+  right: 10px;
+  background-color: #f8f8f8;
+  color: #444;
+  border-radius: 4px;
+  padding: 2px 10px;
+  cursor: pointer;
+  label &{
+    top: 38px;
+    padding: 0 5px;
+  }
+}
+
+#qr-canvas {
+  display: none;
+}
+
+#qrcode-scanner-video {
+  display: block;
+  margin: 0 auto;
+}
+
+.qr-icon {
+  line-height: 45px;
+}
+
+.input-notification {
+  float: right;
+  margin-right: 10px;
+}
+
+.qr-scan-icon a {
+  display: block;
+  position: absolute;
+  top: 25px;
+  right: 0;
+  padding: 0 10px;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.pr {
+  position: relative;
+}
+
+.m0 {
+  margin: 0;
+}
+
+.p0i {
+  padding: 0 !important;
+}
+
+.db {
+  display: block;
+}
+
+.dib {
+  display: inline-block;
+}
+
+.size-10 {
+  font-size: 10px;
+}
+
+.size-12 {
+  font-size: 12px;
+}
+
+.size-14 {
+  font-size: 14px;
+}
+
+.size-16 {
+  font-size: 16px;
+}
+
+.size-18 {
+  font-size: 18px;
+}
+
+
+.size-20 {
+  font-size: 21px;
+}
+
+.size-21 {
+  font-size: 21px;
+}
+
+.size-24 {
+  font-size: 24px;
+}
+
+.size-28 {
+  font-size: 28px;
+}
+
+.size-36 {
+  font-size: 36px;
+}
+
+.size-42 {
+  font-size: 42px;
+}
+
+.m5t {
+  margin-top: 5px;
+}
+
+.m5b {
+  margin-bottom: 5px;
+}
+
+.m5r {
+  margin-right: 5px;
+}
+
+.m10 {
+  margin: 10px;
+}
+
+.m10b {
+  margin-bottom: 10px;
+}
+
+.m10t {
+  margin-top: 10px;
+}
+
+.m15b {
+  margin-bottom: 15px;
+}
+
+.m15r {
+  margin-right: 15px;
+}
+
+.m20b {
+  margin-bottom: 20px;
+}
+
+.m10r {
+  margin-right: 10px;
+}
+
+.m55r {
+  margin-right: 55px;
+}
+
+.m10l {
+  margin-left: 10px;
+}
+
+.m15l {
+  margin-left: 15px;
+}
+
+.m15t {
+  margin-top: 15px;
+}
+
+.m20t {
+  margin-top: 20px;
+}
+
+.m20ti {
+  margin-top: 20px !important;
+}
+
+.m20tp {
+  margin-top: 20%;
+}
+
+.m30tp {
+  margin-top: 30%;
+}
+
+.p10t {
+  padding-top: 10px;
+}
+
+.p10h {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+.p15h {
+  padding: 0 15px;
+}
+
+.p20h {
+  padding: 0 20px;
+}
+
+.p20v {
+  padding: 20px 0;
+}
+
+.p20b {
+  padding-bottom: 20px;
+}
+
+.p15 {
+  padding: 15px;
+}
+
+.p20 {
+  padding: 20px;
+}
+
+.p10 {
+  padding: 10px;
+}
+
+.p60b {
+  padding-bottom: 60px;
+}
+
+.m30v {
+  margin: 30px 0;
+}
+
+.m10h {
+  margin: 0 10px;
+}
+
+.m10v {
+  margin: 10px 0;
+}
+
+.m20v {
+  margin: 20px 0;
+}
+
+.m30v {
+  margin: 30px 0;
+}
+
+.oh {
+  overflow: hidden;
+}
+
+.vm {
+  vertical-align: middle;
+}
+
+.ma {
+  margin: 0 auto;
+}
+
+.tu {
+  text-transform: uppercase;
+}
+
+.tl {
+  text-transform: lowercase;
+}
+
+.text-light {
+  font-weight: 200;
+}
+
+.text-bold {
+  font-weight: 700;
+}
+
+.no-border {
+  border-style: none;
+  background-color: transparent !important;
+}
+
+input[type=file] {
+  margin-top: 10px;
+  margin-bottom: -10px;
+  line-height: 0px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.right {
+  float: right;
+}
+
+.left {
+  float: left;
+}
diff --git a/src/sass/views/copayers.scss b/src/sass/views/copayers.scss
new file mode 100644
index 000000000..27117e859
--- /dev/null
+++ b/src/sass/views/copayers.scss
@@ -0,0 +1,7 @@
+.copayers-secret {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  text-align: center;
+  font-size: 14px;
+  margin: 10px;
+}
diff --git a/src/sass/views/includes/tx-status.scss b/src/sass/views/includes/tx-status.scss
index ad1eb66d0..c1a62c779 100644
--- a/src/sass/views/includes/tx-status.scss
+++ b/src/sass/views/includes/tx-status.scss
@@ -1,27 +1,35 @@
 #tx-status {
-   .address {
-     display: flex;
-     padding: 5px 15px;
-     background-color: #f5f5f5;
-     margin-top: 10px;
-     i {
-       color: grey;
-       padding-right: 10px;
-       border-right: 1px solid;
-       border-color: grey;
-       font-size: 20px;
-     }
-     contact {
-       margin-left: 15px;
-       margin-bottom: 3px;
-       margin-top: 5px;
-     }
+  .address {
+    display: flex;
+    padding: 5px 15px;
+    background-color: #f5f5f5;
+    margin-top: 10px;
+   i {
+    color: grey;
+    padding-right: 10px;
+    border-right: 1px solid;
+    border-color: grey;
+    font-size: 20px;
    }
-   .collect-address{
+   contact {
+    margin-left: 15px;
+    margin-bottom: 3px;
+    margin-top: 5px;
+   }
+  }
+  .collect-address {
     bottom: 0;
     background: #fff;
     color: #6c6c6c;
     position: absolute;
     width: 100%;
-   }
+  }
+  .popup-txsent {
+    font-size: 5rem;
+    color: #4A90E2;
+  }
+  .popup-txsigned i, .popup-txrejected i {
+    font-size: 5rem;
+    color: #4A90E2;
+  }
 }
diff --git a/src/sass/views/integrations/coinbase.scss b/src/sass/views/integrations/coinbase.scss
index 40eabb4cf..0896abffa 100644
--- a/src/sass/views/integrations/coinbase.scss
+++ b/src/sass/views/integrations/coinbase.scss
@@ -8,3 +8,14 @@
     }
   }
 }
+
+.coinbase-last-transactions-content {
+  background: #fff;
+  padding: 0.8rem 1rem;
+  cursor: pointer;
+  border-bottom: 1px solid #E4E8EC;
+}
+
+.coinbase-pointer {
+  cursor: pointer;
+}
diff --git a/src/sass/views/views.scss b/src/sass/views/views.scss
index eede32a5f..ee6645bbb 100644
--- a/src/sass/views/views.scss
+++ b/src/sass/views/views.scss
@@ -2,6 +2,7 @@
 @import "add";
 @import "amount";
 @import "confirm";
+@import "copayers";
 @import "starting";
 @import "tab-home";
 @import "tab-receive";
diff --git a/src/sass/views/walletDetails.scss b/src/sass/views/walletDetails.scss
index 5dd85fb2d..8383f783d 100644
--- a/src/sass/views/walletDetails.scss
+++ b/src/sass/views/walletDetails.scss
@@ -29,3 +29,30 @@
     }
   }
 }
+
+.wallet-details-release {
+  cursor: pointer;
+  cursor: hand;
+  background-color: #E9E9EC;
+  margin-top: -30px;
+  margin-bottom: 5px;
+  padding-top: 30px;
+  padding-bottom: 20px;
+  text-align: center;
+  text-color: #444;
+  span {
+    margin-left: 15px;
+  }
+  i {
+    margin-right: 15px;
+  }
+}
+
+.wallet-details-wallet-info {
+  position: absolute;
+  top: inherit;
+  left: 10px;
+  bottom: 15px;
+  font-size: 20px;
+  color: #fff;
+}