Feature/sidebar shadow #29

timothyrusso · 2023-09-23T13:42:25Z

Description

Add shadow to the sidebar.
We must think about using css variables for all our colors, for example something like this:

// Define your colors as constants
const NEUTRAL_FOCUS_LIGHT = "#4C515B";

        light: {
          // ... other colors
          neutralFocus: NEUTRAL_FOCUS_LIGHT, // For Tailwind utility classes
          '--neutral-focus-light': NEUTRAL_FOCUS_LIGHT, // As a CSS variable
        },

Issue link

Fixes # (issue)

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
Any dependent changes have been merged and published in downstream modules

vercel · 2023-09-23T13:42:30Z

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

Name	Status	Preview	Comments	Updated (UTC)
chingu-dashboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 27, 2023 1:12pm

timothyrusso · 2023-09-23T13:53:23Z

@Dan-Y-Ko If we proceed with this solution, do you prefer to put the custom classes for the sidebar in a specific css file for the sidebar?

Dan-Y-Ko · 2023-09-24T06:41:04Z

@Dan-Y-Ko If we proceed with this solution, do you prefer to put the custom classes for the sidebar in a specific css file for the sidebar?

The issue I see with that is I see there's 2 colors for the same theme color.
neutral-focus and --neutral-focus: NEUTRAL_FOCUS_LIGHT,

with your suggestion, would we have this duplication for everything?

timothyrusso · 2023-09-24T10:31:26Z

@Dan-Y-Ko If we proceed with this solution, do you prefer to put the custom classes for the sidebar in a specific css file for the sidebar?

The issue I see with that is I see there's 2 colors for the same theme color. neutral-focus and --neutral-focus: NEUTRAL_FOCUS_LIGHT,

with your suggestion, would we have this duplication for everything?

@Dan-Y-Ko The problem is, if we need to use custom themes colours outside of Tailwind CSS classes we can't. One solution could be use css variables, for example for the sidebar shadow's color.
We can decide to duplicate only the colours that we need, unfortunately we can't do something like this:

//Tailwind configuration file
--neutral-focus-dark: "#A0A5AE"

And then just say:

        dark: {
          // ... other colors
          neutralFocus: var(--neutral-focus-dark)

The reason is that the Tailwind configuration file is a JavaScript object that gets processed at build time to generate the necessary CSS. The var(--variable-name) syntax is a runtime CSS feature, and it's not directly interpretable within the Tailwind configuration.

src/app/globals.css

JaneMoroz · 2023-09-26T16:08:00Z

What about creating a custom shadow in tailwind config?

timothyrusso · 2023-09-26T16:18:16Z

What about creating a custom shadow in tailwind config?

Hi @JaneMoroz I think the problem will be the same, we will have to update the rgba() color value of the neutral-focus value if we change it in the future.
We can do something like this:

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      }
    }
  }
}

The only difference is that we put the custom shadow in the tailwind config, instead of doing it in the global.css with a selector.
If you mean something else feel free to post it as a comment so I can try it :)

JaneMoroz · 2023-09-26T16:25:00Z

@timothyrusso the shadow color is also based on the theme chosen, right?

timothyrusso · 2023-09-26T16:28:25Z

@timothyrusso the shadow color is also based on the theme chosen, right?

@JaneMoroz yes this is the request

JaneMoroz · 2023-09-26T16:57:58Z

Smth like this works shadow-[0_35px_60px_-15px_rgba(0,0,0,0)] shadow-neutral-focus/30 but it's weird...

Another way is to use dark: prefix but daisyUI theming is using data attribute, I need to make sure we can use data attribute and prefix at the same time => then it might look like this shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)] dark:shadow-[0_35px_60px_-15px_rgba(256,256,256,0.3)]
DaisyUI also mentions some CSS variables in daisyUI themes, but I'm not sure how to make it work with shadow.

JaneMoroz · 2023-09-26T16:59:53Z

Smth like this works shadow-[0_35px_60px_-15px_rgba(0,0,0,0)] shadow-neutral-focus/30 but it's weird...

Another way is to use dark: prefix but daisyUI theming is using data attribute, I need to make sure we can use data attribute and prefix at the same time => then it might look like this shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)] dark:shadow-[0_35px_60px_-15px_rgba(256,256,256,0.3)]

DaisyUI also mentions some CSS variables in daisyUI themes, but I'm not sure how to make it work with shadow.

Actually shadow-[0_35px_60px_-15px] shadow-neutral-focus/30 is working as well, so maybe it's not that bad

timothyrusso · 2023-09-26T17:20:57Z

Smth like this works shadow-[0_35px_60px_-15px_rgba(0,0,0,0)] shadow-neutral-focus/30 but it's weird...

Another way is to use dark: prefix but daisyUI theming is using data attribute, I need to make sure we can use data attribute and prefix at the same time => then it might look like this shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)] dark:shadow-[0_35px_60px_-15px_rgba(256,256,256,0.3)]

DaisyUI also mentions some CSS variables in daisyUI themes, but I'm not sure how to make it work with shadow.

