[ENHANCEMENT] Polish the dark mode; Overhaul submit form; Fix dark mode skeleton components; #67

chinmaykunkikar · 2023-11-30T22:47:12Z

Summary

Fix dark mode skeleton components; Polish the dark mode; Overhaul submit form;

Description

Dark Color Variant:
- Introduced dark color variant in Tailwind CSS configuration for unambiguous color assignment.
Light Color Variant:
- Added light variant in Tailwind CSS, expanding color choices for enhanced design flexibility.
Blog Form Overhaul:
- Revamped blog creation form for accessibility, increased whitespace, refined placeholders, and improved width.
Unified Color Scheme:
- Implemented *-slate-* universally, ensuring consistent and hierarchical text colors.
Background Color Adjustment:
- Replaced light mode's white background with slate-50 for aesthetic alignment with UI practices.
Homepage Design Improvements:
- Enhanced visual hierarchy across homepage sections for optimized user experience.
Text Formatting and Styling:
- Converted title case text to sentence case, aligning with Google's writing practices.
Button Interactivity:
- Added hover state to Create Post button for improved user feedback.
Skeleton Loading Enhancement:
- Optimized post skeleton loading for smoother and visually appealing experience.
Font Configuration:
- Integrated Poppins font directly into Tailwind CSS, eliminating arbitrary value classes.
Category Pill Component Updates:
- Introduced <CategoryPill /> component, replacing util/category-props.tsx in line with React principles.
- Added dark mode support with darker light colors for visibility.
- Adjusted CategoryPill colors from bg-*-100 to bg-*-200 for enhanced prominence.
- Set CategoryPill font to medium for coherence with Figma design.

Images

Headers

Before

After

Skeletons (Dark)

Before

After

Featured and latest posts (Dark)

Before

After

Featured and latest posts (Light)

Before

After

All blog posts cards (Dark)

Before

After

Create blog form (Dark)

Before

After

Create blog form (Light)

Before

After

Details page (Dark)

Before

After

Details Page (Light)

Before

After

Modal

Before

After

Issue(s) Addressed

Closes Add Dark Theme for Shimmer #64
Related to fix: Support Dark theme based on the web browser's theme #62

Prerequisites

I have followed all the CONTRIBUTING GUIDELINES

Even if they are repetitive values, they remove the guesswork while setting the color to an element.

More accessibility, more breathing space, improved placeholders, improved width.

Weren't being used anywhere

…*-dark-* This will make all colors uniform and add some hierarchy to the different texts instead of all texts being plain white.

- Embrace the slate color more. - Add some visual hierarchy to different sections of the homepage. - Change Many Title Case Text Elements to Sentence case elements. - Add a hover state to the Create post button.

vercel · 2023-11-30T22:47:16Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
wanderlust	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 4, 2023 7:50pm
wanderlust-backend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 4, 2023 7:50pm

frontend/tailwind.config.js

When you hover over the blank spaces between cards, you'd get a pointer cursor. That's because the cursor was actually over the card container with the onclick property. With this change, The card container is a proper blank space without any consequences.

Change light theme colors according to the theme vars

- Remove unnecessary classes

This will get rid of the need of having the arbitrary value classes in class lists.

- This aligns with the composition practice of react. We strive to make everything a component. - Support dark mode. The dark mode will have darker versions of the light colors. - Change from bg-*-100 to bg-*-200 to make the colors more prominent. - Make the font medium, this will align more with the figma design. - Remove utils/category-props.tsx

krishnaacharyaa · 2023-12-03T02:20:17Z

Create Blog post page looks good to me, in terms of responsiveness, the home page looks a bit missed up, if we are not getting engagements from contributors I'll take it up. No worries. Referring to #13

SankalpHaritash21 · 2023-12-03T03:52:57Z

Hi @chinmaykunkikar @krishnaacharyaa

Can we align title with detail and @chinmaykunkikar as your choice.
@chinmaykunkikar Now I came to know about professional pr. I thought u r making doc for wanderlust website. It look like. @chinmaykunkikar can u tell me from where you get such experience. Plz tell me too.

