Make Toolbar components more compact

[rohanpurohit]

This PR includes:

• Remove Dashboard back button on other screens.
• Change Start/Pause Ventilation Button label to Start/Pause
• Change Modes DropDown button label for HFNC
• Reduce width of Modes DropDown button
• Reduce width of Mute Button and Events Log Button
• Shorten few relatively wordy alarm labels
• added some whitespace between mode and mute button, alarms and events log button and start button and clock and battery

[ethanjli]

Everything generally seems to work in basic testing. Observations from testing:

• Sometimes I see the Start/Pause button briefly flash the text "Start Ventilation", when the screen is changing (e.g. from quickstart to dashboard). Perhaps there are some other places where the "Start Ventilation" text needs to be replaced - maybe there's a default value for a prop which still is "Start Ventilation"?
• Now that we've freed up some space in the topbar, we can put a bit more whitespace between the buttons (to establish some visual grouping as well as to give the buttons some more "room to breathe" and to reduce the risk of the user trying to tap one button but accidentally tapping another button because it's close), and we can also increase the fixed width of the alarm button. Perhaps you could first revert the changes you made to decrease margins, and then you can see how much more whitespace it would look good to add between each button, and also between sections of the topbar (the left section for sidebar and mode selection, the middle section for alarms and events, and the right section for battery/clock/ventilation toggle).
• Currently it looks like the alarm button does not have a fixed width, which is the only remaining item needed to complete #387. I assume this will be saved for a future PR?
• I noticed that the visual design of the alarm countdown has changed so that the alarm countdown is now a nested box inside the button which has the alarm description text (which I'll call the "alarm button"). One side-effect of this is that now the alarm button is now taller than the other buttons. I think we should revert back to the previous visual design. Once we have a fixed width alarm button, maybe what we could do is set a fixed width for the alarm countdown display; and when that's active we'll just subtract that value from the fixed width for the alarm button? That way the total width is the same whether or not alarms are muted.

[rohanpurohit]

Everything generally seems to work in basic testing. Observations from testing:

• Sometimes I see the Start/Pause button briefly flash the text "Start Ventilation", when the screen is changing (e.g. from quickstart to dashboard). Perhaps there are some other places where the "Start Ventilation" text needs to be replaced - maybe there's a default value for a prop which still is "Start Ventilation"?

Fixed this.

• Now that we've freed up some space in the topbar, we can put a bit more whitespace between the buttons (to establish some visual grouping as well as to give the buttons some more "room to breathe" and to reduce the risk of the user trying to tap one button but accidentally tapping another button because it's close), and we can also increase the fixed width of the alarm button. Perhaps you could first revert the changes you made to decrease margins, and then you can see how much more whitespace it would look good to add between each button, and also between sections of the topbar (the left section for sidebar and mode selection, the middle section for alarms and events, and the right section for battery/clock/ventilation toggle).

I have added some margin for the buttons on the left side, also on the right side, let me know if this is good!

• I noticed that the visual design of the alarm countdown has changed so that the alarm countdown is now a nested box inside the button which has the alarm description text (which I'll call the "alarm button"). One side-effect of this is that now the alarm button is now taller than the other buttons. I think we should revert back to the previous visual design. Once we have a fixed width alarm button, maybe what we could do is set a fixed width for the alarm countdown display; and when that's active we'll just subtract that value from the fixed width for the alarm button? That way the total width is the same whether or not alarms are muted.

reverted to old implementation.

[rohanpurohit]

1. This project is licensed under Apache License v2.0 for any software, and Solderpad Hardware License v2.1 for any hardware - do you agree that your contributions to this project will be under these licenses, too? Yes.
2. Were any of these contributions also part of work you did for an employer or a client? No.
3. Does this work include, or is it based on, any third-party work which you did not create? No.