Provide a clearer visual distinction between edit mode and select mode

[seancolsen]

Current behavior

1. Find a cell with a value set to an empty string.
2. Toggle between edit mode and select mode by alternately double clicking and pressing Esc.
3. Observe the presence of a cursor to change -- good.
4. Observe the border thickness to change -- good.
5. Observe no other changes.

Goal

• I'd like it to be a bit clearer which mode I'm in.

Desired behavior

• Add a drop shadow behind the cell. Google sheets does this and I think it looks pretty good.
• Change the border color too. I propose blue during select and black during edit. I don't feel too strongly about the specifics here -- just looking for some extra cue.

Other thoughts

• Spreadsheet software places a square in the bottom right hand corner of the selection region. This square disappears when entering edit mode, providing an additional cue to the mode change. I predict we likely will not want to add the square because we won't want to implement the "fill" functionality for which spreadsheets use the square. As such I think it would be useful to provide an extra visual cue to our users indicating the current mode, which is why I'm suggesting the additional switch to a black border.

[pavish]

I'll defer to @ghislaineguerin to comment on this before we pick up the frontend changes for it.

[ghislaineguerin]

@pavish @seancolsen
I think this looks good. I particularly like the idea of having the drop-shadow. Additionally, we should also consider how we represent a cell that might not be editable. Border color makes sense to me and I agree with not having the square.

[seancolsen]

Thanks @ghislaineguerin I'm marking this as ready now

[pavish]

We use a gray border when the cell is non-editable. So, I'm concerned about using a black border while editing the cell. Anyone who works on this issue should feel free to experiment.

[nk183]

hi @seancolsen @kgodey can I work on this

[silentninja]

Thanks! @nk183 I have assigned the issue to you.

[nk183]

Hi @silentninja @pavish @seancolsen
i was thinking if in edit mode color may be light red i guess ( as of color of Mathesar icon but may be more light )

simplescreenrecorder-2022-03-25_17.13.32.mp4

or should I stick with black
Do you think user might think of is as error

[seancolsen]

Red looks a little bit too much like an error I think.

[pavish]

@nk183 The red border seems to me like the cell has an error. I personally think retaining the blue border is better since the width changes, and we could probably only have a drop shadow additionally.

This issue involves experimenting with different styles (border colors, dropshadows etc.,) and referring similar products. Please post a list of suggestions that you feel are good so that the team can take a look before deciding on the final look.

[nk183]

hi @seancolsen @pavish I am suggesting some designs :
a)
select mode - no change
edit mode - border change

b)
select mode - no change
edit mode - border change && background-color : blue

c)
select mode - background-color : blue
edit mode - border change

simplescreenrecorder-2022-03-27_11.35.03.mp4

[pavish]

@ghislaineguerin You may want to take a look at this as well.

[seancolsen]

@nk183 For reference, here is how Google Sheets behaves:

Your screenshots above appear to be using a blue drop shadow, which looks more like a glowing effect. I'd like for the drop shadow to behave similarly to Google Sheets. It's subtle, but present. And it has no saturation. It's translucent black, nearly transparent.

Adding the drop shadow as I've described might actually be sufficient. Can we begin with a PR that just does that?

[kgodey]

@nk183 Is there more work to do for this issue?

[seancolsen]

Ahh I meant to close this when I merged the PR. Thanks for the ping @kgodey