-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rules page #60
base: dev
Are you sure you want to change the base?
Rules page #60
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I just looked at the code right now, but I also think the styling can be improved. Maybe look at some other websites or examples and try to get inspiration. Also you can look at more "fancy" components to add to learn about that and it can be fun to work on, like aceturnity etc
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please also merge dev into your branch, run bun install
, and take a look at other pages for examples of how to migrate to Next.js 15. Most notably, pages need to be async
and we await params now, so a little different (but this can be copy-pasted from other pages)
src/components/rules/RuleCard.tsx
Outdated
}} | ||
aria-label={title} | ||
> | ||
<Card className='flex size-full transform overflow-hidden rounded-xl brightness-95 transition delay-150 duration-300 ease-in-out hover:scale-105 hover:border-primary hover:shadow-lg hover:brightness-100 dark:brightness-100 hover:dark:brightness-110'> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think dark:brightness-100 wont do anything here as it is the default. What is the reason we apply a brightness filter and lower the brightness by default?
function RuleCardSkeleton() { | ||
return ( | ||
<Button | ||
className={cx('group whitespace-normal font-normal ring-0')} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Take note of the changes i wrote about on the RuleCard and apply them here too
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also you shouldnt use a button for a skeleton it is an interactive element.
variant='none' | ||
size='none' | ||
> | ||
<Card className='mb-3 h-[68px] w-full max-w-[614px] shrink transform overflow-hidden rounded-xl brightness-95 transition delay-150 duration-300 ease-in-out hover:scale-105 hover:border-primary hover:shadow-lg hover:brightness-100 md:h-[138px] dark:brightness-100 hover:dark:brightness-110'> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove interactive styles. a skeleton should not be interactive and have hover effects etc
As for the design, I really like it. But the hover effect should probably be made faster. Also I am not sure about why we need to write internal rules on every single internal rules page when they are all in the same list and some other inconsistancies , but it is probably good enough for now. |
Also I was a little strict, but it is probably fine so if you disagree or I misunderstood you can probably just resolve the comment! |
First attempt at creating rules page, open for reviews and suggestions.
Created rules page, necessary mock-data and components, and routing to subpages,
Have only implemented a temporary 'design' of how I want the page to look. Don't think i used the proper approach to using components and/or creating components. Would therefore like suggestions on how i could improve or refractor the actual code, current design of the page, improper use of tailwind properties, or any other areas of improvements.
Closes #18.