SankalpHaritash21 · 2023-12-03T04:14:24Z

@chinmaykunkikar your code look great and the approach used is good. I approved ur code.

hey @chinmaykunkikar can u plz add some meta data in index file as It will help in better recognition in google.

updated:

  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wanderlust</title>
  </head>

Edit: add a code block.

chinmaykunkikar · 2023-12-03T04:36:14Z

Create Blog post page looks good to me, in terms of responsiveness, the home page looks a bit missed up, if we are not getting engagements from contributors I'll take it up. No worries. Referring to #13

@krishnaacharyaa, I didn't bother much about the homepage responsiveness.
Tomorrow, I'll skim through some code and if I think I can do it without breaking a sweat, I'll push it in this PR itself. Otherwise, please take it up.

chinmaykunkikar · 2023-12-03T04:49:10Z

@chinmaykunkikar your code look great and the approach used is good. I approved ur code.

hey @chinmaykunkikar can u plz add some meta data in index file as It will help in better recognition in google.

updated:
<title>Wanderlust</title>

Perhaps a topic for another PR? :)

chinmaykunkikar · 2023-12-03T04:51:27Z

hey @chinmaykunkikar can u plz add some meta data in index file as It will help in better recognition in google.

updated:

  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wanderlust</title>
  </head>

Edit: add a code block.

P.S. Please learn to use code blocks when you want to show or refer some code.
For example, in this comment, if I hadn't quoted your reply, I wouldn't have known what you're trying to say.
Because this is what it looked like in your comment before editing:

Screenshot

The rest of the html code except the title tag was automatically parsed by the GitHub markdown.

krishnaacharyaa · 2023-12-03T05:11:38Z

if I think I can do it without breaking a sweat, I'll push it in this PR itself.

Please don't, too many already clubbed in this PR, it later becomes difficult to track.
We'll take this up seperately

And the title one even we'll do it seperately!

We'll get this pushed ASAP, I'm expecting a bit of crowd to come in, let's aim to merge this as top priority

If you can just do the Map type of category, that would suffice for now. If you feel it needs some dedicated time we'll take it up later.

p.s: this has some really nice enhancements, so I'm hurrying to merge this, hope you understand and don't mind 😊

chinmaykunkikar · 2023-12-03T12:27:33Z

We'll take this up seperately

Sure

And the title one even we'll do it seperately!

Yes, sure.

If you can just do the Map type of category, that would suffice for now. If you feel it needs some dedicated time we'll take it up later.

I'll do it in this PR itself.

p.s: this has some really nice enhancements, so I'm hurrying to merge this, hope you understand and don't mind 😊

I get you. But... relax, this is the only task that that's pending for this PR. You'll (probably) just have to click on the merge button once I push it.
Once this is kept on hold, it will take forever to get it fixed.
I'll do it tomorrow because I'm traveling today.

krishnaacharyaa · 2023-12-03T13:15:06Z

I'll do it tomorrow because I'm traveling today.

oops okay... Take your time.

krishnaacharyaa

Thank you for very unique and interesting approach, looks cool to me, just some naming conventions if we can update :D

frontend/src/utils/category-colors.ts

krishnaacharyaa · 2023-12-04T18:08:48Z

@chinmaykunkikar just couple of things, pardon me for being very picky and specific.

The arrow has a little padding at the left, can you fix that

And here

Can we have the Title in the same alignment as Back button, that feels reasonable to me, so that it is heading and has some seperation from the form itself

- This way we make sure we have a single source of truth for all categories and their colors. - const `categories` replaces the constants file CATEGORIES. - I have renamed it to lower case to make it uniform with the rest of the codebase, even if the best practices says to use uppercase for all constatnts.

krishnaacharyaa

Thank you @chinmaykunkikar, LGTM. It's gonna be the biggest PR with 24 commits till date ;)

chinmaykunkikar added 5 commits December 1, 2023 03:47

