fix: improve the light-theme #2256

CBID2 · 2024-02-04T05:53:58Z

Fixes Issue

Changes proposed

This PR changes the website's light theme, making it easier for people to navigate the site. Here's what's been done so far:

Made the border of the searchbar's input darker and thicker (see the new version of the first screenshot for reference.)
Made the border of the breadcrumbs darker and thicker (see the second screenshot for reference.)
Add shadowbox and border to card-list and footer(see third screenshot for reference)

Screenshots

Search input having a dark input

Update here's a new version:
Breadcrumbs having a darker and thicker border

Update here's an new version of the breadcrumb
Footer and card list

Note to reviewers

This is a work-in-progress

vercel · 2024-02-04T05:54:01Z

Someone is attempting to deploy a commit to a Personal Account owned by @rupali-codes on Vercel.

@rupali-codes first needs to authorize it.

github-actions

Thank you, CBID2, for creating this pull request and contributing to LinksHub! 💗

The maintainers will review this Pull Request and provide feedback as soon as possible! 😇
We appreciate your patience and contribution, Keep up the great work! 😀

vercel · 2024-02-04T13:15:39Z

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

Name	Status	Preview	Comments	Updated (UTC)
linkshub	❌ Failed (Inspect)			Mar 27, 2024 3:30pm

Anmol-Baranwal · 2024-02-04T14:07:03Z

@CBID2

I know the draft PR isn't ready, but I would suggest these changes.

Even if you want a border in dark theme, use the light border that is used in the cards as shown.

and the same for light background. Use a little light border if possible (use opacity).
It shouldn't be the reason of distraction.

CBID2 · 2024-02-04T14:10:07Z

@CBID2

I know the draft PR isn't ready, but I would suggest these changes.

Even if you want a border in dark theme, use the light border that is used in the cards as shown.

and the same for light background. Use a little light border if possible (use opacity).

It shouldn't be the reason of distraction.

@Anmol-Baranwal, so...something like this: https://github.com/rupali-codes/LinksHub/blob/main/components/Cards/Card.tsx
border-light-white

Anmol-Baranwal · 2024-02-04T14:21:09Z

@Anmol-Baranwal, so...something like this: https://github.com/rupali-codes/LinksHub/blob/main/components/Cards/Card.tsx border-light-white

For light, I'm not sure if there is any. But for dark, using the one on the cards will avoid mismatch of theme.
You can check locally.

sarava338 · 2024-02-04T17:48:12Z

In Dark theme, we have very dark color in background. But in Light theme, We did not. So I hope, the very light color in background and swap the with card's background color will do the trick.

Dark Theme

Light Theme

CBID2 · 2024-02-04T18:19:52Z

In Dark theme, we have very dark color in background. But in Light theme, We did not. So I hope, the very light color in background and swap the with card's background color will do the trick.

Dark Theme

Light Theme

So…you suggest that I use the dark theme’s background as a border for the light one @sarava338?

Anmol-Baranwal · 2024-02-04T18:29:19Z

So…you suggest that I use the dark theme’s background as a border for the light one @sarava338?

He is saying that in dark theme -> The cards are light color compared to the background color.

But it's the opposite in the light theme, so if we make background complete white and cards as the background color (which is lighter one). Then this problem would be fixed.

@rupali-codes
Don't do this without consulting rupali.

sarava338 · 2024-02-04T18:36:32Z

So…you suggest that I use the dark theme’s background as a border for the light one @sarava338?

He is saying that in dark theme -> The cards are light color compared to the background color.

But it's the opposite in the light theme, so if we make background complete white and cards as the background color (which is lighter one). Then this problem would be fixed.

@rupali-codes
Don't do this without consulting rupali.

Yes. And in the Light theme, the little dark color has to be a little darker.

CBID2 · 2024-02-04T23:29:47Z

So…you suggest that I use the dark theme’s background as a border for the light one @sarava338?

He is saying that in dark theme -> The cards are light color compared to the background color.

But it's the opposite in the light theme, so if we make background complete white and cards as the background color (which is lighter one). Then this problem would be fixed.

@rupali-codes Don't do this without consulting rupali.

