feat: redesign creations page #114

0xShishigami · 2024-10-02T21:21:38Z

Changes done

Edit ProjectList
Add LogosCarousel
Filter projects by selected logo

Issue ticket number and link

Redesign projects section in creations page

closes PRIUI-264

vercel · 2024-10-02T21:21:42Z

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

Name	Status	Preview	Comments	Updated (UTC)
web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 4, 2024 5:20pm

linear · 2024-10-03T15:02:04Z

PRIUI-264 Redesign Projects section in Creations page

Onizuka-wl · 2024-10-03T18:23:12Z

src/pages/creations/LogosCarousel/index.tsx

+
+export default function LogosCarousel({ companies, onChange }: LogosCarouselProps) {
+ const [loop, setLoop] = useState(carouselState.desktop.loop); // iterations of the logos
+ const [visibleItems, setVisibleItems] = useState(carouselState.desktop.visibleItems); // number of logos visible


I recommend avoiding commenting on every line and writing self-explanatory code.
loop state could be renamed to interations, or logoIteration.

visibleItems: it doesn’t need comments; it explains itself.
maxSize: the same, could be renamed to logosMaxSize.

Onizuka-wl · 2024-10-03T18:24:33Z

src/pages/creations/LogosCarousel/index.tsx

+ // setSize is used to determine the size of the logos
+ // if the index is the selected item, the size is the max size, Math.ceil(VISIBLE_ITEMS / 2)
+ // otherwise, if the index is bigger or smaller than the selected item, the size is the module of the difference between selected item and index
+ const setSize = (index: number, currIndex: number) => {


This function could be renamed to setLogoSizeByIndex and avoid extra comments, the code explains itself.

Onizuka-wl · 2024-10-03T18:29:43Z

src/pages/creations/LogosCarousel/index.tsx

+ const handleChangeItem = (index: number) => {
+ if (index === selectedItem) return;
+
+ if (index === items.length - centerIndex) {


maybe use an or and avoid repeating code.

if(index === (items.length - centerIndex) || index === (centerIndex - 1)){ resetIndex(); return; }

Onizuka-wl · 2024-10-03T18:31:49Z

src/pages/creations/LogosCarousel/index.tsx

+ }
+
+ setSelectedItem(index);
+ if (onChange) onChange(index % companies.length); // get the index of the company


I do not recommend commenting code unless is strictly necessary.

if(onChange){ const companyIndex = index % companies.length; onChange(companyIndex); }

Onizuka-wl · 2024-10-03T18:36:56Z

src/pages/creations/LogosCarousel/index.tsx

+ }
+ }, []);
+
+ useEffect(() => {


This could be a useWindowSize hook, there are a lot of examples that you can follow and reuse in different carousels (and others), so you don't have to put this logic inside the carousel itself.

bdf96f4
d88e2b9

oxlumi

Hey! I made some comments; here’s an overview:

Project Opening: What do you think about having only one project open at a time? If someone opens a new one, it should automatically close the last one. I think this could make navigation a bit smoother 😄
Text Size for "Made in Wonderland": Just a note that the "Made in Wonderland" text looks pretty big on some screens (like Mati's). Maybe we can shrink it a bit for better consistency?
Carousel Visibility: I chatted with Mati about showing the carousel as soon as you enter. If we drop the "We work with the best" section, it might give a cleaner look and allow people to dive into the projects right away
Projects JSON: I made some comments on specific details in this as well :)
Regarding the project list component, can we remove the ":" after the questions? Here’s an image for reference:

oxlumi · 2024-10-03T17:53:54Z

src/data/projects.json

- "web": "https://www.connext.network/"
+ "name": "Crosschain Governance",
+ "company": {
+ "name": "Connext",


We should change "Connext" for "Everclear" (in all the projects)

oxlumi · 2024-10-03T17:55:14Z

public/img/logos/connext.png

This one is the old logo of connext (my bad), let's change it for the Everclear one: https://cryptorank.io/ico/connext

oxlumi · 2024-10-03T17:58:09Z

public/img/logos/makerdao.png

Note: MakerDAO has rebranded as Sky. We should use their new logo. Here's a link to their current logo from Twitter, though I’m not sure about the quality of the image: https://pbs.twimg.com/profile_images/1828469202753122304/i8YRkB4A_400x400.jpg

oxlumi · 2024-10-03T18:01:41Z

src/data/projects.json

+ "content": {
+ "challenge": {
+ "title": "What was the challenge?",
+ "description": "MakerDAO is one of the largest and oldest governance in the Crypto DeFi ecosystem and as such has on a daily basis a large number of votes that need to be executed on-chain. These votes which can be payments, parameter changes in the voult, or a contract update are known as spells."


Can we update the description here?

"description": "Sky (formerly MakerDAO) is one of the largest and oldest governance systems in DeFi. Every day, it oversees a significant number of on-chain votes that need to be executed. These votes can include payments, parameter adjustments within vaults, or contract updates, collectively referred to as spells."

oxlumi · 2024-10-03T18:02:20Z

src/data/projects.json

+ {
+ "name": "Spells",
+ "company": {
+ "name": "MakerDAO",


"name":"Sky",

oxlumi · 2024-10-03T18:06:08Z

src/data/projects.json

- "github": "https://github.com/defi-wonderland/xERC20"
+ "name": "Everclear",
+ "company": {
+ "name": "Connext",


Same here "name":"Everclear",

oxlumi · 2024-10-03T18:06:34Z

src/data/projects.json

- "twitter": "https://twitter.com/amphoraprotocol"
+ "name": "Optimistic Merkle Root Aggregator",
+ "company": {
+ "name": "Connext",


Same here, "name":"Everclear",

oxlumi · 2024-10-03T18:22:46Z

src/pages/creations/index.tsx

@@ -32,7 +49,7 @@ export default function Creations() {
 <HeroDivider>
 <CreationsTitleContainer>
 <SquigglyTitle
- text='WHAT’S COOKING?'
+ text='MADE IN WONDERLAND'
 sizes={{


Just a quick note: the current version of the creations hero looks like this:

Mati and I were reviewing it, and on his computer, the "Made in Wonderland" text appears huge:

On my end, it looks more like this:

Could we consider reducing the text size for different screen resolutions? Not sure

oxlumi · 2024-10-03T18:34:05Z

src/pages/creations/index.tsx

@@ -49,15 +66,26 @@ export default function Creations() {
 </HeroDivider>

 <TitleContainer>
- <ProjectTitle title='Partner projects' />
+ <ProjectTitle>


Current version:

After discussing with Mati, we thought it might be better to display the small carousel as soon as you enter. So, we suggest removing the "We work with the best" section, resulting in something like this:

bd489c9
826c27c

oxlumi · 2024-10-03T18:40:26Z

src/pages/creations/ProjectsList/index.tsx

@@ -41,48 +69,70 @@ export default function ProjectsList({ projects = [] }: ProjectListProps) {
 };

 return (
- <styles.List>
+ <List>
 {projects.map((project) => (
 <ProjectContainer key={project.name}>
 <ProjectHeader onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleClick(project, e.currentTarget)}>


Note: Consider implementing a single open state for projects. If one project is opened, the others should automatically close : )

0xArdy

Some UI/UX comments:

the carousel in creations page should have cursor pointer
maybe we can add a hover effect for the project icons in the carousel
the user cant select the text in the project description, also it shouldn't have cursor pointer in that section
i think we should remove the : in the project description titles
From: What was the challenge?:
To: What was the challenge?

0xArdy · 2024-10-03T19:24:53Z

src/pages/creations/LogosCarousel/index.tsx

+import { styled } from 'styled-components';
+import { MOBILE_MAX_WIDTH, TABLET_MAX_WIDTH } from '~/components';
+import { Carousel } from 'react-responsive-carousel';
+import { useCallback, useEffect, useMemo, useState } from 'react';


react imports should be on line 1

0xArdy · 2024-10-03T19:29:04Z

src/pages/creations/index.tsx

 import { PageContent } from '~/containers/PageContent';
+import LogosCarousel from './LogosCarousel';
+import { useMemo, useState } from 'react';


0xShishigami · 2024-10-04T17:10:24Z

Some UI/UX comments:

the carousel in creations page should have cursor pointer

maybe we can add a hover effect for the project icons in the carousel

the user cant select the text in the project description, also it shouldn't have cursor pointer in that section

i think we should remove the : in the project description titles
From: What was the challenge?:
To: What was the challenge?

@0xArdy
77d3055

0xShishigami added 4 commits October 2, 2024 16:33

style: edit book.svg for visual balance

1adb50f

feat: add companies logo

ddc5833

feat: redesign creations page

dd85fd0

feat: add logos carousel

83db550

fix: build

538f585

vercel bot deployed to Preview October 2, 2024 21:27 View deployment

0xShishigami added 2 commits October 3, 2024 12:34

feat: update projects highlight in the landing

04184ef

style: split styles into separate components

0db1d53

0xShishigami marked this pull request as ready for review October 3, 2024 16:51

0xShishigami requested a review from a team as a code owner October 3, 2024 16:51

vercel bot deployed to Preview October 3, 2024 16:51 View deployment

Onizuka-wl requested changes Oct 3, 2024

View reviewed changes

oxlumi requested changes Oct 3, 2024

View reviewed changes

0xArdy reviewed Oct 3, 2024

View reviewed changes

0xShishigami added 8 commits October 3, 2024 18:45

feat(LogosCarousel): improve code readability

bdf96f4

refactor(useWindowsSize): add useBreakpoints hook

d88e2b9

style: small UI improvements

77d3055

feat: change project opened behaviour

8be9cbd

feat: update projects

7255338

style: change Creations title size and page container max-width

bd489c9

style: scroll down on LogosCarousel click

826c27c

fix: Navbar height when closed

d263dab

vercel bot had a problem deploying to Preview October 4, 2024 17:07 Failure

fix: build

86aa223

vercel bot deployed to Preview October 4, 2024 17:20 View deployment

feat: redesign creations page #114

Are you sure you want to change the base?

feat: redesign creations page #114

Conversation

0xShishigami commented Oct 2, 2024 • edited Loading

Changes done

Issue ticket number and link

vercel bot commented Oct 2, 2024 • edited Loading

linear bot commented Oct 3, 2024

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

oxlumi left a comment • 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

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

0xArdy left a 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

0xShishigami commented Oct 4, 2024

0xShishigami commented Oct 2, 2024 •

edited

Loading

vercel bot commented Oct 2, 2024 •

edited

Loading

oxlumi left a comment •

edited

Loading