Feature/sidebar shadow

[timothyrusso]

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]

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]

@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]

@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]

@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.

[JaneMoroz]

What about creating a custom shadow in tailwind config?

[timothyrusso]

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]

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

[timothyrusso]

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

@JaneMoroz yes this is the request

[JaneMoroz]

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]

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]

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]

@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]

@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

[Dan-Y-Ko]

LGTM!

Good job :)