feat: Add dark color to the theme

e9a320a

Even if they are repetitive values, they remove the guesswork while setting the color to an element.

feat: Completey overhaul the Create blog form

afa1350

More accessibility, more breathing space, improved placeholders, improved width.

chore: Remove stale css dark theme variables

17f652c

Weren't being used anywhere

refactor: Changed all colors from *-gray-* and white to *-slate-* or …

75c4c2c

…*-dark-* This will make all colors uniform and add some hierarchy to the different texts instead of all texts being plain white.

refactor: Overhaul the homepage

583eb97

- Embrace the slate color more. - Add some visual hierarchy to different sections of the homepage. - Change Many Title Case Text Elements to Sentence case elements. - Add a hover state to the Create post button.

chinmaykunkikar self-assigned this Nov 30, 2023

vercel bot deployed to Preview – wanderlust-backend November 30, 2023 22:47 View deployment

chinmaykunkikar added the enhancement Enhancement to the existing code label Nov 30, 2023

vercel bot deployed to Preview – wanderlust November 30, 2023 22:47 View deployment

chinmaykunkikar commented Dec 1, 2023

View reviewed changes

frontend/tailwind.config.js Outdated Show resolved Hide resolved

chinmaykunkikar added 4 commits December 1, 2023 16:21

style: Remove some unnecessary tracking

a5f779b

fix: Add classes to make the app more responsive on smaller screens

286a6a7

feat: Add a light theme to tailwind config

ea05ef3

Change light theme colors according to the theme vars

vercel bot deployed to Preview – wanderlust-backend December 1, 2023 11:49 View deployment

vercel bot deployed to Preview – wanderlust December 1, 2023 11:49 View deployment

chinmaykunkikar added 2 commits December 1, 2023 17:23

fix: Remove Latest post border in dark mode

fe49972

style: Use original breakpoint widths for cards

cd40261

vercel bot deployed to Preview – wanderlust-backend December 1, 2023 13:38 View deployment

vercel bot deployed to Preview – wanderlust December 1, 2023 13:38 View deployment

feat: Add skeletons for dark mode (fixes krishnaacharyaa#64)

62088b1

- Remove unnecessary classes

chinmaykunkikar force-pushed the 64-dark-skeleton-and-fixes branch from 29768d1 to 62088b1 Compare December 1, 2023 15:46

vercel bot deployed to Preview – wanderlust-backend December 1, 2023 15:46 View deployment

vercel bot deployed to Preview – wanderlust December 1, 2023 15:46 View deployment

chinmaykunkikar added 5 commits December 1, 2023 21:31

styles: Add custom font to tailwind config

4f5f5b9

This will get rid of the need of having the arbitrary value classes in class lists.

styles: Add some visual hierarchy by adjusting text sizes.

842ecf7

styles: Overhaul modal styling; add dark mode

2612958

styles: Change some styles of the submit form again

ce2f99a

vercel bot deployed to Preview – wanderlust December 2, 2023 19:48 View deployment

chinmaykunkikar marked this pull request as draft December 2, 2023 19:52

SankalpHaritash21 approved these changes Dec 3, 2023

View reviewed changes

This was referenced Dec 3, 2023

refactor-66: Disable other option when three categories is selected #69

Closed

Make the HomePage responsive for all the devices #13

Closed

vercel bot deployed to Preview – wanderlust-backend December 4, 2023 16:59 View deployment

vercel bot deployed to Preview – wanderlust December 4, 2023 16:59 View deployment

krishnaacharyaa reviewed Dec 4, 2023

View reviewed changes

frontend/src/utils/category-colors.ts Show resolved Hide resolved

frontend/src/utils/category-colors.ts Show resolved Hide resolved

chinmaykunkikar added 2 commits December 5, 2023 00:11

styles: Fix navigation button alignments on blog and details pages

28ac078

chinmaykunkikar force-pushed the 64-dark-skeleton-and-fixes branch from 40a66b8 to 28ac078 Compare December 4, 2023 19:50

vercel bot deployed to Preview – wanderlust December 4, 2023 19:50 View deployment

vercel bot deployed to Preview – wanderlust-backend December 4, 2023 19:50 View deployment

krishnaacharyaa marked this pull request as ready for review December 4, 2023 19:53

krishnaacharyaa approved these changes Dec 4, 2023

View reviewed changes

krishnaacharyaa merged commit a2b9f0b into krishnaacharyaa:main Dec 4, 2023
3 checks passed

chinmaykunkikar deleted the 64-dark-skeleton-and-fixes branch December 8, 2023 07:01

This was referenced Dec 15, 2023

Refactor Form vailidation using the react-hook-form and zod #77

Closed

feat-#6: Setup jest rtl #84

Merged

krishnaacharyaa mentioned this pull request Jun 10, 2024

feat-#378: created readme for git conflicts #412

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ENHANCEMENT] Polish the dark mode; Overhaul submit form; Fix dark mode skeleton components; #67

