From 61d075e29a00a63bb65b20c26c777520213dfab8 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Tue, 6 Dec 2016 01:24:16 +0900
Subject: [PATCH] Refactored: moved and removed

Moved under #paymentsContainer

- #paymentsSidebar
- .bitcoinDashboard
- .coinbaseOverlay
- .ledgerTable
- .walletAddressText
- .copyKeyContainer
- .bitcoinIcon
- .advancedSettings
- .advancedSettingsFooter
- .recoveryOverlay
- .settingsPanelDivider

Moved under #bitcoinDashboard

- .fa

Moved under #ledgerTable

- .fa-file-o
- .verified

Removed

- button.close span
- .modal .dialog.paymentHistory .sectionTitle
---
 less/about/preferences.less | 663 +++++++++++++++++++-----------------
 less/modalOverlay.less      |  21 --
 2 files changed, 346 insertions(+), 338 deletions(-)

diff --git a/less/about/preferences.less b/less/about/preferences.less
index 03e78a69767..cb4db85a53f 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -483,86 +483,8 @@ table.sortableTable {
   }
 }
 
-.ledgerTable {
-
-  tr {
-    th,
-    td {
-      padding: 0 15px;
-    }
-
-    td {
-      position: relative;
-    }
-
-    .th-inner {
-      font-weight: bold;
-
-      &:hover {
-        cursor: pointer;
-        text-decoration: underline;
-      }
-    }
-  }
-
-}
-
-.modal .dialog.paymentHistory .sectionTitle {
-  text-align: left;
-}
-
-.paymentHistoryFooter span.okButton.primaryButton {
-  background-color: gray;
-  float: right;
-  margin-top: -10px;
-  display: inline;
-  padding-top: 5px;
-  padding-left: 35px;
-  padding-right: 35px;
-}
-
-div.nextPaymentSubmission {
-  display: inline;
-}
-.nextPaymentSubmission span {
-  font-size: 12px;
-  display: inline;
-}
-
-.modal .dialog.paymentHistory {
-  padding: 0px;
-
-  .dialog-header {
-    background-color: #EEE;
-    height: 20px;
-    padding-bottom: 10px;
-  }
-
-  .dialog-body {
-    background-color: #FFF;
-    height: 300px;
-    overflow-y: scroll;
-  }
-
-  .dialog-footer {
-    background-color: #EEE;
-    height: 5px;
-  }
-
-  .dialog-header, .dialog-body, .dialog-footer {
-    padding: 20px;
-  }
-}
-
-.modal .dialog.coinbaseOverlay {
-  .dialog-body {
-    height: 100%;
-    width: 100%;
-  }
-}
-
-
 .paymentsContainer {
+
   @walletTableData: 235px + 30px; // .walletBar td (min-width + padding)
   @barMargin: 15px 0 30px;
   @fontSize: 14.5px; // .form-control
@@ -587,6 +509,261 @@ div.nextPaymentSubmission {
     }
   }
 
