[Boards On-Premise] Improving Card Selection Highlights

After adding clipboard support, we received some feedback about how it wasn't very obvious which item in the board the mouse was hovering over. Below are some initial insights into how we might improve item highlighting. The images here may not reflect the actual changes that are added to Boards. 

Boards only shows a thin line around cards when hovered. It would be great if it were easier to see which card was selected.

boards custom hover outline standard.png

Today I've been experimenting with increasing the thickness of the lines around cards when they are hovered. I also had a look at adding the same outline on List titles when they are hovered since they can also be dragged, cut or copied. 

I noticed that these blue outlines don't really fit in with the color scheme of the Board when it is changed to a different theme.

boards custom hover outline red.png

With some additional CSS we can customise the outline colors to fit each theme. Here is how the red theme might look.

Below are the CSS rules added to make these changes if you'd like to try these out in your browser yourself. This can be done by adding some or all of these rules to your boards-custom.css file or temporarily by using the Chrome dev tools to add to the end of /kudosboards/wro/boards.css.

/* new outlines are made with box shadows to not affect the size of DOM elements */
/* new, larger card outline when hovering  */
.entryInfo.draggable:hover  {
    box-shadow: inset 0px 0px 0px 2px #00B0DA;
    border:0px;                      /* remove old outline (border) */
    padding:1px;                    /* padding to keep size the same as not-hovered */
}

/* prevent the drop shadow of pencil interfering with new card outline */
.entryInfo:hover .action-menu-icon {
    box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.95);
}

/* show line on list header when hovering. */
.sectionInfo.draggable:hover {
    box-shadow: inset 0px 0px 0px 2px #00B0DA;
}



/* show line on card when hovering, with different theme color */
.theme-scarlet .entryInfo.draggable:hover  {
    box-shadow: inset 0px 0px 0px 2px #cc3333;  
}

/* show line on list header when hovering, with different theme color */
.theme-scarlet .sectionInfo.draggable:hover {
    box-shadow: inset 0px 0px 0px 2px #e43636;
}

/*  theme color classes

.theme-default (blue on white)
.theme-scarlet (red)
.theme-umber (orange)
.theme-acid    (yellow)
.theme-mint (green)
.theme-teal (green/blue)
.theme-sky    (light blue/cyan)
.theme-royal (dark blue)
.theme-fuchsia (purple)
.theme-magenta (pink)
.theme-charcoal (grey)

*/