Update scaffold css files to add bg to odd rows and border to segment

[ccnklc]

Fix for #5116

Changes:

• Moved the background-color from "tr" to "td", it is a better practice to not give bg to "tr"
• Removed unnecessary bg colors
• Add border to .rw-segment

Suggestion:

I have checked the css and tailwind files, it looks like all the colors are different from one another and I believe using tailwind or not shouldn't effect the basic styling for scaffolded components, maybe it would be a good idea to align these colours.

For comparison here are the screenshots:
Tailwind before:

Tailwind after:

Css before:

Css after:

[netlify]

✅ Deploy Preview for redwoodjs-docs canceled.

Name	Link
🔨 Latest commit	1c0e350
🔍 Latest deploy log	https://app.netlify.com/sites/redwoodjs-docs/deploys/6263114d343e8b0008124537

[Tobbe]

@ccnklc Thank you so much, this is great! It's getting too late for me to give this a proper review right now. I'll try to get to it tomorrow.

Moved the background-color from "tr" to "td", it is a better practice to not give bg to "tr"

This is one of the best things about working with open-source software. Someone just shows up and teaches me new things 👍 Do you have more info about this best practice?

I have checked the css and tailwind files, it looks like all the colors are different from one another and I believe using tailwind or not shouldn't effect the basic styling for scaffolded components, maybe it would be a good idea to align these colours.

100% personal preference, but I think I prefer the CSS colors. But it would be easier to keep the TW colors and change the CSS ones, right? What's your suggestion here?

[ccnklc]

Do you have more info about this best practice?

I believe it is mostly about the shift of mindset rather than any particular end result, however when I am working with tables, I always try to imagine them as individuals cells rather than just intersections of columns and rows. It just helps me to think a little bit more out of the box about the things I can do.

100% personal preference, but I think I prefer the CSS colors. But it would be easier to keep the TW colors and change the CSS ones, right? What's your suggestion here?

I prefer not to use default colors in any project (this is a nice colour palette collection I always checkout before picking some colors ).

I would personally define Redwood colors from scratch and store it in tailwind config

{
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    },
  },
}

and for css we could use variables to create a similar theme

:root {
  --bg-midnight: #121063;
}
element {
  background-color: var(--bg-midnight);
}

[ccnklc]

Also while running tests I faced with some errors on terminal logs, It might be a good idea to check it out.

[Tobbe]

Hi @ccnklc, thanks for your replies.

I prefer not to use default colors in any project

Working at a company or with a client this makes a ton of sense. Colors are an integral part of most business identity. For RW we want to stick with the TW defaults in our generators. Both because we know they're carefully curated by the TW team, but also for your reason about not wanting to use default colors - we anticipate that most developers will want to change what the generators look like anyway. So we just want good-enough looking defaults that are easily changed.

So maybe just, if you want, define some CSS variables that matches the TW colors we're using 🎨

[cannikin]

I believe I copied the colors from Tailwind when I created the scaffold styles, but that was Tailwind 2.0. When they went to 3.0 they changed the color palette slightly and then they didn't match up any more. I agree we should use the Tailwind colors as they know what they're doing!

I used to style <td>s directly (because styling a <tr> was basically unsupported in browsers, only a couple things like font worked), but then at some point in the last 10 years it seemed like styling a <tr> was suddenly supported so I switched over! Fewer classes to add! But yeah if you do something with like flexbox and turn a table-cell into something else then styling the <tr> may not behave the way you expect.

[ccnklc]

I used to style s directly (because styling a was basically unsupported in browsers, only a couple things like font worked)

This could be the reasoning behind my action without knowing, I forgot it but probably when I was young I had the same issue 😆

For RW we want to stick with the TW defaults in our generators.

I understand why you might want to do this, If the idea is focus on building your startup not fighting for your framework, personally, as someone with a design background, I would like my basic app to have modern layout with nice colour palette, maybe even utilising with redwood-ui-library ( I know it doesn't exist but it would be nice to have one that is fully compatible with forms and stuff), then if I want to delete everything and change colors or my breakpoints, I can always do that. Deleting is a lot easier than building it.

I think it would make a huge difference in terms of satisfaction to run create a redwood app for the first time and everything amazes you including the default styles of your new shiny app.

Do we need it? Definitely not.
But if redwood came with a nice design system when I first tried it would i like it more? Hell yeah!

[ccnklc]

So maybe just, if you want, define some CSS variables that matches the TW colors we're using

@Tobbe Here is a pr that extends from this branch for copying tailwind 3 colors into css variables.

I am not sure If what I did would nicely copy the colors.css file I have created into the new apps, also I didn't update snapshots and web project in fixtures yet. Just want to get an idea about if I am moving in to the right direction or do you have a better idea about organising these colors in redwood.

I have no clue how to handle file creations and deletions in redwood yet, I will need some help to learn more about how we manage these generated files.

[Tobbe]

Something's a bit weird with the styling of the bottom part of the table in my browser

Exaggerating the radius on .rw-segment I get this

Those screenshots are from the linked gitpod project (https://gitpod.io/#https://github.com/redwoodjs/redwood/pull/5136)

EDIT:

Making the page much narrower we can see it's the scrollbar that's messing things up

[Tobbe]

Have a fix developed in gitpod

EDIT:
Pushed a rough wip fix. Still need to clean it up.

Firefox isn't quite as customizable here. This is as good as I can get it (which is still an improvement imo)

[Tobbe]

@Tobbe Here is a pr that extends from this branch for copying tailwind 3 colors into css variables.

Thanks @ccnklc! That was a great idea splitting that out into its own issue/PR.

I'm sorry I got a little bit carried away looking into the scrollbar issue and pushed a bunch of code to your PR 🙈 Please take a look at what I did to make sure you're still ok with having your name on this PR 😬 All tests pass now, so if I can get a ✅ from you I'll merge this.

[ccnklc]

I think it would be ideal to change this and all instances on other styling files to
.rw-table tbody tr:nth-child(odd) td, .rw-table tbody tr:nth-child(odd) th { }

This one creates issues with the ths having different background on edit pages as you can see below:

[ccnklc]

@Tobbe
Just found another issue, I am not sure what was the intended design but I feel like it would be better to change the backgrounds of ths in tbody, what do you say?

Other than this issuem it looks good to me. ✅

[Tobbe]

I agree. That doesn't look good. Is it only a problem for the pure css styles, or for TW too?

I'm also not entirely sure what the intended design is/was. I'll do a little digging.

[Tobbe]

This is what it's supposed to look like

[ccnklc]

@Tobbe I have updated branch in my forked repo however I am not sure how to push those changes to this pr to be honest.

[Tobbe]

@ccnklc You figured it out, right? This is the commit you wanted? "color th s in tbody as well"