+  .modal {
+    .dialog {
+      &.coinbaseOverlay {
+        .dialog-body {
+          height: 100%;
+          width: 100%;
+        }
+      }
+
+      &.paymentHistory {
+        .dialog-header,
+        .dialog-body,
+        .dialog-footer {
+          padding: 20px;
+        }
+
+        .dialog-header {
+          background: #EEE;
+        }
+
+        .dialog-body {
+          background: #FFF;
+          height: 300px;
+          overflow-y: scroll;
+
+          .paymentHistoryTable {
+            background-color: #FFF;
+
+            tr {
+              th {
+                color: @darkGray;
+                font-weight: 500;
+                border-bottom: 2px solid @lightGray;
+                text-align: left;
+                width: 18%;
+              }
+
+              td {
+                text-align: left;
+
+                &.narrow {
+                  color: @darkGray;
+                }
+
+                &.wide {
+                  color: #777;
+                }
+              }
+            }
+          }
+        }
+
+        .dialog-footer {
+          background: #EEE;
+          padding-top: 10px;
+          padding-bottom: 10px;
+
+          .paymentHistoryFooter {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .nextPaymentSubmission {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+
+      .dialog-header {}
+
+      .dialog-body {
+        .board {
+          .panel {
+            &.advancedSettings {
+              padding-left: 50px;
+              padding-right: 50px;
+
+              select {
+                width: 100%;
+              }
+            }
+
+            &.recoveryContent {
+              h4,
+              span {
+                margin-bottom: 20px;
+              }
+            }
+
+            .copyKeyContainer {
+              display: flex;
+              align-items: flex-end;
+              width: 75%;
+              margin: 20px auto;
+
+              .copyContainer {
+                .copyButton {
+                  font-size: 14px;
+                  margin: 0;
+                }
+              }
+
+              .keyContainer {
+                margin-left: 2em;
+
+                h3 {
+                  margin-bottom: 15px;
+                }
+              }
+            }
+          }
+
+          .recoveryOverlay {
+            background-color: @black75;
+            border: 1px solid @black75;
+            position: absolute;
+            top: -1px;
+            left: -1px;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            z-index: 999;
+
+            h1,
+            p {
+              color: white;
+            }
+
+            h1 {
+              margin-top: 120px;
+            }
+
+            .spaceAround {
+              margin: 50px auto;
+            }
+          }
+        }
+
+        .bitcoinDashboard {
+          .modal {
+            .qrcodeOverlay {
+              border: 0;
+              width: 350px;
+              height: auto;
+              margin: 100px auto 0 auto;
+              background: white;
+              box-shadow: @dialogShadow;
+
+              &.fade {
+                transition: @transitionFast;
+              }
+
+              img {
+                clear: both;
+                display: block;
+                margin: 0 auto;
+              }
+
+              .dialog-header {}
+
+              .dialog-body {
+                padding: 30px;
+
+                .bitcoinQRTitle {
+                  color: @braveOrange;
+                  text-align: center;
+                }
+              }
+
+              .dialog-footer {
+                .qrcodeOverlayFooter {
+                  display: flex;
+                  justify-content: center;
+                  background: @gray;
+                  padding: 15px 0;
+                }
+              }
+            }
+          }
+
+          .board {
+            .panel {
+              padding-left: 100px;
+
+              .settingsPanelDivider {
+                width: 50%;
+                position: relative;
+                float: left;
+
+                &:nth-child(1) {
+                  text-align: left;
+                }
+
+                &:nth-child(2) {
+                  text-align: right;
+                }
+
+                .fa {
+                  position: absolute;
+                  left: -45px;
+
+                  &.fa-credit-card {
+                    font-size: 30px;
+                  }
+                  &.fa-mobile {
+                    font-size: 50px;
+                  }
+                }
+
+                .walletAddressText {
+                  font-size: 12px;
+                  color: black;
+                  margin-bottom: 20px;
+                }
+
+                .bitcoinIcon {
+                  position: absolute;
+                  left: -5px;
+                  top: 0;
+
+                  .fa-circle {
+                    color: @bitcoinOrange;
+                  }
+                  .fa-bitcoin {
+                    color: white;
+                    transform: rotate(12deg);
+                  }
+                }
+              }
+
+              &:last-child {
+                margin-bottom: 0;
+              }
+            }
+          }
+        }
+      }
+
+      .dialog-footer {
+        .advancedSettingsFooter {
+          padding-top: 20px;
+          padding-bottom: 20px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+
+          .recoveryFooterButtons {
+            float: right;
+          }
+        }
+      }
+    }
+  }
+
   .titleBar {
     overflow: hidden;
     display: flex;
@@ -647,6 +824,51 @@ div.nextPaymentSubmission {
     }
   }
 
+  #paymentsSidebar {
+    opacity: 0.8;
+    width: 200px;
+    float: left;
+    margin-left: 23px;
+
+    .paymentsSidebarPIA {
+      background-image: -webkit-image-set(url(../../app/extensions/brave/img/private_internet_access.png) 1x,
+                                          url(../../app/extensions/brave/img/private_internet_access_2x.png) 2x);
+      width: 195px;
+      height: 20px;
+    }
+
+    .paymentsSidebarBitgo {
+      background-image: -webkit-image-set(url(../../app/extensions/brave/img/bitgo.png) 1x,
+                                          url(../../app/extensions/brave/img/bitgo_2x.png) 2x);
+      width: 100px;
+      height: 25px;
+    }
+
+    .paymentsSidebarCoinbase {
+      background-image: -webkit-image-set(url(../../app/extensions/brave/img/coinbase.png) 1x,
+                                          url(../../app/extensions/brave/img/coinbase_2x.png) 2x);
+      width: 100px;
+      height: 35px;
+    }
+
+    div {
+      font-size: 12px;
+      margin: 50px 0 20px 12px;
+    }
+
+    a {
+      div {
+        margin-top: 0;
+      }
+    }
+
+    h2 {
+      font-size: 18px;
+      font-weight: 200;
+      margin: 70px 0 -15px 12px;
+    }
+  }
+
   .walletBar {
     @itemMargin: 12px; // button, .nextReconcileDate, .accountBalanceError, .nextReconcileDate
 
@@ -749,6 +971,40 @@ div.nextPaymentSubmission {
     }
   }
 
+  .ledgerTable {
+    tr {
+      th,
+      td {
+        padding: 0 15px;
+      }
+
+      .th-inner {
+        font-weight: bold;
+
+        &:hover {
+          cursor: pointer;
+          text-decoration: underline;
+        }
+      }
+
+      .fa-file-o {
+        font-size: 15px;
+        margin-right: 6px;
+        text-align: center;
+        width: 24px;
+      }
+
+      .verified {
+        height: 20px;
+        width: 20px;
+        background: url('../../img/toolbar/verified_green_icon.svg') center no-repeat;
+        display: inline-block;
+        position: absolute;
+        left: -10px;
+      }
+    }
+  }
+
   .sort {
     text-align: left;
   }
@@ -778,17 +1034,21 @@ div.nextPaymentSubmission {
 
   tr {
 
+    &.paymentsDisabled {
+      opacity: 0.6;
+    }
+
     th {
       color: @darkGray;
       font-weight: 600;
     }
 
-    &.paymentsDisabled {
-      opacity: 0.6;
-    }
-
     td {
 
+      &.alignRight {
+        text-align: right;
+      }
+
       a {
         vertical-align: middle;
         text-decoration: none;
@@ -805,26 +1065,6 @@ div.nextPaymentSubmission {
         }
       }
 
-      .fa-file-o {
-        font-size: 15px;
-        margin-right: 6px;
-        text-align: center;
-        width: 24px;
-      }
-
-      .verified {
-        height: 20px;
-        width: 20px;
-        background: url('../../img/toolbar/verified_green_icon.svg') center no-repeat;
-        display: inline-block;
-        position: absolute;
-        left: -10px;
-      }
-
-      &.alignRight {
-        text-align: right;
-      }
-
       input[type='range'] {
         background: transparent;
         -webkit-appearance: none;
@@ -853,65 +1093,6 @@ div.nextPaymentSubmission {
   }
 }
 
-.bitcoinDashboard {
-
-  .modal {
-    .qrcodeOverlay {
-      border: 0;
-      width: 350px;
-      height: auto;
-      margin: 100px auto 0 auto;
-      background: white;
-      box-shadow: @dialogShadow;
-
-      &.fade {
-        transition: @transitionFast;
-      }
-
-      button.close span {
-        color: @gray;
-        font-size: 2.5em;
-      }
-
-      img {
-        clear: both;
-        display: block;
-        margin: 0 auto;
-      }
-
-      .dialog-header {}
-
-      .dialog-body {
-        padding: 30px;
-
-        .bitcoinQRTitle {
-          color: @braveOrange;
-          text-align: center;
-        }
-      }
-
-      .dialog-footer {
-        .qrcodeOverlayFooter {
-          display: flex;
-          justify-content: center;
-          background: @gray;
-          padding: 15px 0;
-        }
-      }
-    }
-  }
-
-  .board {
-    .panel {
-      padding-left: 100px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-
 .board {
   overflow-x: hidden;
   clear: both;
@@ -923,44 +1104,7 @@ div.nextPaymentSubmission {
     margin-bottom: 8px;
     padding: 25px 20px;
 
-    &.advancedSettings {
-      padding-left: 50px;
-      padding-right: 50px;
 
-      select {
-        width: 100%;
-      }
-    }
-
-    .settingsPanelDivider {
-      width: 50%;
-      position: relative;
-      float: left;
-
-      &:nth-child(1) {
-        text-align: left;
-      }
-
-      &:nth-child(2) {
-        text-align: right;
-      }
-      .fa {
-        position: absolute;
-        left: -45px;
-
-        &.fa-credit-card {
-          font-size: 30px;
-        }
-        &.fa-mobile {
-          font-size: 50px;
-        }
-      }
-      .bitcoinIcon {
-        position: absolute;
-        left: -5px;
-        top: 0;
-      }
-    }
     #bitcoinPaymentURL {
       cursor: pointer;
       background-color: @lightGray;
@@ -970,12 +1114,6 @@ div.nextPaymentSubmission {
       font-size: 0.9em;
     }
 
-    .walletAddressText {
-      font-size: 12px;
-      color: black;
-      margin-bottom: 20px;
-    }
-
     .settingsListTitle {
       color: @darkGray;
       font-weight: bold;
@@ -1009,15 +1147,6 @@ div.nextPaymentSubmission {
       color: @braveOrange;
       margin-bottom: 5px;
     }
-    .bitcoinIcon {
-      .fa-circle {
-        color: @bitcoinOrange;
-      }
-      .fa-bitcoin {
-        color: white;
-        transform: rotate(12deg);
-      }
-    }
 
     .primaryButton {
       min-width: 180px;
@@ -1036,35 +1165,15 @@ div.nextPaymentSubmission {
       line-height: 1.3em;
       margin-bottom: 60px;
     }
-
-    .copyKeyContainer {
-      display: flex;
-      align-items: flex-end;
-      width: 75%;
-      margin: 20px auto;
-
-      .copyContainer {
-        .copyButton {
-          font-size: 14px;
-          margin: 0;
-        }
-      }
-
-      .keyContainer {
-        margin-left: 2em;
-
-        h3 {
-          margin-bottom: 15px;
-        }
-      }
-    }
   }
+
   .panelFooter {
     color: @darkGray;
     font-size: 13px;
     font-style: italic;
     padding: 20px 20px 20px 50px;
   }
+
   &.contrast {
     background: @highlightBlue;
     color: white;
@@ -1073,36 +1182,12 @@ div.nextPaymentSubmission {
       color: white;
     }
   }
+
   .disabledPanel {
     div:nth-of-type(2) {
       padding: 15px 0;
     }
   }
-
-  .recoveryContent {
-    h4,
-    span {
-      margin-bottom: 20px;
-    }
-  }
-
-  .recoveryFooterButtons {
-    float: right;
-  }
-}
-
-.advancedSettingsFooter {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.recoveryOverlay {
-  .spaceAround {
-    margin: 50px auto;
-  }
 }
 
 .widevineInfoIcon {
@@ -1205,62 +1290,6 @@ div.nextPaymentSubmission {
   }
 }
 
-#paymentsSidebar {
-  opacity: 0.8;
-  width: 200px;
-  float: left;
-  margin-left: 23px;
-
-  .paymentsSidebarPIA {
-    background-image: -webkit-image-set(url(../../app/extensions/brave/img/private_internet_access.png) 1x,
-                                        url(../../app/extensions/brave/img/private_internet_access_2x.png) 2x);
-    width: 195px;
-    height: 20px;
-  }
-
-  .paymentsSidebarBitgo {
-    background-image: -webkit-image-set(url(../../app/extensions/brave/img/bitgo.png) 1x,
-                                        url(../../app/extensions/brave/img/bitgo_2x.png) 2x);
-    width: 100px;
-    height: 25px;
-  }
-
-  .paymentsSidebarCoinbase {
-    background-image: -webkit-image-set(url(../../app/extensions/brave/img/coinbase.png) 1x,
-                                        url(../../app/extensions/brave/img/coinbase_2x.png) 2x);
-    width: 100px;
-    height: 35px;
-  }
-  div {
-    font-size: 12px;
-    margin: 50px 0 20px 12px;
-  }
-
-  a {
-    div {
-      margin-top: 0;
-    }
-  }
-
-  h2 {
-    font-size: 18px;
-    font-weight: 200;
-    margin: 70px 0 -15px 12px;
-  }
-
-  a {
-    div {
-      margin-top: 0;
-    }
-  }
-
-  h2 {
-    font-size: 18px;
-    font-weight: 200;
-    margin: 70px 0 -15px 12px;
-  }
-}
-
 .moreExtensionsComingSoon {
   padding-top: 10px;
   font-style: italic;
diff --git a/less/modalOverlay.less b/less/modalOverlay.less
index 200e103d330..64fbcd8fe4a 100644
--- a/less/modalOverlay.less
+++ b/less/modalOverlay.less
@@ -77,27 +77,6 @@
     .sectionTitle {
       color: @darkGray;
     }
-
-    .recoveryOverlay {
-      background-color: @black75;
-      border: 1px solid @black75;
-      position: absolute;
-      top: -1px;
-      left: -1px;
-      width: 100%;
-      height: 100%;
-      text-align: center;
-      z-index: 999;
-
-      h1,
-      p {
-        color: white;
-      }
-
-      h1 {
-        margin-top: 120px;
-      }
-    }
   }
 
   button {