Add Cohorts section and content tweaks for Supporting Devs section #19

Pabl0cks · 2023-09-15T23:17:25Z

Added Cohorts section and modified content from current Supporting Devs section according to figma prototypes and notion docs specifications.

Moving this PR to revision, specially to check this stuff that I'm not sure if it's implemented properly:

Couldn't manage to use daisyUI table. Tried giving "table" classname to my <table> but then it didn't display the styles I tried to pass with tailwind classes, or with globals.css.
Added some parameters to theme styles in tailwind.config.js
Set rounded borders to table content in globals.css
Wasn't sure if I had to do something special to make test environment be able to read new API stats, so hardcoded it to make sure it works, will remove before merge.

There are some details pending to confirm, but the will be minor tweaks over the core changes that are currently implemented in this PR.

ToDos

Polish tweaks on Supporting Devs section
Remove hardcoded API URLs.
Remove dummy stats under Cohorts.
Pending confirmation: Should we show Supporting Devs image on mobile?
Pending confirmation: ETH column from Cohorts table, it's Balance or Total Streamed by that Cohort? For now it's set to Balance.
Pending confirmation to show or hide "loogies" on Cohorts section background
Pending confirmation in what to do with Cohorts section and Learn more until we have a Stats band between them. (Same background color)

For next iteration

Add emojis for cohorts.
Change behavior of buttons from Cohorts => Embedded form (Typeform, Tally, Google Forms).
Pending confirmation how / where to get Supporting Devs and Cohorts stats from Figma.
Have square table with scrollbar.
Show the table on mobile too if it looks OK with scrollbar

vercel · 2023-09-15T23:17:30Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
buidlguidl	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 21, 2023 10:00am

packages/nextjs/pages/index.tsx

technophile-04 · 2023-09-18T14:51:52Z

packages/nextjs/pages/index.tsx

