changed the row hover visibility

[kartik912]

What type of PR is this? (Check all that apply)

• 🛠 Refactor
• ✨ Feature
• 🐛 Bug Fix
• ⚡ Optimization
• 📝 Documentation Update

Description

Enhanced the visual feedback for table row interactions by increasing the color intensity of hover and selected states.

File Modified

stylekitTheme.js

Code Added

Added MuiTableRow component styling to the theme configuration:

MuiTableRow: {
    styleOverrides: {
        root: {
            "&:hover": {
                backgroundColor: "rgba(0, 0, 0, 0.08)",
            },
            "&.Mui-selected": {
                backgroundColor: "rgba(245, 197, 197, 0.86)",
            },
            "&.Mui-selected:hover": {
                backgroundColor: "rgba(234, 140, 140, 0.8)",
            },
        },
    },
},

BEFORE

AFTER

Related Tickets & Documents

• Related to [✨ FEATURE] Improve table stylekit #2609

How to reproduce the issue

create a file table.py in the root directory and run this.

# table_test.py in root directory
import taipy.gui.builder as tgb
from taipy import Gui

data = {"a": [1, 2, 3, 4, 5], "b": [5, 4, 3, 2, 1]}

selected = [0]

def num_on_action(state, var_name, payload):
    index = payload.get("index")
    if index in state.selected:
        state.selected = list(set(state.selected) - {index})
    else:
        state.selected = state.selected + [index]

with tgb.Page() as page:
    tgb.toggle(theme=True)
    
    tgb.text("## Table Without Custom Classes")
    tgb.table("{data}", selected="{selected}", on_action=num_on_action)
    
    tgb.text("## Table With rows-similar rows-bordered")
    tgb.table("{data}", selected="{selected}", on_action=num_on_action, 
              class_name="rows-similar rows-bordered")

if __name__ == "__main__":
    gui = Gui(page=page)
    gui.run(port=5000, debug=True, use_reloader=True)

you can now select the row and hover over the unselected row, the difference is a lot more visible now.

Backporting

This change should be backported to:

• 3.0
• 3.1
• 4.0
• develop

Checklist

We encourage keeping the code coverage percentage at 80% or above.

• ✅ This solution meets the acceptance criteria of the related issue.
• 📝 The related issue checklist is completed.
• 🧪 This PR includes unit tests for the developed code.
  If not, explain why:
• 🔄 End-to-End tests have been added or updated.
  If not, explain why:
• 📚 The documentation has been updated, or a dedicated issue has been created.
  If not, explain why:
• 📌 The release notes have been updated.
  If not, explain why:

[kartik912]

@arcanaxion , i made the changed , please review it and tell me if you need me to make any more change or not