yousofalgburi / GamesLink

A place gamers go to where they can discover new and exciting games to play with their friends.
https://gameslink.app/
5 stars 0 forks source link

some css/styling nitpicks #2

Open maxwiseman opened 9 months ago

maxwiseman commented 9 months ago

Note: I think this is a great project. All of the comments I am leaving are just because I think that getting good feedback is necessary to improve at anything. I think you're doing a great job, and you absolutely should keep going. (little tip: make way more commits, your initial commit is like almost the entire project)

  1. The grid that shows all of the games should really be using CSS grid instead of flex. That way the bottom ones stay in their columns. You can use tailwind to add more columns based on screen size, which also gives you more control over how things scale.
  2. All of the content in a game's card on the search or browse screen is aligned to the top. I recommend taking some inspiration for the Vercel dashboard here. There, they have stuck some content to the bottom of the card. I would say you should align everything below the description to the bottom of the card. Also, limit how many categories/genres can show on one card, and set a line-wrap for the description. That way there's less variation in the height of the cards.
  3. The like and dislike buttons aren't very accessible because the color of them (at least in dark mode) is very similar to the background. I get that you did this so that it's clear when you have liked a game, but I think there's a better way. I would leave them in the "muted-foreground" color with a "text-muted-foreground" class, and then change the button variant to primary when the user has selected one. Also set the size prop to "icon" so that the padding is even on all sides.
  4. The scrolling for the filter selection on the left of the search screen could probably be improved. I think you should use the shadcn ScrollArea component, and maybe add a mask image like the scroll-shadow from NextUI. You can do that like this:
    <ScrollArea
    style={{
      maskImage: `linear-gradient(#000,#000,transparent 0,#000 10px,#000 calc(100% - 10px),transparent)`,
    }}
    >...</ScrollArea>
  5. I don't really like the way the filters wrap on mobile. I think a better solution would be to use the new Vaul component in shadcn/ui. When on mobile, hide the filters and instead show a filter button. When they click that button, open a drawer that shows all the filter options.

2024-02-01 at 20 30 26@2x

yousofalgburi commented 9 months ago

I've worked on this project through a private repo which is where a lot of these commits come from. I only recently decided to open source it. I appreciate the attention to small details! I'll make sure to look into the issues outlined.

image

maxwiseman commented 9 months ago

Ahh, ok, that makes much more sense.