Responsiveness

[dovalid]

There're no designs for mobile view. Feel free to experiment and implement the UI for mobile and every possible screen size as you think it fits best. I think this issue can sum the progress of everything we have currently becoming responsive, you should just open different PRs for different parts of the app, that's where the relevant communication will go.

[KovJonas]

I started working on this issue today:

• First of all, I finished the front page (communities list) design, it has 1 column on smaller screens, and 2 on large screens (tablet, laptop, desktop, etc.)
• I also played with the spacing between the small Tag components on the CommunityCard component.
• Then, I reduced the horizontal padding on the whole container, so it's now smaller on mobile.
• On the top section of the pages, the title, and the Account components are under each other on smaller screens, this way they have enough room, and the layout is nicely arranged this way
• On the [community] page, I tweaked the buttons on the "Platforms" card, they're under each other on small screens
• Added a simple resize event handler to the AccessIndicator
• I also changed the font size, image size, and the spacing (only on smaller screens) on the Level component,

I feel like the right (or bottom right) side of the Level component doesn't look great on small screens, the "You have access" label looks a little bit odd there, but hopefully I'll have a better idea for its placement!

[KovJonas]

I changed the design of the Level component on mobile, it looks better this way (at least in my opinion). Let me know what's your opinion on the overall UI design of the site on smaller screens!

[KovJonas]

I made the following changes after our meeting today:

• First of all, changed the margins/paddings/spacings on the layout in a couple of places, so now the cards are wider on small, mobile screens (space utilization goes brrr)
• Switched the order of the components on the header, and also played with the font size, so now the title is smaller on mobile, and the "Connect to a wallet" button is on the top right section of the screen, as we discussed before
• I also reworked the ActionCard component. Now it accepts a boolean prop called withAccordion, and if you pass it, the card will only show its title initially, and you can open it, so you can reveal its content too. All this logic is handled in the ActionCard component, so I haven't changed the markup in the Platforms/Staked components!
• Last but not least, I worked on the Level component. I played with the spacings inside it, and now the "You have access"/"Wallet not connected" texts aren't visible on mobile (so we can display the images on the left side instead!), but you can see a checkmar or an x icon next to the level's name, with a tooltip on focus state
• Note: I'll need to fix the appearance of the outlines in focus state, and there's also an error on the console because of the Tooltip component, we could talk about that later.

I'll work on the modal appearance later today, and keep you updated on that too!

[KovJonas]

Update:

• Decreased the padding on the modals under mobile, and changed the animation on them.
• The modals will appear on the bottom of the screen on mobile (just like the built in menu on most smartphones)
• Still haven't managed to solve the issue with the focus ring and the icons inside the Tooltip component, but we can talk about it later

[KovJonas]

• I managed to add the focus ring with box shadow, just like on the other Chakra UI components.
• I realized that the forwardRef issue was caused by the Platforms component, and not by the tooltips and icons in the Level component, but I fixed that too now!

[KovJonas]

I decided to play a bit with the spacings on the community page instead of just putting the "Platforms" and "Staked" sections under the levels, because I feel like those are pretty important and they shouldn't be at the bottom of the page. This way, the users can see the first 2 levels even on smaller mobiles, and they can still find the join TG/DC buttons pretty easily.