Change toggle button to a button with different labels "Display as cards" / "Display as table"

[agbeltran]

Description:
Currently, it seems that the default label is "Toggle cards" which we agreed that is not the best phrasing. We agreed on changing it to a button whose label will change between "Displays as cards" and "Display as table".

Acceptance criteria:

• Change toggle button for cards/table view

[GoelBiju]

@agbeltran @louise-davies @sam-glendenning @MRichards99 I have changed the design of the toggle switch to be a button instead. This is what it looks like presently:

• "Display as tables":
  

• "Display as cards":
  

A few questions about the design might need to be discussed:

• The colour of the button?
• Does the button shape and look appropriate?
• Are the icons on the button appropriate?
• Where should the placement of the button be? (Should it remain in the same place as the toggle?)

[GoelBiju]

@agbeltran @louise-davies @sam-glendenning @MRichards99 I have changed the design of the toggle switch to be a button instead. This is what it looks like presently:

• "Display as tables":
  
• "Display as cards":
  

A few questions about the design might need to be discussed:

• The colour of the button?
• Does the button shape and look appropriate?
• Are the icons on the button appropriate?
• Where should the placement of the button be? (Should it remain in the same place as the toggle?)

Just continuing with this design for now and adding some small padding produces a view like this:

The other idea suggested by @louise-davies was to have the icon and the label separate. Possibly with the label to the left of a separate icon which you can click.

[sam-glendenning]

I've forgotten some of the suggestions from the last sprint review but was the length of the button/label an issue we raised? If so, could change the label to say "Card view" / "Table view"

Saying that I don't mind the look of the above screenshot! Worth presenting once again at the next sprint review for everyone's thoughts on the new design

[GoelBiju]

I've forgotten some of the suggestions from the last sprint review but was the length of the button/label an issue we raised? If so, could change the label to say "Card view" / "Table view"

Saying that I don't mind the look of the above screenshot! Worth presenting once again at the next sprint review for everyone's thoughts on the new design

That's a good idea, the length was one thing we mentioned. We could for something shorter like what you mentioned. I was initially thinking of changing the design but having it with the correct padding makes it look better now.

[louise-davies]

Ah yeah, I meant to illustate a mock up - my bad! I thought perhaps something like this: https://codesandbox.io/s/button-demo-3l8t4?file=/demo.js

[GoelBiju]

Ah yeah, I meant to illustate a mock up - my bad! I thought perhaps something like this: https://codesandbox.io/s/button-demo-3l8t4?file=/demo.js

Thanks @louise-davies for the example! I was looking as to how to center the IconButton with the text. We can maybe come to a decision as to which design in future meetings.