Fund form

app/assets/v2/css/base.css

@@ -518,14 +518,6 @@ input[type=text].loading {
   max-width: 100px;
 }
 
-#primary_form small {
-  display: inline;
-}
-
-#primary_form #amount {
-  height: 40px;
-}
-
 .bounty_nav {
   border-bottom: 2px solid #212529;
   padding: 0;

app/assets/v2/css/buttons.css

@@ -246,3 +246,21 @@ button:focus {
 .btn-lg-padding {
   padding: 0.6rem 2rem;
 }
+
+.btn-radio {
+  border: 2px solid #D3D3D3;
+}
+
+.btn-radio.active {
+  border-color: #3E00FF;
+}
+
+.btn-radio i {
+  color: #3E00FF;
+}
+
+.badge-greylight {
+  background-color: #F3F3F3;
+  color: #666666;
+  font-weight: 600;
+}

app/assets/v2/css/forms/checkbox.css

@@ -41,7 +41,7 @@
 }
 
 .form__checkbox input:checked ~ .form__label::before {
-  background-color: #0D0764;
-  border-color: #0D0764;
+  background-color: #3E00FF;
+  border-color: #3E00FF;
   content: url('/static/v2/images/check.svg');
 }

app/assets/v2/css/forms/input.css

@@ -7,6 +7,11 @@
   width: 100%;
   letter-spacing: -0.09px;
   outline: none;
+  height: 40px;
+}
+
+textarea.form__input {
+  height: auto;
 }
 
 .form__input-lg {
@@ -59,8 +64,8 @@
 
 .form__input:disabled {
   background-color: #EAEAEA;
-  border: 1px solid #979797;
   color: #9B9B9B;
+  border-color: #EAEAEA;
 }
 
 .form__input-help {

app/assets/v2/css/forms/select.css

@@ -6,7 +6,6 @@
 
 .form__select2 {
   display: flex;
-  height: 100%;
 }
 
 .form__select__icon {

app/assets/v2/css/gitcoin.css

@@ -50,6 +50,10 @@ h4,
   color: #3e24fb
 }
 
+.text-darkblue {
+  color: var(--gc-purple);
+}
+
 .gitcoin-gray {
   color: lightgray !important;
 }
@@ -261,6 +265,10 @@ div.button-pink {
   background-color: #EFF3F6;
 }
 
+.bg-lightpurple {
+  background-color: #F5F2FF;
+}
+
 .white-light-bg {
   background-color: white;
   background-image: url('/static/v2/images/light-bg.png');

app/assets/v2/css/submit_bounty.css

@@ -76,25 +76,11 @@ input:read-only {
   cursor: pointer;
 }
 
-#pricing-section .form__amount-wrapper {
-  width: 25%;
-}
-
-#pricing-section .form__flex-group {
-  justify-content: space-between;
-}
-
-#pricing-section .form__input,
-#pricing-section .form__select2 {
-  height: 40px;
-}
-
 .select2-container--default .select2-selection--single {
   border-color:#D3D3D3 !important;
   font-size: 14px;
 }
 
-#issue-details,
 #no-issue-banner img {
   max-width: 100%;
   border: 1px solid #d1d1d1;
@@ -109,23 +95,41 @@ input:read-only {
   display: none;
 }
 
-#issue-details {
-  padding-left: 12px;
-  padding-right: 12px;
+.issue-details-public {
+  background-color: #F9F9F9;
+  padding: 1em;
 }
 
-#issue-details input:read-only,
-#issue-details textarea:read-only {
+.issue-details-public input,
+.issue-details-public textarea {
   border: none;
+  background-color: transparent;
   padding-left: 0;
-  background-color: #fff;
-  outline: none;
+  padding-right: 0;
+}
+
+.issue-details-public textarea::-webkit-scrollbar {
+  width:9px;
+}
+
+.issue-details-public textarea::-webkit-scrollbar-track {
+  -webkit-border-radius:5px;
+  border-radius:5px;
+  background:rgba(0,0,0,0.1);
+}
+
+.issue-details-public textarea::-webkit-scrollbar-thumb {
+  -webkit-border-radius:5px;
+  border-radius:5px;
+  background:rgba(0,0,0,0.2);
 }
 
-#issue-details input:read-only {
-  font-size: 1.1rem;
-  border-bottom: 1px solid #d1d1d1;
-  border-radius: 0;
+.issue-details-public textarea::-webkit-scrollbar-thumb:hover {
+  background:rgba(0,0,0,0.4);
+}
+
+.issue-details-public textarea::-webkit-scrollbar-thumb:window-inactive {
+  background:rgba(0,0,0,0.05);
 }
 
 #sync-issue,
@@ -167,27 +171,12 @@ input:read-only {
   color: #3E00FF;
 }
 
-#total-section {
-  border-top: 1px solid #000000;
-  border-bottom: 1px solid #000000;
-}
-
 @media (max-width: 767.98px) {
   .select2-container {
     max-width: 100%;
   }
 }
 
-@media (max-width: 575.98px) {
-  #pricing-section .form__amount-wrapper {
-    width: 100%;
-  }
-
-  #pricing-section .form__flex-group {
-    display: block;
-  }
-}
-
 #featured-bounty-add .featured-example {
   border: 1px solid #E8E8E8;
   padding: 8px 0 8px 8px;
@@ -206,3 +195,33 @@ input:read-only {
 .new {
   color: #0FCE7C;
 }
+
+.collapse-header {
+  color: #7c7e81;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1em 0;
+  border-bottom: 1px solid #e5e5e5;
+  transition: all .3s linear;
+}
+
+.collapse-header:hover {
+  text-decoration: none;
+}
+
+.collapse-header.collapsed {
+  border-bottom-color: transparent;
+}
+
+.collapse-header .fa:before {
+  content: "\f077";
+}
+
+.collapse-header.collapsed .fa:before {
+  content: "\f078";
+}
+
+.letter-spacing {
+  letter-spacing: 0.1em;
+}

app/assets/v2/js/amounts.js

@@ -48,13 +48,13 @@ const get_rates_estimate = function(usd_amount) {
   }
 
   if (hours) {
-    rates_addon.push('' + hours + ' hrs at $' + round_rate + '/hr <i class="fa fa-arrow-right"></i> ' + success_prob.toFixed(0) + '% success rate<br>');
+    rates_addon.push(`${hours} hrs at $${round_rate}/hr leads to <b>${success_prob.toFixed(0)}% success rate</b>. `);
   } else {
-    rates_addon.push('' + hours + ' hrs at $&infin;/hr <i class="fa fa-arrow-right"></i> ' + success_prob.toFixed(0) + '% success rate<br>');
+    rates_addon.push(`${hours} hrs at $&infin;/hr leads to <b>${success_prob.toFixed(0)}% success rate</b>. `);
   }
   rates_addon = rates_addon.join(', ');
 
-  const help_addon = ' <a href="https://medium.com/gitcoin/tutorial-how-to-price-work-on-gitcoin-49bafcdd201e" target="_blank" rel="noopener noreferrer">[Read our pricing guide]</a>';
+  const help_addon = 'Read our <a href="https://medium.com/gitcoin/tutorial-how-to-price-work-on-gitcoin-49bafcdd201e" target="_blank" class="underline" rel="noopener noreferrer">pricing guide</a>.';
 
   return (rates_addon + help_addon);
 };