core: revamp advanced payout to make it cleaner

gitcoinco · Nov 2, 2019 · c8fa4f7 · c8fa4f7
1 parent 9c3f67c
commit c8fa4f7
Show file tree

Hide file tree

Showing 7 changed files with 410 additions and 327 deletions.
diff --git a/app/assets/v2/css/base.css b/app/assets/v2/css/base.css
@@ -502,7 +502,8 @@ input[type=text].loading {
 
 .submit_bounty #primary_form,
 .fulfill_bounty #primary_form,
-.increase_bounty #primary_form {
+.increase_bounty #primary_form,
+.payout_bounty #primary_form {
   max-width: none;
 }
 

diff --git a/app/assets/v2/css/bulk_payout_bounty.css b/app/assets/v2/css/bulk_payout_bounty.css
@@ -1,100 +1,32 @@
-#ethinfo-tooltip {
-  min-height: 37%;
-  top: 17rem;
+.tooltip-inner {
+  max-width: 30rem !important;
+  text-align: left;
 }
 
-@media only screen and (max-width: 1400px) {
-  #ethinfo-tooltip {
-    top: 18.5rem;
-  }
-}
-
-@media only screen and (max-width: 750px) {
-  #ethinfo-tooltip {
-    min-height: 30%;
-  }
-}
-
-@media only screen and (max-width: 400px) {
-  #ethinfo-tooltip {
-    min-height: 33%;
-    left: 70px;
-    top: 20.5rem;
-  }
-}
-
-#pay_with_bounty-tooltip {
-  min-height: 37%;
-  top: 15rem;
-  left: 220px;
-}
-
-@media only screen and (max-width: 730px) {
-  #pay_with_bounty-tooltip {
-    top: 16rem;
-    left: 30px;
-  }
-}
-
-.pay_with_bounty-hover {
-  margin-left: 5px;
-}
-
-#transaction_registry {
-  width: 100%;
-}
-
-#transaction_registry tr td {
-  padding: 10px;
-  border: #333 solid 1px;
-}
-
-#trans_preview {
-  padding: 5px;
+tr div {
   border-radius: 3px;
-  background-color: #fafafa;
-  position: absolute;
-  top: 5rem;
-  right: -20rem;
-  max-width: 300px;
-}
-
-#trans_preview h5 {
-  color: #08cf7b;
+  padding: 5px;
 }
 
-#primary_form {
-  margin: 0px 25%;
+.form__radio label > div {
+  top: 2px;
 }
 
-@media (max-width: 1100px) {
-  #primary_form {
-    margin: 0px 15%;
-  }
+.gc-green-text {
+  color: #0FCE7C;
 }
 
-@media (max-width: 900px) {
-  #primary_form {
-    margin: 0px 5%;
-  }
+.gc-blue-text {
+  color: #3E00FF;
 }
 
-@media (max-width: 750px) {
-  #trans_preview {
-    position: unset;
-    top: 200px;
-    left: 72%;
-    width: 100%;
-    max-width: initial;
-  }
-  #primary_form {
-    margin: 0px auto;
-  }
+.table-hover tbody tr:hover{
+  background-color: #FAFAFA;
 }
 
-tr div {
+.preview_payment {
+  background-color: #FAFAFA;
   border-radius: 3px;
-  padding: 5px;
 }
 
 .error {
@@ -116,9 +48,9 @@ tr div {
 }
 
 .paymentAlert > div:first-child {
-  width: 25px;
   float: left;
-  padding-right: 10px;
+  position: relative;
+  top: 7px;
 }
 
 .paymentAlert > div:last-child {
@@ -131,7 +63,6 @@ tr div {
 
 .paymentAlert > div:first-child > img {
   width: 17px;
-  margin-top: 10px;
 }
 
 .overagePreview , .tipPreview {
@@ -140,6 +71,104 @@ tr div {
   display: none;
 }
 
-.select2{
+.select2 {
   width: 100% !important;
 }
+
+#payout_table th {
+  border-bottom-width: 1px;
+}
+
+#payout_table tr td {
+  border-top: none;
+  border-width: 1px;
+}
+
+#payout_table .select2-selection,
+#payout_table .input_amount,
+#payout_table tr td .amount {
+  border-radius: 4px !important;
+  border: 2px solid #d3d3d3 !important;
+}
+
+#payout_table tr td .input_amount {
+  min-width: 4.5rem;
+}
+
+#payout_table tr td .amount  {
+  min-width: 6rem;
+}
+
+#payout_table tr td .input_amount,
+#payout_table tr td .amount {
+  padding-top: 9px;
+  padding-bottom: 9px;
+  padding-left: 10px;
+  top: 5px;
+  left: 4px;
+}
+
+#payout_table .rating > .rating-star {
+  font-size: 9px;
+}
+
+#payout_table td a.remove {
+  top: 7px;
+  font-size: 1.1rem;
+}
+
+#payout_table .label {
+  top: -1.52rem;
+  right: 8px;
+  color: #898989;
+}
+
+#payout_table th:first-child {
+  padding-left: 0;
+}
+
+.select2-selection.select2-selection--single {
+  height: 2.56rem !important;
+}
+
+.ui-tooltip {
+  font-size: 12px;
+}
+
+#transaction_registry tr td {
+  padding: 10px;
+  border: black solid 2px;
+}
+
+#transaction_registry tr td:first-child {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
+#transaction_registry .fa-minus,
+#transaction_registry .fa-plus {
+  top: -1px;
+}
+
+#transaction_registry .direction {
+  border-radius: 2px;
+}
+
+#transaction_registry .direction.in {
+  color: #0FCE7C;
+  background-color: #E7FAF1;
+}
+
+#transaction_registry .direction.out {
+  color: #E66700;
+  background-color: #FCEFE5;
+}
+
+.badge-primary {
+  background-color: #3E00FF;
+  font-size: 0.75rem;
+}
+
+.badge-primary i {
+  font-size: 10px;
+}
diff --git a/app/assets/v2/css/gitcoin.css b/app/assets/v2/css/gitcoin.css
@@ -737,13 +737,6 @@ div.button-pink {
   width: auto;
 }
 
-#payout_table td div.input_amount,
-#payout_table td a.remove,
-#payout_table td div.amount {
-  position: relative;
-  top: 10px;
-}
-
 @media (min-width: 768px) {
 
   .d-md-block {