Enable light / dark mode on Cred staking dApp

[prtk418]

The UI is built using tailwind css. This package can be utilised to build a switch for light and dark mode for the cred staking dapp.

Contribution guidelines:

• Fork from mainnet branch
• Make your changes in a new branch and push
• Raise a PR again mainnet branch

[ThanosNode]

Reward: 1000 $MAND tokens Delivery Time Frame: 2 Weeks + 1 week contingency

[ANIKETHPAWAR]

Hey @prtk418 i have started working on the enhancement part and these are the screenshots of it, I want a clarification on how to proceed with the light mode setting of the home page, airdrop page, as there are images in it how do you want me to make compatible with light mode, should i totally remove the image or add something new to it ( i'll follow your suggestions) also please do share the logo image for navbar with respect to light mode.

[prtk418]

Hey @prtk418 i have started working on the enhancement part and these are the screenshots of it, I want a clarification on how to proceed with the light mode setting of the home page, airdrop page, as there are images in it how do you want me to make compatible with light mode, should i totally remove the image or add something new to it ( i'll follow your suggestions) also please do share the logo image for navbar with respect to light mode.

@ThanosNode @sandeepmande Please advise

[ThanosNode]

Hello, @ANIKETHPAWAR cc: @prtk418 @sandeepmande Make sure the font follows the brand guidelines here Avoid as many dark spots as possible when in light mode I think that should be good to go!

[sandeep-india]

Hello @ANIKETHPAWAR

Thanks for picking this up.

1 - Choose other appropriate design elements that would choose the light mode - you will have to make your own design choices for this.

2 - All our brand resources are in this drive folder : https://drive.google.com/drive/u/0/folders/18dfa77OSr2JazBXVqtsYdwBdCKZh5Zr1.

3 - add a dark-mode/light mode switch button to switch between the UIs.

4 - for the Stats and Airdrop box also you need to chose the appropriate light colors that will suit the light mode. May be you can use lighter gradients of blue that fade our to white

Thanks, Sandeep.

[ANIKETHPAWAR]

Hey @sandeep-india so far i have done this much and now working on the background images for home and airdrop page trying to find similar images for light mode to make the transition smooth.

Suggestions are appreciated!! https://github.com/mande-labs/trust-drops/assets/84840480/32843fdd-cc20-49e6-979a-ab4100c1a421

[sandeep-india]

Hello @ANIKETHPAWAR

Thanks for pushing on this and making progress. Great work.

• I think you can choose a dark/light mode button design similar to that of https://www.crediblemandela.xyz/ - it looks better and clear for the user.

• I don't think the table backgrounds color's that seem to be inverted to be that of Dark mode are making good visual appeal - Can you please play with the colors and graidents a little more - our inhouse desinger @Gauravpawar3102 can help you with some suggestions on this.

  • @Gauravpawar3102 for the background images - can you pls give the light mode images? so @ANIKETHPAWAR can integrate them ?

  Thanks, Sandeep

[Gauravpawar3102]

Sure @sandeep-india I'll be helping @ANIKETHPAWAR with the images.

[ThanosNode]

Can we incorporate a red element in the light mode somewhere? Red is a color that designers often use in user interface (UI) and user experience (UX) design to grab attention, convey urgency, and evoke strong emotions. It can be used in a variety of ways, including: Call-to-action buttons: Red can be used to encourage users to take action. Branding: Red can be a powerful statement that evokes emotions like passion, energy, and urgency.

Just a suggestion.

[Gauravpawar3102]

Thanks, @ThanosNode , for the suggestion! I agree that red can be effective in UI/UX design for drawing attention and conveying urgency. However, I suggest we don't alter our primary colors unless we're considering a complete redesign. This ensures consistency and brand integrity.

[ThanosNode]

@Gauravpawar3102 It doesn't need to be prominent, it's just a suggestion incorporating best practices. Optional.

[ThanosNode]

@Gauravpawar3102 @ANIKETHPAWAR how's it looking so far?

[Gauravpawar3102]

Hi @ThanosNode,

I couldn't find an SVG that matches the current PNG. I'll do one final search. If nothing suitable comes up, I'll create a new SVG or design something fresh to ensure it looks beautiful.

[sandeep-india]

@ANIKETHPAWAR : I think @Gauravpawar3102 has done this design -

Can you please take his input and ship this? Get started on this again pls.

[Gauravpawar3102]

@sandeep-india i had chat with aniketh he had opted out on this due to some academic preps

[prtk418]

@ANIKETHPAWAR possible to create a PR with the progress you already made so far?