Component fixing #12
Component fixing #12
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
@ScreenTechnicals I reviewed the first component you created, but all reviews apply to the second one too.
| @@ -0,0 +1,26 @@ | |||
| /* eslint-disable max-len */ | |||
There was a problem hiding this comment.
@ScreenTechnicals Don't disable ESLint rules
| import React from 'react'; | ||
|
|
||
| const BlankRasa1 = () => { | ||
| const { colorMode } = useColorMode(); |
There was a problem hiding this comment.
@ScreenTechnicals Use useColorModeValue('light-color', 'dark-color'); to handle colors between light/dark theme
| const { colorMode } = useColorMode(); | ||
|
|
||
| return ( | ||
| <div className={ colorMode === 'light' ? 'w-full md:w-[40%] bg-white shadow-md rounded-xl p-5 mt-7 shadow-[#eeeeee] border border-[#fcfcfc] text-black' : 'w-full md:w-[40%] bg-[#171717] shadow-lg rounded-xl p-5 mt-7 shadow-[#0e2119] border border-none text-white' }> |
There was a problem hiding this comment.
@ScreenTechnicals You should use the same tech stack. In this case, @chakra-ui/react provides Box, Text, and Link components. Could you make sure you use the right one? This project uses @chakra-ui/react instead of Tailwind.
There was a problem hiding this comment.
@ScreenTechnicals Use the props @chakra-ui/react provides instead of className and `styles props unless they're needed
There was a problem hiding this comment.
@ScreenTechnicals Follow the same project structure. Move the components into the /ui/[dir] directory based on what it does.
There was a problem hiding this comment.
@ScreenTechnicals Use a better name for the components based on what they do
| @@ -4,7 +4,7 @@ | |||
| "private": false, | |||
| "homepage": "https://github.com/blockscout/frontend#readme", | |||
| "engines": { | |||
| "node": "18", | |||
| "node": ">=18", | |||
There was a problem hiding this comment.
@ScreenTechnicals Don't change project's configurations
There was a problem hiding this comment.
@ScreenTechnicals Use a better name for this file based on what it is.
| <div className="md:flex w-full gap-8"> | ||
| <div className="w-full"> | ||
| <ChainIndicators/> | ||
| </div> | ||
| <BlankRasa1/> | ||
| </div> |
There was a problem hiding this comment.
@ScreenTechnicals Use the components ChakraUI provides (Flex or Grid based on your needs) here
| @@ -84,7 +84,7 @@ const Transactions = () => { | |||
| const pagination = router.query.tab === 'watchlist' ? txsWatchlistQuery.pagination : txsQuery.pagination; | |||
|
|
|||
| return ( | |||
| <> | |||
| <div> | |||
There was a problem hiding this comment.
@ScreenTechnicals Why did you wrap this page?
| maxW={{ base: 'calc(100vw - 32px)', lg: '500px' }} | ||
| closeOnScroll={ isMobile ? true : false } | ||
| isDisabled={ !isTextTruncated } | ||
| <div className="p-0 m-0"> |
There was a problem hiding this comment.
@ScreenTechnicals Use ChakraUI components here
| <div className="bg-"> | ||
| <Box pt={{ base: 0, lg: '20px' }} as="main"> | ||
| { children } | ||
| </Box> | ||
| </div> |
There was a problem hiding this comment.
@ScreenTechnicals bg- doesn't work. Anyway, why did you wrap this component?
Description and Related Issue(s)
Blank Rasa Card component size fixed in the transaction page along with some gaping added b/w the graph and the blank rasa cared component in the home page.
Checklist for PR author