Design/refinements 2

[kocsmy]

There are a couple of design improvements in this PR:

Tables:

• headers are now Title Case instead of UPPERCASE
• numerous padding and margin improvements
• adjusted table header colors

Query screen:

• Rearranged query editor control buttons: Execute query moved to the right, Fork moved under ...
• Show/Hide Source button now is better connected to its area
• Query editor auto-suggest dropdown now highlights nicer (than the previous bulky dropshadow)
• Numerous spacing fixes so it feels more consistent across the product

STYLING-README:

• Added a basic styling readme for contributors so we can try to be a bit more consistent and write better quality code (and avoid inline css) - will add more details to this

General styling:

• Bug fix: fullscreen not hiding navigation now hides navigation again
• Now, we're using system-fonts as default and Roboto has been removed: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
• Pagination is now rectangular instead of circular to better align with our styling direction
• Public Dashboards are now navigation free for better data consuming experience. Powered by Redash also added to the footer.
• Edit Layout now disables Query Headers to link to its query page and replaced with cursor: move to indicate that you can move the widgets in edit mode.
• Line height fixes so longer dashboard and query names will look better when they break to multiline.

[kocsmy]

Query Before:

Query After:

[arikfr]

1. Looks a bit strange that the ... button is in the middle, no?
2. The "Data Source" label got truncated to "Data", not sure if it's intentional. Maybe the icon is enough?
3. "headers are now Title Case instead of UPPERCASE" -> we can skip this (apply on transformation).
4. How does the results page look like?

[kocsmy]

1. I don't think it's strange (especially because the Execute button is more prominent and btn-primary).
2. Yes, I made it shorter but we can even use the icon only.
3. Ok.
4. Which one is the result page?

[kyoshidajp]

@kocsmy An error Error: could not determine PostgreSQL version from '10.0' in CircleCI has already fixed on master branch by #2111. If you rebase master, then the error would not be reproduced ☀️

[kocsmy]

Further improvements added, see screenshots: