Brand new design for clr.fund dapp #546

pkretzschmar · 2022-08-24T12:54:01Z

This PR implements the new design proposed by General Magic.

…d error due to infura requiring project id

Styles/new themes

yuetloo · 2022-08-24T18:20:05Z

vue-app/src/components/RecipientSubmissionWidget.vue

      <loader v-if="isLoading" />
-      <div
+      <!-- <div


right, this comment was the reason i didn't see the transaction status update.

@pkretzschmar done

yuetloo · 2022-08-24T18:21:53Z

vue-app/src/components/CriteriaModal.vue

-            <p class="no-margin">Close</p>
-            <img src="@/assets/close.svg" />
-          </div>
+          <h2>Buidl Round criteria</h2>


Please make Round lowercase

@pkretzschmar done

yuetloo · 2022-08-24T20:15:26Z

vue-app/src/plugins/round/criteria.ts

@@ -6,28 +6,39 @@ export interface Criterion {

 const CRITERIA: Criterion[] = [
  {
-    emoji: '🤲',
+    emoji: '💰',
+    criterion: 'Related to Buidl Honduras',


Was this copy from an older develop branch? I think we changed it to use the variable operator instead of hardcoded to Buidl Honduras... But, I can fix this once we merge your branch as a separate PR for copy updates..

I didn't found the variable operator on the development branch. Can you point out were it is? Than I can change it =) @yuetloo

Sorry, what I really meant was don't change the text for the criteria defined in this file.

yuetloo · 2022-08-24T21:53:33Z

vue-app/src/views/JoinLanding.vue

      </div>
    </div>
-
-    <round-status-banner />
-


The new design removes the round status banner?

yuetloo · 2022-08-24T21:59:47Z

vue-app/src/views/Landing.vue

            Using MACI, a zero-knowledge technology, it's impossible to prove
            how you contributed. This drives bribers insane because they have no
            idea whether you actually did what they bribed you to do!
          </p>
-          <links to="/about/maci">About MACI</links>


is it intentional that we are removing link to MACI?

yuetloo · 2022-08-24T22:46:20Z

vue-app/src/views/Landing.vue

-          <links to="/about">About clr.fund</links>
+          <p class="text-body">
+            <links to="/about">clr.fund forum ↗</links>
+          </p>


link to clr.fund forum should be https://forum.clr.fund/

@pkretzschmar done

yuetloo · 2022-08-24T22:47:16Z

vue-app/src/views/Landing.vue

+          </p>
+          <p class="text-body">
+            <links to="/about">Fork your own CLR ↗</links>
+          </p>


link to fork your own clrfund should be https://github.com/clrfund/monorepo/

@pkretzschmar done

yuetloo · 2022-08-24T23:03:36Z

vue-app/src/views/VerifyLanding.vue

          <wallet-widget
            v-if="!currentUser"
            :isActionButton="true"
            :fullWidthMobile="true"
          />
-          <links v-if="currentUser" to="/verify/connect" class="btn-primary">
-            I have BrightID installed
+          <links v-if="currentUser" to="/verify/connect" class="btn-action">


I find changing the button text to Connect here is confusing to me because sometimes it connects to wallet and sometimes redirects to the BrightID page.. What it used to do is that after the wallet is connected, it displays I have BrightID installed and on click, redirects user to the BrightID page.

yuetloo · 2022-08-24T23:24:02Z

vue-app/src/views/Profile.vue

            @click="disconnect"
+            class="icon-btn"
          >


the disconnect button is not visible in the light mode.

yuetloo · 2022-08-24T23:40:11Z

vue-app/src/components/BrightIdWidget.vue

-  background: var(--bg-secondary-color);
-  border-radius: 0.5rem;
+  color: #16161a;
+  background: var(--bg-bright-id-widget);


The BrightId widget on the project list page in the dark mode looks a bit cut off on the sides when user is not verified.

yuetloo · 2022-08-31T13:58:35Z

vue-app/src/styles/_vars-dark.scss

+  --link-color: #41BD8A;
+  --bg-circle: transparent;
+  --bg-btn-primary: #41BD8A;
+  --bg-btn-secondary: transparent;


One of the goals of this project is to make future brand customization easier/simpler. So, I was hoping the new design will help make this css variable list shorter and not to grow it. That way, rebranding will simply be changing a few colour defined here.

yuetloo · 2022-08-31T14:04:32Z

Luiza, as discussed with Pedro and rb, the screenshots in the doc of this project is for reference only, they are not updated, so, please don't change the text to match the screenshot in the doc. Please keep the text same as the develop branch if possible. I'll double check as i merge the code and will correct as necessary. But, just keep in mind if you're making more changes.

yuetloo · 2022-08-31T14:10:31Z

Following are the issues (with screenshots) that i previously shared with Pedro.

ProjectAdded page missing buttons on resolution 1240x724 (on a Macbook air)

https://media.discordapp.net/attachments/1004453944484974624/1011998807984181288/Screen_Shot_2022-08-24_at_10.00.51_AM.png?width=1100&height=648

There's scrollbar on previous design.

yuetloo · 2022-08-31T14:16:17Z

ProjectAdded page misalign issue in mobile mode
https://media.discordapp.net/attachments/1004453944484974624/1011998807598309446/Screen_Shot_2022-08-24_at_10.00.39_AM.png?width=499&height=696

yuetloo · 2022-08-31T14:19:31Z

the transaction progress status are missing when adding project, i have logged a comment in the code where it's commented out, probably mistakenly for testing purposes...

yuetloo · 2022-08-31T14:22:19Z

Project page, the title looked misaligned with the other fields to me. Please confirm if this is the intended design. Pedro told me the image looked misaligned because the image was transparent.
https://media.discordapp.net/attachments/1004453944484974624/1012002719881498705/Screen_Shot_2022-08-24_at_10.16.55_AM.png?width=1100&height=595

yuetloo · 2022-08-31T14:24:37Z

Side by side buttons have different width.
https://media.discordapp.net/attachments/1004453944484974624/1012131991862394921/Screen_Shot_2022-08-24_at_6.50.32_PM.png?width=1100&height=632

https://media.discordapp.net/attachments/1004453944484974624/1012146052285083749/Screen_Shot_2022-08-24_at_7.45.49_PM.png?width=468&height=696

luizakp · 2022-09-05T18:56:43Z

@yuetloo worked on the Landing page as well, at least here the mobile version was broken

yuetloo · 2022-09-05T20:42:17Z

@yuetloo worked on the Landing page as well, at least here the mobile version was broken

Sorry, I don't understand this statement, can you clarify? @luizakp

luizakp · 2022-09-06T06:50:35Z

@yuetloo worked on the Landing page as well, at least here the mobile version was broken

Sorry, I don't understand this statement, can you clarify? @luizakp

Yes, the landing page (home page) wasn't working properly on mobile devices before, now it's https://www.loom.com/share/e5a2a6c84429497387e08ec3f329c709

yuetloo and others added 25 commits August 9, 2022 21:04

use brightid v6 api

c14e626

enable brightid blind signatures

9233d16

update brightid verification check to work with v6 and fix ipfs uploa…

f387a0f

…d error due to infura requiring project id

fix lint warning

736589e

feat: added new font

4c8c616

styles: change font style and text color

6804ad2

Merge branch 'brightid-v6' into styles/new-themes

3ab2fcd

feat: new images

ac059a2

styles: added new font style

4432cd5

style: change button to new format

fa8c27c

style: added new buttons and typography to theme

c5617db

style: new colors and variables to manage light/dark theme

0b5d83c

hotfix: added new criterias

5c967cb

styles: minor css changes

0ae3921

style: change bright id widget to match new design

9f086e6

styles: refactor cart to match new design

4260221

styles: refactor profile component

4006edd

styles: refactor success pages to match new design

dd0b5b5

style: refactor project page

90b35f8

hotfix: small css changes

485f1f4

style: refactor time-left component

e6d39aa

style: refactor about page

8d89b36

style: refactor join page

4de3fb9

style: refactor landing page

b06fedc

Merge pull request #1 from GeneralMagicio/styles/new-themes

82f20bc

Styles/new themes

yuetloo requested changes Aug 24, 2022

View reviewed changes

yuetloo reviewed Aug 24, 2022

View reviewed changes

yuetloo reviewed Aug 25, 2022

View reviewed changes

yuetloo reviewed Aug 31, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Brand new design for clr.fund dapp #546

Brand new design for clr.fund dapp #546

pkretzschmar commented Aug 24, 2022

yuetloo Aug 24, 2022

luizakp Sep 5, 2022

yuetloo Aug 24, 2022

luizakp Sep 5, 2022

yuetloo Aug 24, 2022

luizakp Sep 5, 2022 •

edited

Loading

yuetloo Sep 5, 2022

yuetloo Aug 24, 2022

yuetloo Aug 24, 2022

yuetloo Aug 24, 2022

luizakp Sep 5, 2022

yuetloo Aug 24, 2022

luizakp Sep 5, 2022

yuetloo Aug 24, 2022

yuetloo Aug 24, 2022

yuetloo Aug 24, 2022

yuetloo Aug 31, 2022

yuetloo commented Aug 31, 2022

yuetloo commented Aug 31, 2022

yuetloo commented Aug 31, 2022

yuetloo commented Aug 31, 2022

yuetloo commented Aug 31, 2022

yuetloo commented Aug 31, 2022

luizakp commented Sep 5, 2022

yuetloo commented Sep 5, 2022 •

edited

Loading

luizakp commented Sep 6, 2022

Brand new design for clr.fund dapp #546

Are you sure you want to change the base?

Brand new design for clr.fund dapp #546

Conversation

pkretzschmar commented Aug 24, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

luizakp Sep 5, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yuetloo commented Aug 31, 2022

yuetloo commented Aug 31, 2022

yuetloo commented Aug 31, 2022

yuetloo commented Aug 31, 2022

yuetloo commented Aug 31, 2022

yuetloo commented Aug 31, 2022

luizakp commented Sep 5, 2022

yuetloo commented Sep 5, 2022 • edited Loading

luizakp commented Sep 6, 2022

luizakp Sep 5, 2022 •

edited

Loading

yuetloo commented Sep 5, 2022 •

edited

Loading