GITC-596: grant edit retouch (#9708)

* apply new design * resp * test updates * fix unit test * update tests
gitcoinco · Nov 25, 2021 · 367ddfe · 367ddfe
1 parent 621b39c
commit 367ddfe
Show file tree

Hide file tree

Showing 32 changed files with 150 additions and 120 deletions.
diff --git a/app/dashboard/sync/helpers.py b/app/dashboard/sync/helpers.py
@@ -1,9 +1,9 @@
 
 import logging
+from decimal import Decimal
 
 from dashboard.helpers import bounty_activity_event_adapter, get_bounty_data_for_activity
 from dashboard.models import Activity, BountyEvent, BountyFulfillment
-from decimal import Decimal
 
 logger = logging.getLogger(__name__)
 

diff --git a/app/dashboard/tests/factories/fulfillment_factory.py b/app/dashboard/tests/factories/fulfillment_factory.py
@@ -1,6 +1,6 @@
 import factory
-
 from dashboard.models import BountyFulfillment
+
 from .bounty_factory import BountyFactory
 from .profile_factory import ProfileFactory
 
@@ -10,4 +10,4 @@ class Meta:
         model = BountyFulfillment
 
     bounty = factory.SubFactory(BountyFactory)
-    profile = factory.SubFactory(ProfileFactory)
+    profile = factory.SubFactory(ProfileFactory)
diff --git a/app/dashboard/tests/models/test_bounty_fulfillment.py b/app/dashboard/tests/models/test_bounty_fulfillment.py
@@ -1,9 +1,9 @@
-from attr import has
 import pytest
-
+from attr import has
 from dashboard.models import BountyFulfillment
-from dashboard.tests.factories.fulfillment_factory import FulfillmentFactory
 from dashboard.tests.factories.bounty_factory import BountyFactory
+from dashboard.tests.factories.fulfillment_factory import FulfillmentFactory
+
 
 @pytest.mark.django_db
 class TestBountyFulfillmentProperties:

diff --git a/app/dashboard/tests/test_dashboard_models.py b/app/dashboard/tests/test_dashboard_models.py
@@ -493,8 +493,8 @@ def test_profile_activate_avatar():
         CustomAvatar.objects.create(profile=profile, config="{}")
         social_avatar = SocialAvatar.objects.create(profile=profile)
         profile.activate_avatar(social_avatar.pk)
-        assert profile.avatar_baseavatar_related.get(pk=1).active is False
-        assert profile.avatar_baseavatar_related.get(pk=2).active is True
+        assert profile.avatar_baseavatar_related.all().first().active is False
+        assert profile.avatar_baseavatar_related.all().last().active is True
 
     @staticmethod
     def test_bounty_snooze_url():

diff --git a/app/dashboard/tests/views/test_bounty_payout.py b/app/dashboard/tests/views/test_bounty_payout.py
@@ -1,5 +1,5 @@
 import pytest
-from dashboard.tests.factories import ProfileFactory, BountyFactory, FulfillmentFactory
+from dashboard.tests.factories import BountyFactory, FulfillmentFactory, ProfileFactory
 from rest_framework.test import APIClient
 
 

diff --git a/app/grants/templates/grants/detail/template-grant-details.html b/app/grants/templates/grants/detail/template-grant-details.html
@@ -551,15 +551,15 @@ <h3>Team</h3>
 
     <!-- Verify Twitter (step 1) -->
     <b-modal ref="startTwitterVerification" id="modal-start-twitter-verification" hide-footer no-stacking header-class="border-bottom-0" content-class="text-center px-4">
-      <img height="45" class="mb-4" src="{% static "v2/images/badge-verify.svg" %}" >
+      <img height="45" class="mb-4" src="{% static 'v2/images/badge-verify.svg' %}" >
       <h5 class="font-weight-bold mb-3">Verify Grant Ownership</h5>
       <p class="mb-4">Verify your grant ownership to ensure that your supporters are contributing to the correct grant.</p>
       <b-button v-b-modal.modal-twitter-verification size="lg" variant="gc-blue">Verify with twitter</b-button>
     </b-modal>
 
     <!-- Verify Twitter (step 2) -->
     <b-modal ref="twitterVerification" id="modal-twitter-verification" hide-footer no-stacking header-class="border-bottom-0" content-class="text-center px-4">
-      <img height="45" class="mb-4" src="{% static "v2/images/badge-verify.svg" %}" >
+      <img height="45" class="mb-4" src="{% static 'v2/images/badge-verify.svg' %}" >
       <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
       <p class="mb-4 text-left"><b>Step 1:</b> Fill your twitter account into the grants twitter field
         <i class="fas fa-check text-highlight-green" v-if="grant.twitter_handle_1"></i>
@@ -577,31 +577,17 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
     <!-- Edit Grant Details -->
     <b-sidebar
       id="sidebar-grant-edit"
-      title="Edit Grant"
       backdrop-variant="dark"
       bg-variant="white"
       backdrop
       shadow
       width="70%"
       >
+      <template v-slot:title><h2 class="d-inline">Edit Grant</h2></template>
       <form action="" @submit="checkForm($event)" ref="formEditGrant" v-if="grant" :class="`${Object.keys(errors).length ? 'invalid' : ''}`">
         <div class="col-12 mb-3">
-          <label class="font-caption letter-spacing text-black-60 text-uppercase" for="logo">
-            Project Logo
-          </label>
-          <div class="form__drop mt-0" id="js-drop">
-            <span v-if="!logoPreview">Drag & Drop or Browse</span>
-            <b-img-lazy v-if="logoPreview" id="preview" class="w-100 img-edit" :style="grant.image_css" :src="logoPreview" :class="{'blur-img':imgTransition}"></b-img-lazy>
-            <b-form-file @change="onFileChange($event)" v-model="logo" :state="Boolean(logo)" plain accept="image/*"></b-form-file>
-          </div>
-        </div>
-        <div class="col-12 mb-3 d-flex align-items-center">
-          <label class="font-caption letter-spacing text-black-60 text-uppercase mb-0 mr-3" for="title">Logo background color</label>
-          <input type="color" v-model="logoBackground" @input="changeColor">
-        </div>
-        <div class="col-12 mb-3">
-          <label class="font-caption letter-spacing text-black-60 text-uppercase" for="title">Title</label>
-          <span class="font-smaller-6 badge badge-greylight text-capitalize ml-2">Required</span>
+          <label class="font-subheader letter-spacing text-grey-500" for="title">Title</label>
+          <span class="font-smaller-6 badge badge-greylight ml-1">required</span>
 
           <input id="title" name="title" v-model.trim="grant.title" class="form__input form__input-lg" maxlength="150" type="text" placeholder="The Human Fund" required />
 
@@ -610,8 +596,8 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
           </div>
         </div>
         <div class="col-12 mb-3">
-          <label class="font-caption letter-spacing text-black-60 text-uppercase" for="description">Description</label>
-          <span class="font-smaller-6 badge badge-greylight text-capitalize ml-2">Required</span>
+          <label class="mt-3 font-subheader letter-spacing text-grey-500" for="description">Description</label>
+          <span class="font-smaller-6 badge badge-greylight ml-1">required</span>
 
           <quill-editor
             ref="myQuillEditor"
@@ -625,11 +611,31 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
             [[errors.description]]
           </div>
         </div>
+        <div class="col-12 mb-3">
+          <label class="mt-3 font-subheader letter-spacing text-grey-500" for="logo">
+            Project Logo
+          </label>
+          <div class="form__drop mt-0" id="js-drop" style="max-width: 345px; height: 128px;">
+            <span v-if="!logoPreview">Drag & Drop or Browse</span>
+            <b-img-lazy v-if="logoPreview" id="preview" class="img-edit" :style="grant.image_css" :src="logoPreview" :class="{'blur-img':imgTransition}"></b-img-lazy>
+            <b-form-file @change="onFileChange($event)" v-model="logo" :state="Boolean(logo)" plain accept="image/*"></b-form-file>
+          </div>
+        </div>
+        <div class="col-12 mb-3 d-flex align-items-center">
+          <label class="font-subheader letter-spacing text-grey-500 mb-0 mr-3" for="title">Logo background color</label>
+          <input type="color" v-model="logoBackground" @input="changeColor">
+        </div>
+
+        <!-- Github -->
+        <div class="col-12 mb-3">
+          <label class="mt-3 font-subheader letter-spacing text-grey-500" for="github_project_url">Github URL</label>
+          <input v-model.trim="grant.github_project_url" name="github_project_url" class="form__input form__input-lg" type="url" placeholder="https://github.com/humanfund"/>
+        </div>
 
-        <!-- Project url -->
+        <!-- Project website -->
         <div class="col-12 mb-3">
-          <label class="font-caption letter-spacing text-black-60 text-uppercase" for="reference_url">Project Website</label>
-          <span class="font-smaller-6 badge badge-greylight text-capitalize ml-2">Required</span>
+          <label class="mt-3 font-subheader letter-spacing text-grey-500" for="reference_url">Project Website</label>
+          <span class="font-smaller-6 badge badge-greylight ml-1">required</span>
           <input v-model.trim="grant.reference_url" name="reference_url" class="form__input form__input-lg" type="url" placeholder="https://human.fund/" required />
           <div class="text-danger" v-if="errors.reference_url">
             [[errors.reference_url]]
@@ -638,8 +644,8 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
 
         <!-- Project twitter -->
         <div class="col-12 mb-3">
-          <label class="font-caption letter-spacing text-black-60 text-uppercase" for="twitter_handle_1">Project Twitter Handle</label>
-          <span class="font-smaller-6 badge badge-greylight text-capitalize ml-2">Required</span>
+          <label class="mt-3 font-subheader letter-spacing text-grey-500" for="twitter_handle_1">Project Twitter Handle</label>
+          <span class="font-smaller-6 badge badge-greylight ml-1">required</span>
 
           <input id="twitter_handle_1" v-model="grant.twitter_handle_1" @change="transformTwitterHandle1" name="twitter_handle_1" class="form__input form__input-lg" type="text" placeholder="humanfund" required>
 
@@ -650,7 +656,7 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
 
         <!-- Owner twitter -->
         <div class="col-12 mb-3">
-          <label class="font-caption letter-spacing text-black-60 text-uppercase" for="twitter_handle_2">Your Twitter Handle</label>
+          <label class="mt-3 font-subheader letter-spacing text-grey-500" for="twitter_handle_2">Your Twitter Handle</label>
 
           <input id="twitter_handle_2" v-model="grant.twitter_handle_2" @change="transformTwitterHandle2" name="twitter_handle_2" class="form__input form__input-lg" type="text" placeholder="georgecostanza"/>
 
@@ -659,15 +665,9 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
           </div>
         </div>
 
-        <!-- Github -->
-        <div class="col-12 mb-3">
-          <label class="font-caption letter-spacing text-black-60 text-uppercase" for="github_project_url">Github URL</label>
-          <input v-model.trim="grant.github_project_url" name="github_project_url" class="form__input form__input-lg" type="url" placeholder="https://github.com/humanfund"/>
-        </div>
-
         <!-- Team Members -->
         <div class="col-12 mb-3">
-          <label class="font-caption letter-spacing text-black-60 text-uppercase" for="team_members">Team Members</label>
+          <label class="mt-3 font-subheader letter-spacing text-grey-500" for="team_members">Team Members</label>
           <v-select id="team_members" label="text" :close-on-select="false" @search="userSearch"  :options="usersOptions" placeholder="Add your team Gitcoin usernames" v-model="teamFormatted" multiple>
             <template slot="no-options">
               type to search Users..
@@ -691,29 +691,14 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
           </v-select>
         </div>
 
-        <!-- Region -->
-        <div class="col-12 mb-3">
-          <label class="font-caption letter-spacing text-black-60 text-uppercase" for="grant_region">Region</label>
-          <v-select placeholder="Pick your region" :options="grantRegions" label="label" v-model="grant.region">
-            <template v-slot:option="option">
-              <span class="font-weight-semibold">[[ option.label ]]</span>
-            </template>
-          </v-select>
-        </div>
-
-        <!-- Is CLR Eligible -->
-        <div class="col-12 mb-3">
-          <b-form-checkbox v-model="grant.is_clr_eligible" name="is_clr_eligible">
-            <label class="font-caption letter-spacing text-black-60 text-uppercase">OPT IN FOR CLR</label>
-            <span class="font-smaller-6 text-black-60 text-capitalize ml-2">
-              (If unchecked, your grant will not be able part of the CLR rounds on Gitcoin)
-            </span>
-          </b-form-checkbox>
+        <div class="mx-3 mt-5">
+          <hr class="mb-5">
+          <h4 class="font-bigger-1 text-black">Help contributors discover your grant</h4>
         </div>
 
-        <!-- External Funding -->
+        <!-- Project Stage -->
         <div class="col-12 mb-3">
-          <label class="font-caption letter-spacing text-black-60 text-uppercase">External Funding (VC Funding / Token Sale)</label>
+          <label class="mt-3 font-subheader letter-spacing text-grey-500">Project Stage</label>
           <v-select :options="externalFundingOptions" label="value" v-model="grant.has_external_funding" :reduce="state => state.key">
             <template v-slot:option="option">
               <span class="font-weight-semibold">[[ option.value ]]</span>
@@ -725,41 +710,38 @@ <h5 class="font-weight-bold mb-3">Verify Grant Ownership with Twitter</h5>
           </div>
         </div>
 
-        <!-- Grant Tags -->
+        <!-- Region -->
         <div class="col-12 mb-3">
-          <label class="font-caption letter-spacing text-black-60 text-uppercase" for="grant_tags">Tags</label>
-          <span class="font-smaller-6 badge badge-greylight text-capitalize ml-2">Required</span>
-
-          <v-select placeholder="Add tags to help others discover your grant" :options="grant_tags" label="name" v-model="grantTagsFormatted" multiple>
-            <template #search="{attributes, events}">
-              <input
-                class="vs__search"
-                v-bind="attributes"
-                v-on="events"
-              />
-            </template>
+          <label class="mt-3 font-subheader letter-spacing text-grey-500" for="grant_region">Region</label>
+          <v-select placeholder="Pick your region" :options="grantRegions" label="label" v-model="grant.region">
             <template v-slot:option="option">
-              <span class="font-weight-semibold">[[ option.name ]]</span>
+              <span class="font-weight-semibold">[[ option.label ]]</span>
             </template>
           </v-select>
+        </div>
 
-          <div class="text-danger" v-if="errors.grant_tags">
-            [[errors.grant_tags]]
-          </div>
+        <!-- Is CLR Eligible -->
+        <div class="col-12 my-3">
+          <b-form-checkbox v-model="grant.is_clr_eligible" name="is_clr_eligible">
+            <label class="font-caption letter-spacing text-grey-500">OPT IN FOR CLR</label>
+            <span class="font-smaller-6 text-grey-500 text-capitalize ml-2">
+              (If unchecked, your grant will not be a part of the CLR rounds on Gitcoin)
+            </span>
+          </b-form-checkbox>
         </div>
 
         <!-- Save/Cancel -->
         <div class="col-12 mb-3 text-right">
-          <button @click="saveGrant($event)" class="btn btn-primary">SAVE CHANGES</button>
+          <button @click="saveGrant($event)" class="btn btn-primary py-2 w-100 w-lg-25">Save Changes</button>
         </div>
         <div class="col-12 mb-3 mt-5">
           <div class="alert bs-alert alert-danger py-4" role="alert">
-            <h4 class="alert-heading pt-2 mb-2">Cancel Your Grant</h4>
-            <p class="mb-0">Once the grant is canceled will not longer receive contributions or participate on CLR matching.</p>
-            <p>If you need help instead, please create an <a href="https://github.com/gitcoinco/web/issues/new?assignees=&labels=help%20wanted&template=custom.md" target="_blank" class="alert-link">issue</a>
+            <h4 class="alert-heading font-bigger-1 pt-2 mb-2">Cancel your grant</h4>
+            <p class="mb-0 font-body">Once the grant is canceled will not longer receive contributions or participate on CLR matching.</p>
+            <p class="font-body">If you need help instead, please create an <a href="https://github.com/gitcoinco/web/issues/new?assignees=&labels=help%20wanted&template=custom.md" target="_blank" class="alert-link">issue</a>
               and don't forget to include your username and grant link.
             </p>
-            <button @click="cancelGrant($event)" class="btn btn-sm btn-danger font-weight-semibold">CANCEL GRANT</button>
+            <button @click="cancelGrant($event)" class="btn btn-sm btn-danger font-body px-4 py-2">Cancel Grant</button>
           </div>
         </div>
       </form>
@@ -771,14 +753,26 @@ <h4 class="alert-heading pt-2 mb-2">Cancel Your Grant</h4>
 
 <style>
 
+  .badge-greylight {
+    color: #757087;
+  }
+
+  #sidebar-grant-edit {
+    padding: 40px 50px;
+  }
+
+  .b-sidebar-header {
+    padding-bottom: 48px !important;
+  }
+
   .blur-img {
     filter: blur(9px);
     transition: 0.5s all linear;
   }
 
   .img-edit {
     width: 100%;
-    height: 300px;
+    height: 100%;
     object-fit: contain;
     background: black;
   }