[ENHANCEMENT] Polish the dark mode; Overhaul submit form; Fix dark mode skeleton components; #67

chinmaykunkikar commented Nov 30, 2023 •

edited

Loading

vercel bot commented Nov 30, 2023 •

edited

Loading

krishnaacharyaa commented Dec 3, 2023

SankalpHaritash21 commented Dec 3, 2023

SankalpHaritash21 commented Dec 3, 2023 •

edited

Loading

chinmaykunkikar commented Dec 3, 2023

chinmaykunkikar commented Dec 3, 2023

chinmaykunkikar commented Dec 3, 2023 •

edited

Loading

krishnaacharyaa commented Dec 3, 2023 •

edited

Loading

chinmaykunkikar commented Dec 3, 2023 •

edited

Loading

krishnaacharyaa commented Dec 3, 2023 •

edited

Loading

krishnaacharyaa left a comment

krishnaacharyaa commented Dec 4, 2023

krishnaacharyaa left a comment

[ENHANCEMENT] Polish the dark mode; Overhaul submit form; Fix dark mode skeleton components; #67

[ENHANCEMENT] Polish the dark mode; Overhaul submit form; Fix dark mode skeleton components; #67

Conversation

chinmaykunkikar commented Nov 30, 2023 • edited Loading

Summary

Description

Images

Headers

Skeletons (Dark)

Featured and latest posts (Dark)

Featured and latest posts (Light)

All blog posts cards (Dark)

Create blog form (Dark)

Create blog form (Light)

Details page (Dark)

Details Page (Light)

Modal

Issue(s) Addressed

Prerequisites

vercel bot commented Nov 30, 2023 • edited Loading

krishnaacharyaa commented Dec 3, 2023

SankalpHaritash21 commented Dec 3, 2023

SankalpHaritash21 commented Dec 3, 2023 • edited Loading

chinmaykunkikar commented Dec 3, 2023

chinmaykunkikar commented Dec 3, 2023

chinmaykunkikar commented Dec 3, 2023 • edited Loading

krishnaacharyaa commented Dec 3, 2023 • edited Loading

chinmaykunkikar commented Dec 3, 2023 • edited Loading

krishnaacharyaa commented Dec 3, 2023 • edited Loading

krishnaacharyaa left a comment

Choose a reason for hiding this comment

krishnaacharyaa commented Dec 4, 2023

krishnaacharyaa left a comment

Choose a reason for hiding this comment

chinmaykunkikar commented Nov 30, 2023 •

edited

Loading

vercel bot commented Nov 30, 2023 •

edited

Loading

SankalpHaritash21 commented Dec 3, 2023 •

edited

Loading

chinmaykunkikar commented Dec 3, 2023 •

edited

Loading

krishnaacharyaa commented Dec 3, 2023 •

edited

Loading

chinmaykunkikar commented Dec 3, 2023 •

edited

Loading

krishnaacharyaa commented Dec 3, 2023 •

edited

Loading