Ooh just saw this @Anmol-Baranwal after adding the new changes (see the updated photos in the screenshot section of my PR's form). Hopefully, @rupali-codes won't mind the changes.

rupali-codes

I don't see any changes except the border on searchbar

This PR

Main site

CBID2 · 2024-02-05T14:15:17Z

I don't see any changes except the border on searchbar

This PR

Main site

It's a work-in-progress @rupali-codes. Still trying to figure out how to do the other parts.

rupali-codes · 2024-02-05T14:16:28Z

@CBID2 alright, let us know if you need any help

CBID2 · 2024-02-09T12:37:17Z

@CBID2 alright, let us know if you need any help

Hey @rupali-codes and @Anmol-Baranwal, I’m struggling with adding the border to the card components. Can you help me please?

rupali-codes · 2024-02-10T15:30:10Z

@CBID2 alright, let us know if you need any help

Hey @rupali-codes and @Anmol-Baranwal, I’m struggling with adding the border to the card components. Can you help me please?

where you wanna add border?

CBID2 · 2024-02-10T15:48:52Z

@CBID2 alright, let us know if you need any help

Hey @rupali-codes and @Anmol-Baranwal, I’m struggling with adding the border to the card components. Can you help me please?

where you wanna add border?

The card components @rupali-codes

rupali-codes · 2024-02-11T08:02:16Z

@CBID2 alright, let us know if you need any help

Hey @rupali-codes and @Anmol-Baranwal, I’m struggling with adding the border to the card components. Can you help me please?

where you wanna add border?

The card components @rupali-codes

alright, it should be in components/cards/card.tsx file, then in the main div add border classes.

What else are you struggling with?

CBID2 · 2024-02-11T21:44:23Z

@CBID2 alright, let us know if you need any help

Hey @rupali-codes and @Anmol-Baranwal, I’m struggling with adding the border to the card components. Can you help me please?

where you wanna add border?

The card components @rupali-codes

alright, it should be in components/cards/card.tsx file, then in the main div add border classes.

What else are you struggling with?

Hi @rupali-codes. I added the border to the main div like you suggested and nothing shows
Did I do something wrong?

rupali-codes · 2024-02-14T09:31:49Z

@CBID2 alright, let us know if you need any help

Hey @rupali-codes and @Anmol-Baranwal, I’m struggling with adding the border to the card components. Can you help me please?

where you wanna add border?

The card components @rupali-codes

alright, it should be in components/cards/card.tsx file, then in the main div add border classes.
What else are you struggling with?

Hi @rupali-codes. I added the border to the main div like you suggested and nothing shows Did I do something wrong?

You've misplaced the double quotes

It should be <div className="card-body border-light-silver border-2 border-opacity-75">

Anmol-Baranwal · 2024-02-15T09:14:32Z

@CBID2
This is still in draft. Are the changes done.

CBID2 · 2024-02-15T16:45:34Z

@CBID2

This is still in draft. Are the changes done.

No I have to do the footer @Anmol-Baranwal

rupali-codes · 2024-02-18T16:48:08Z

@CBID2
This is still in draft. Are the changes done.

No I have to do the footer @Anmol-Baranwal

you need any help Chrissy?

CBID2 · 2024-02-18T17:19:07Z

@CBID2

This is still in draft. Are the changes done.

No I have to do the footer @Anmol-Baranwal

you need any help Chrissy?

Not yet @rupali-codes

CBID2 · 2024-03-03T06:58:49Z

Made the changes @aftabrehan

rupali-codes

This issue isn't getting fixed, been long ha,
when you try to fix it for light theme it gets weird for dark theme

@CBID2 please let me know if you need any help, wanna close this ASAP

CBID2 · 2024-03-03T12:16:11Z

This issue isn't getting fixed, been long ha,

when you try to fix it for light theme it gets weird for dark theme

@CBID2 please let me know if you need any help, wanna close this ASAP

Ok can you help @rupali-codes

rupali-codes · 2024-03-03T12:17:49Z

@CBID2 yes of course, where are you getting troubles?

CBID2 · 2024-03-03T12:19:14Z

I'm not sure how to make it less weird looking in light mode @rupali-codes. From the photos you posted, it looks fine.

CBID2 · 2024-03-03T17:54:36Z

What do you think @Anmol-Baranwal?

Anmol-Baranwal · 2024-03-04T11:36:33Z

What do you think @Anmol-Baranwal?

I've no problem if others are okay with it.

CBID2 · 2024-03-04T13:30:15Z

@rupali-codes, I really think the theme looks fine.

CBID2 · 2024-03-07T05:12:17Z

@rupali-codes, I really think we should merge this.

rupali-codes · 2024-03-07T09:05:57Z

@rupali-codes, I really think we should merge this.

Can you remove the border for dark theme and keep it only for light theme?

CBID2 · 2024-03-07T12:22:17Z

@rupali-codes, I really think we should merge this.

Can you remove the border for dark theme and keep it only for light theme?

Ok

CBID2 · 2024-03-15T18:49:31Z

Hey @rupali-codes. Can you do another deployment? I made the changes to light theme but I can't see them locally.

This reverts commit 21c3ee3.

CBID2 · 2024-03-24T18:31:49Z

@rupali-codes, can you fix the deploy please? It failed for some odd reason.

Update
I found the error ↓

But I'm not quite sure how to solve it. Can you help?

Anmol-Baranwal · 2024-04-12T12:02:05Z

@CBID2
Should I create a new PR for this? It's urgent because the current live light theme (live) is far from good.

CBID2 · 2024-04-12T15:40:58Z

@CBID2

Should I create a new PR for this? It's urgent because the current live light theme (live) is far from good.

Ok @Anmol-Baranwal

github-actions bot added bug Something isn't working priority: medium Modifying an existing feature labels Feb 4, 2024

github-actions bot assigned CBID2 Feb 4, 2024

github-actions bot reviewed Feb 4, 2024

View reviewed changes

vercel bot deployed to Preview February 4, 2024 13:16 View deployment

vercel bot deployed to Preview February 5, 2024 12:55 View deployment

rupali-codes reviewed Feb 5, 2024

View reviewed changes

CBID2 marked this pull request as ready for review February 21, 2024 03:13

CBID2 added 2 commits March 3, 2024 01:54

fix: placed border in wrapper

d9119e2

fix: improved border

2faa019

aftabrehan previously approved these changes Mar 3, 2024

View reviewed changes

vercel bot deployed to Preview March 3, 2024 12:11 View deployment

rupali-codes reviewed Mar 3, 2024

View reviewed changes

Merge branch 'main' into improve-light-theme

416ce34

CBID2 dismissed aftabrehan’s stale review via 416ce34 March 7, 2024 13:35

CBID2 added 4 commits March 9, 2024 22:49

fix: change from dark theme to light theme

4008f5e

fix: modify border to fit light theme in footer and breadcrumbs

d1fa08f

fix: delete gitpod

21c3ee3

feat: add light theme to card list

ce0ca49

Revert "fix: delete gitpod"

e97c2ba

This reverts commit 21c3ee3.

vercel bot had a problem deploying to Preview March 17, 2024 16:16 Failure

Merge branch 'rupali-codes:main' into improve-light-theme

e6e0cee

vercel bot had a problem deploying to Preview March 27, 2024 15:30 Failure

CBID2 closed this Apr 12, 2024

fix: improve the light-theme #2256

fix: improve the light-theme #2256

Conversation

CBID2 commented Feb 4, 2024 • edited Loading

Fixes Issue

Changes proposed

Screenshots

Note to reviewers

vercel bot commented Feb 4, 2024

github-actions bot left a comment

Choose a reason for hiding this comment

vercel bot commented Feb 4, 2024 • edited Loading

Anmol-Baranwal commented Feb 4, 2024

CBID2 commented Feb 4, 2024 • edited Loading

Anmol-Baranwal commented Feb 4, 2024

sarava338 commented Feb 4, 2024

CBID2 commented Feb 4, 2024

Anmol-Baranwal commented Feb 4, 2024

sarava338 commented Feb 4, 2024

CBID2 commented Feb 4, 2024

rupali-codes left a comment

Choose a reason for hiding this comment

CBID2 commented Feb 5, 2024

rupali-codes commented Feb 5, 2024

CBID2 commented Feb 9, 2024

rupali-codes commented Feb 10, 2024

CBID2 commented Feb 10, 2024

rupali-codes commented Feb 11, 2024

CBID2 commented Feb 11, 2024

rupali-codes commented Feb 14, 2024

Anmol-Baranwal commented Feb 15, 2024

CBID2 commented Feb 15, 2024

rupali-codes commented Feb 18, 2024

CBID2 commented Feb 18, 2024

CBID2 commented Mar 3, 2024

rupali-codes left a comment

Choose a reason for hiding this comment

CBID2 commented Mar 3, 2024

rupali-codes commented Mar 3, 2024

CBID2 commented Mar 3, 2024

CBID2 commented Mar 3, 2024

Anmol-Baranwal commented Mar 4, 2024

CBID2 commented Mar 4, 2024

CBID2 commented Mar 7, 2024

rupali-codes commented Mar 7, 2024

CBID2 commented Mar 7, 2024 • edited Loading

CBID2 commented Mar 15, 2024

CBID2 commented Mar 24, 2024 • edited Loading

Anmol-Baranwal commented Apr 12, 2024

CBID2 commented Apr 12, 2024

CBID2 commented Feb 4, 2024 •

edited

Loading

vercel bot commented Feb 4, 2024 •

edited

Loading

CBID2 commented Feb 4, 2024 •

edited

Loading

CBID2 commented Mar 7, 2024 •

edited

Loading

CBID2 commented Mar 24, 2024 •

edited

Loading