Actually shadow-[0_35px_60px_-15px] shadow-neutral-focus/30 is working as well, so maybe it's not that bad

Thanks @JaneMoroz!!! I'll push the modification, let's see if it is ok also for @Dan-Y-Ko

JaneMoroz · 2023-09-27T13:05:23Z

@timothyrusso Maybe opacity should be changed to 5% as Dan mentioned above => shadow-neutral-focus/5
I just don't know what is the initial color, so maybe I'm wrong. Is it 5% from neutral-focus or from black/white?

timothyrusso · 2023-09-27T13:06:21Z

@timothyrusso Maybe opacity should be changed to 5% as Dan mentioned above => shadow-neutral-focus/5 I just don't know what is the initial color, so maybe I'm wrong. Is it 5% from neutral-focus or from black/white?

@JaneMoroz I think from neutral-focus

…chingu-dashboard into feature/sidebar-shadow

Dan-Y-Ko

LGTM!

Good job :)

Feature/sidebar shadow

timothyrusso added 2 commits September 23, 2023 15:30

feat: add sidebar shadow

ec0ee1c

feat: fix prettier errors

e43a778

feat: use constants to define the colors

45c701d

vercel bot deployed to Preview September 23, 2023 13:51 View deployment

Merge remote-tracking branch 'origin' into feature/sidebar-shadow

59be2db

vercel bot deployed to Preview September 24, 2023 10:35 View deployment

Dan-Y-Ko requested changes Sep 25, 2023

View reviewed changes

src/app/globals.css Outdated Show resolved Hide resolved

timothyrusso requested a review from Dan-Y-Ko September 26, 2023 07:43

feat: fix shadow

8a41b29

vercel bot deployed to Preview September 26, 2023 17:20 View deployment

feat: prettier fix

d37e88a

vercel bot deployed to Preview September 26, 2023 17:24 View deployment

Merge branch 'dev' into feature/sidebar-shadow

b5491a5

vercel bot deployed to Preview September 27, 2023 06:08 View deployment

timothyrusso added 2 commits September 27, 2023 15:09

feat: fix opacity of the shadows color

267af95

Merge branch 'feature/sidebar-shadow' of https://github.com/chingu-x/…

7d0f4bd

…chingu-dashboard into feature/sidebar-shadow

vercel bot deployed to Preview September 27, 2023 13:12 View deployment

Dan-Y-Ko approved these changes Sep 27, 2023

View reviewed changes

Dan-Y-Ko merged commit 23d3eb1 into dev Sep 27, 2023
2 checks passed

Dan-Y-Ko deleted the feature/sidebar-shadow branch September 27, 2023 18:26

Dan-Y-Ko added a commit that referenced this pull request Jul 9, 2024

Merge pull request #29 from chingu-x/feature/sidebar-shadow

67b6589

Feature/sidebar shadow

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/sidebar shadow #29

Feature/sidebar shadow #29

timothyrusso commented Sep 23, 2023

vercel bot commented Sep 23, 2023 •

edited

Loading

timothyrusso commented Sep 23, 2023

Dan-Y-Ko commented Sep 24, 2023 •

edited

Loading

timothyrusso commented Sep 24, 2023 •

edited

Loading

JaneMoroz commented Sep 26, 2023

timothyrusso commented Sep 26, 2023 •

edited

Loading

JaneMoroz commented Sep 26, 2023

timothyrusso commented Sep 26, 2023

JaneMoroz commented Sep 26, 2023

JaneMoroz commented Sep 26, 2023 •

edited

Loading

timothyrusso commented Sep 26, 2023

JaneMoroz commented Sep 27, 2023

timothyrusso commented Sep 27, 2023

Dan-Y-Ko left a comment

Feature/sidebar shadow #29

Feature/sidebar shadow #29

Conversation

timothyrusso commented Sep 23, 2023

Description

Issue link

Type of change

How Has This Been Tested?

Checklist:

vercel bot commented Sep 23, 2023 • edited Loading

timothyrusso commented Sep 23, 2023

Dan-Y-Ko commented Sep 24, 2023 • edited Loading

timothyrusso commented Sep 24, 2023 • edited Loading

JaneMoroz commented Sep 26, 2023

timothyrusso commented Sep 26, 2023 • edited Loading

JaneMoroz commented Sep 26, 2023

timothyrusso commented Sep 26, 2023

JaneMoroz commented Sep 26, 2023

JaneMoroz commented Sep 26, 2023 • edited Loading

timothyrusso commented Sep 26, 2023

JaneMoroz commented Sep 27, 2023

timothyrusso commented Sep 27, 2023

Dan-Y-Ko left a comment

Choose a reason for hiding this comment

vercel bot commented Sep 23, 2023 •

edited

Loading

Dan-Y-Ko commented Sep 24, 2023 •

edited

Loading

timothyrusso commented Sep 24, 2023 •

edited

Loading

timothyrusso commented Sep 26, 2023 •

edited

Loading

JaneMoroz commented Sep 26, 2023 •

edited

Loading