+                  <span className="ml-2 font-bold">
+                    {
+                      // Calculation for Total Number of Hackers
+                      cohortsData?.reduce((acc, cohort) => acc + Object.keys(cohort.builders).length, 0)


Maybe we can do this calculation in getStaticProps and pass in totalHackers :

// getStaticProps return { props: { stats, cohortsData, totalHackers, }, // 6 hours refresh. revalidate: 21600, };

Nice suggestion! I've just updated all calculations to do them in getStaticProps 🙌

If I didn't do it in the right way, let me know please! 😅

packages/nextjs/pages/index.tsx

technophile-04 · 2023-09-18T15:28:30Z

packages/nextjs/pages/index.tsx

@@ -209,37 +217,125 @@ const Home: NextPage<{ stats: Stats }> = ({ stats }) => {

      {/* Supporting Devs*/}
      <div className="bg-base-300">
-        <div className="mx-auto lg:max-w-[1980px] bg-none lg:bg-[url('/assets/funding.png')] md:[background-position-x:40vw] md:bg-contain bg-no-repeat xl:bg-right">
+        <div className="mx-auto lg:max-w-[1980px] bg-none lg:bg-[url('/assets/support-high-impact-devs.png')] md:[background-position-x:45vw] [background-position-y:50%] md:bg-auto bg-no-repeat ">


Was wondering if we should keep this full image similar to other section, also found in Figma we have it similar to the other section (lol maybe Andrea was tweaking a few things while I was viewing) :

But I think I like it how we have it for other sections.

Also noticed that for some reason website image looks a bit blurry :

Just tried this section making similar to other sections at 07a8cde as discussed in TG :

But on screens b/w 1024 - 1180 it looks a bit weird since we have alot description in this section as compared to other sections :

Current section Other similar section with less description

Screen.Recording.2023-09-20.at.7.35.55.PM.mov

Screen.Recording.2023-09-20.at.7.36.38.PM.mov

I have commented on your code below, lol was not sure which looks better maybe we could ask Andrea for suggestions too?

Here is the comparison links :

Current with new changes : https://buidlguidl-l2angsz0j-buidlguidldao.vercel.app/

Old one : https://buidlguidl-7ku1uzgrz-buidlguidldao.vercel.app/

Thanks for playing with it and proposing a new version, I prefer your approach ♥.

I'll ask Andrea too 🙌

The old version doesn't display correctly in super big screens;

But it's fixed in the new one!

packages/nextjs/pages/index.tsx

packages/nextjs/tailwind.config.js

technophile-04 · 2023-09-18T15:58:32Z

Tysm @Pabl0cks !!! Looks nice ! added few small comments 🙌

Couldn't manage to use daisyUI table. Tried giving "table" classname to my <table> but then it didn't display the styles I tried to pass with tailwind classes, or with globals.css.

I think maybe you got this notion because daisy table class applies base-100 as table background and we also had base-100 as section background, I tried applying table-zebra, table-compact classes and they we getting applied

But yeah I think its fine we apply our own classes to table instead of relying on daisyUI v2 table class because the v2 table are hard to customize even their docs said they solved this in V3 :

So its fine if we don't use daisyUI table 🙌

Pabl0cks · 2023-09-20T08:34:11Z

But yeah I think its fine we apply our own classes to table instead of relying on daisyUI v2 table class because the v2 table are hard to customize even their docs said they solved this in V3 :

So its fine if we don't use daisyUI table 🙌

Thanks for the awesome review and explanations Shiv, and thanks for the research on daisyUI v2 table limitations 🔥♥

I solved (or tried to!) all of the review issues except the Supporting Devs background that we discussed on TG.

Let me know if you see anything else, or if any of my fixes does not have the correct approach 🙌

technophile-04 · 2023-09-20T15:58:27Z

Tysm Pablo the changes looks great !! Just updated "supporting dev section" #19 (comment) was not sure which looks better so kept the previous one commented below because I kinda like that one too, we should remove either one before merging 🙌

One last thing (we could also maybe tackle this in another PR), regarding the Cohort section table should we shorten it a bit so that it looks "square" and have a scroll bar as Figma? :

So maybe we should add this to "next iteration" of #19 (comment) :

Have square table with scroll bar
Show the table on mobile too (I think once we have scroll we can show table on mobile too since it won't be too long)

Pabl0cks · 2023-09-20T22:54:18Z

One last thing (we could also maybe tackle this in another PR), regarding the Cohort section table should we shorten it a bit so that it looks "square" and have a scroll bar as Figma? :

Andrea saw OK current table version with that size and no scrollbar, but asked what would happend when more Cohorts appear, and you're right! There is no scrollbar for now when that happens in the future.

Tried adding it to not make table grow with more cohorts, but found myself with problems because of the table shadow and thead border-less "background-less".

I think we can work on it on a future iteration, yep 🙌 Added to the "For next iteration" section from PR description

carletex · 2023-09-21T07:58:49Z

I think we can work on it on a future iteration, yep 🙌 Added to the "For next iteration" section from PR description

Sounds good!

Show the table on mobile too (I think once we have scroll we can show table on mobile too since it won't be too long)

Maybe we could show this on mobile for now?

Pabl0cks · 2023-09-21T09:00:45Z

Maybe we could show this on mobile for now?

Yes! I thought about it when I added it, but then forgot to implement it. Will get on it now 🙌

packages/nextjs/pages/index.tsx

…rts size

Pabl0cks · 2023-09-21T10:06:35Z

I've just added Cohort stats badges on mobile, let me know if you would change its appearance or see any other issue 🙌

Thanks a lot for the reviews, appreciate your patience with this task!!

technophile-04

Looks great !! Tysm Pablo 🙌

carletex · 2023-09-21T15:41:59Z

Amazing work @Pabl0cks and @technophile-04 !!

Pabl0cks added 4 commits September 16, 2023 01:04

Add new cohorts and support devs assets

ea1c953

Set table round borders at globals css

058d542

Theme styles tweaks

dafbca1

Add cohorts section and stats calculations, and support dev tweaks

dea9d07

Pabl0cks marked this pull request as draft September 15, 2023 23:19

Pabl0cks added 2 commits September 18, 2023 01:27

Fix: Align cohorts table titles to content on small resolutions

69453a6

Tweak support-devs background position Y to be centered

2cd3c32

vercel bot deployed to Preview September 17, 2023 23:31 View deployment

Add totalWithdrawn stat and update totals

721ccbc

vercel bot deployed to Preview September 18, 2023 08:25 View deployment

Pabl0cks marked this pull request as ready for review September 18, 2023 08:37

Pabl0cks requested review from technophile-04 and carletex September 18, 2023 08:37

carletex reviewed Sep 18, 2023

View reviewed changes

packages/nextjs/pages/index.tsx Outdated Show resolved Hide resolved

Delete hardcoded API URL, add mobile support devs image and minor tweaks

3f9c3fb

vercel bot deployed to Preview September 18, 2023 14:23 View deployment

Minor style tweaks

4980c69

vercel bot deployed to Preview September 18, 2023 14:33 View deployment

technophile-04 reviewed Sep 18, 2023

View reviewed changes

packages/nextjs/pages/index.tsx Outdated Show resolved Hide resolved

technophile-04 reviewed Sep 18, 2023

View reviewed changes

packages/nextjs/pages/index.tsx Outdated Show resolved Hide resolved

technophile-04 reviewed Sep 18, 2023

View reviewed changes

packages/nextjs/pages/index.tsx Outdated Show resolved Hide resolved

technophile-04 reviewed Sep 18, 2023

View reviewed changes

packages/nextjs/tailwind.config.js Outdated Show resolved Hide resolved

technophile-04 reviewed Sep 18, 2023

View reviewed changes

packages/nextjs/tailwind.config.js Outdated Show resolved Hide resolved

Small tweaks to solve first review issues

7e54813

vercel bot deployed to Preview September 19, 2023 09:05 View deployment

update support-devs section similar to se-2, SRE section

07a8cde

vercel bot deployed to Preview September 20, 2023 08:32 View deployment

increase the size to supporting-dev size to 7xl for big image

3d98de7

vercel bot deployed to Preview September 20, 2023 14:11 View deployment

Merge 'origin/main' into cohorts-section

2584a4b

vercel bot deployed to Preview September 20, 2023 15:07 View deployment

update padding of supporting dev to match other sections

1b1204e

vercel bot deployed to Preview September 20, 2023 15:20 View deployment

Pabl0cks commented Sep 21, 2023

View reviewed changes

packages/nextjs/pages/index.tsx Outdated Show resolved Hide resolved

Pabl0cks added 2 commits September 21, 2023 11:52

Fix empty space on resolutions below 333px width

1df073d

Add cohorts badges to mobile, delete old cohorts table, tweak h2 Coho…

d973e9a

…rts size

vercel bot deployed to Preview September 21, 2023 10:00 View deployment

technophile-04 approved these changes Sep 21, 2023

View reviewed changes

carletex merged commit 4f410e8 into main Sep 21, 2023
2 checks passed

carletex deleted the cohorts-section branch September 21, 2023 15:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Cohorts section and content tweaks for Supporting Devs section #19

Add Cohorts section and content tweaks for Supporting Devs section #19

Pabl0cks commented Sep 15, 2023 •

edited

Loading

vercel bot commented Sep 15, 2023 •

edited

Loading

technophile-04 Sep 18, 2023 •

edited

Loading

Pabl0cks Sep 19, 2023 •

edited

Loading

technophile-04 Sep 18, 2023

technophile-04 Sep 20, 2023 •

edited

Loading

Pabl0cks Sep 20, 2023

carletex Sep 21, 2023

technophile-04 commented Sep 18, 2023

Pabl0cks commented Sep 20, 2023

technophile-04 commented Sep 20, 2023 •

edited

Loading

Pabl0cks commented Sep 20, 2023

carletex commented Sep 21, 2023

Pabl0cks commented Sep 21, 2023

Pabl0cks commented Sep 21, 2023

technophile-04 left a comment

carletex commented Sep 21, 2023

Add Cohorts section and content tweaks for Supporting Devs section #19

Add Cohorts section and content tweaks for Supporting Devs section #19

Conversation

Pabl0cks commented Sep 15, 2023 • edited Loading

vercel bot commented Sep 15, 2023 • edited Loading

technophile-04 Sep 18, 2023 • edited Loading

Choose a reason for hiding this comment

Pabl0cks Sep 19, 2023 • edited Loading

Choose a reason for hiding this comment

technophile-04 Sep 18, 2023

Choose a reason for hiding this comment

technophile-04 Sep 20, 2023 • edited Loading

Choose a reason for hiding this comment

Pabl0cks Sep 20, 2023

Choose a reason for hiding this comment

carletex Sep 21, 2023

Choose a reason for hiding this comment

technophile-04 commented Sep 18, 2023

Pabl0cks commented Sep 20, 2023

technophile-04 commented Sep 20, 2023 • edited Loading

Pabl0cks commented Sep 20, 2023

carletex commented Sep 21, 2023

Pabl0cks commented Sep 21, 2023

Pabl0cks commented Sep 21, 2023

technophile-04 left a comment

Choose a reason for hiding this comment

carletex commented Sep 21, 2023

Pabl0cks commented Sep 15, 2023 •

edited

Loading

vercel bot commented Sep 15, 2023 •

edited

Loading

technophile-04 Sep 18, 2023 •

edited

Loading

Pabl0cks Sep 19, 2023 •

edited

Loading

technophile-04 Sep 20, 2023 •

edited

Loading

technophile-04 commented Sep 20, 2023 •

edited

Loading