Implementing a design system page to showcase each components

[BrianS111]

This will showcase all of the components in the lib/design file as described in https://github.com/relaycc/relay/issues/221

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated
relay	❌ Failed (Inspect)			Jan 23, 2023 at 0:11AM (UTC)
relay-develop	❌ Failed (Inspect)			Jan 23, 2023 at 0:11AM (UTC)

[BrianS111]

@killthebuddh4 So if a file is called 'Button' for example in figma, and the file in the Relay Code is ButtonView.tsx, do you want me to change the file in The Relay Code section to 'Button.tsx'? Or will that cause dev confusion

[BrianS111]

Notes on AboutIcon.tsx: File could benefit by switching hex colors over to theme variables

[BrianS111]

Notes on AlertCircle.tsx: File can benefit from switching hex colors to Theme Variables

[BrianS111]

Notes on ArrowUpCircle.tsx: The component uses Gray/600 and the figma file has it listed at Gray/400 which are slightly two different hex codes

[BrianS111]

Badge.tsx needs to include props for the colored version and also a prop to display the dot to the left of the text.

It also needs functionality for truncation in the case of long text

[BrianS111]

ChatIcon.tsx can benefit from using project variables instead of hex codes

[BrianS111]

Checkbox.tsx is missing the warning / disabled state shown in the two icons below. If the warning state is in a component I get to down the line, they should probably me merged in to one component like shown in Figma. The component is also using hex codes instead of project variables.

[BrianS111]

CloseIcon.tsx can benefit from using project variables instead of hex codes

[BrianS111]

Compose.tsx is missing its loading state / prop which is the icon on the bottom of this image. It is also using hex codes instead of project variables

[BrianS111]

Copy.tsx can benefit from using project variables instead of hex codes

[BrianS111]

Dropdownicon.tsx can benefit from using project variables instead of hex codes

[BrianS111]

Edit.tsx is missing its Loading prop / loading functionality as shown in Figma. It is also using hex colors instead of project variables

[BrianS111]

ENSID.tsx has a hard coded with, which can be fine if it ends up working with the receiver dimensions, but most likely should use a full width and rely on what its placed in to determine the actual with via padding.

On the Profile screen = false view, while the ETH Network aligns with the bottom elements, It isn't aligned according to the figma file which has it placed higher to center align with the elements to it's left as shown in the screenshot below

[killthebuddh4]

@killthebuddh4 So if a file is called 'Button' for example in figma, and the file in the Relay Code is ButtonView.tsx, do you want me to change the file in The Relay Code section to 'Button.tsx'? Or will that cause dev confusion

Don't change any of the file names for now, just take notes.

[BrianS111]

@killthebuddh4 So if a file is called 'Button' for example in figma, and the file in the Relay Code is ButtonView.tsx, do you want me to change the file in The Relay Code section to 'Button.tsx'? Or will that cause dev confusion

Don't change any of the file names for now, just take notes.

Yea, thats what I figured. to not mess up imports and such

[BrianS111]

LinkIcon.tsx and Logout.tsx are missing a loading prop and component as shown in Figma

[BrianS111]

Msgbox.tsx is missing loading prop / loading functionality

[BrianS111]

Still a few more components to go, build is broken currently because props on PinIcon.tsx