@@ -845,6 +839,10 @@ <h4 class="alert-heading pt-2 mb-2">Cancel Your Grant</h4>
     grid-area: grant-managment;
   }
 
+  input {
+    border-radius: 4px !important;
+  }
+
   input[type=color]{
     width: 20px;
     height: 20px;
@@ -878,6 +876,13 @@ <h4 class="alert-heading pt-2 mb-2">Cancel Your Grant</h4>
     grid-template-areas: "grant-data";
   }
 
+  @media only screen and (max-width: 600px) {
+    #sidebar-grant-edit {
+      padding: 10px 0px;
+      width: 100% !important;
+    }
+  }
+
   @media (min-width: 960px) {
     .grid-template-sidebar {
       grid-auto-columns: 1fr 1fr 1fr 1.2fr;

diff --git a/app/grants/tests/factories/clr_match_factory.py b/app/grants/tests/factories/clr_match_factory.py
@@ -1,6 +1,5 @@
 import factory
 import pytest
-
 from grants.models.clr_match import CLRMatch
 
 from .contribution_factory import ContributionFactory

diff --git a/app/grants/tests/factories/donation_factory.py b/app/grants/tests/factories/donation_factory.py
@@ -1,9 +1,9 @@
 import factory
 import pytest
+from dashboard.tests.factories import ProfileFactory
 from grants.models.donation import Donation
 
 from .contribution_factory import ContributionFactory
-from dashboard.tests.factories import ProfileFactory
 from .subscription_factory import SubscriptionFactory
 
 

diff --git a/app/grants/tests/factories/flag_factory.py b/app/grants/tests/factories/flag_factory.py
@@ -1,9 +1,9 @@
 import factory
 import pytest
+from dashboard.tests.factories import ProfileFactory
 from grants.models.flag import Flag
 
 from .grant_factory import GrantFactory
-from dashboard.tests.factories import ProfileFactory
 
 
 @pytest.mark.django_db

diff --git a/app/grants/tests/factories/grant_api_key_factory.py b/app/grants/tests/factories/grant_api_key_factory.py
@@ -1,7 +1,6 @@
 import factory
-from grants.models.grant_api_key import GrantAPIKey
-
 from dashboard.tests.factories import ProfileFactory
+from grants.models.grant_api_key import GrantAPIKey
 
 
 class GrantAPIKeyFactory(factory.django.DjangoModelFactory):

diff --git a/app/grants/tests/factories/grant_clr_factory.py b/app/grants/tests/factories/grant_clr_factory.py
@@ -3,9 +3,8 @@
 
 import factory
 import pytest
-from grants.models.grant import GrantCLR
-
 from dashboard.tests.factories import ProfileFactory
+from grants.models.grant import GrantCLR
 
 
 @pytest.mark.django_db

diff --git a/app/grants/tests/factories/grant_collection_factory.py b/app/grants/tests/factories/grant_collection_factory.py
@@ -1,7 +1,6 @@
 import factory
-from grants.models.grant_collection import GrantCollection
-
 from dashboard.tests.factories import ProfileFactory
+from grants.models.grant_collection import GrantCollection
 
 
 class GrantCollectionFactory(factory.django.DjangoModelFactory):