UI/UX styling improvements

[lukashornych]

Our GD prepared some graphics changes (colors, icons, styling) that would match our evitaDB docs. portal and would look nicer. We need to incorporate those changes into our codebase.

Ideally, we want most of the changes to done globally by defining custom theme in src/plugins/vuetify.ts (docs) and overriding default props for Vuetify components. Other options are to override global CSS in src/styles/settings.scss or change styling directly in the custom components, but this should be used sparingly.

Currently used icons: https://pictogrammers.com/library/mdi/

To-Do

• [x] create new Vuetify theme based on the prepared design
• [x] modify icons based on the prepared design (consider changing icon font?)
• [x] change CodeMirror theme to match the evitaDB docs if possible (some themes are at https://thememirror.net/)
• [x] some custom components needs to be modified based on the prepared design
• [x] change evitaLab icon to new one in README.md, .idea, favicon, and so on
• [x] create new print screen from demo on our README.md with new design (@lukashornych)

[MiroslavAlt]

@lho - I have prepared styles/features acordingly. Have a look.

[lukashornych]

@MiroslavAlt It's awesome :heart_eyes: it's very pleasant to use. Good job :+1: Just a few small things I found, nothing major + some things we talked about already:

Most likely bugs

• [x] i see updated logo only on welcome page, not in favicon, top left button and so on (@lukashornych)
• [x] text inputs has weird light corners
• [x] trailing text input buttons has incorrect background color
• [x] in grid the filter and order inputs has corners with incorrect background color and entire inputs display dotted border on click
• [x] wouldn't it be better if the nav items (currently only Connections explorer) don't have the blue circle when not selected? I would imagine that if we have more nav items and all have circles, it would be confusing for users to distinguish which one is selected
• [x] in system GraphQL, schema viewer of catalog schema and error viewer, the breadcrums in toolbar doesn't match coloring of other toolbars, i would image that if there is only one item, it would be blue
• [x] toolbar buttons in grid doesn't have same on hover effect, the left one has gradient and the other ones has default circle, personally i would not use the gradient, I think its to much on the blue background, but I know it's based on the GD
  • also all buttons used in toolbar in other tabs use the old circular on hover effect as well
  • [x] main tabs don't have any on hover effect anymore
  • [x] buttons in toolbar don't have any on hover effect anymore
  • [x] grid column headers can be clicked even when they aren't sortable, that's on me @lukashornych
  • [x] borders in grid have different color than e.g. in LabExplorer, seems to me that the custom borders in grid around cells have color from original theme
  • [x] i know you fixed it but did you push the changes? Cannot see them pushed version.
• [x] grid column headers seem to have no background
  • this seems to be broken by the --v-theme-surface: red!important; in the settings.scss, why it's there?
• [x] side tab panels doesn't seem to have any on hover effect and blue on select color (can be seen in evitaQL or GraphQL console)
• [x] dialog windows doesn't seem to have proper dark blue color and context menus also not anymore, even though it seems to be correctly defined, can you verify?
• [x] the list items used in grid property selector seems to have different corner styling than in expansion panels in schema viewers
• [x] evitaQL console has incorrect side tabs background color
• [x] we will need to style all buttons globally, not just the Add connection, so that outlined are correct and plain have on hover as well
• [x] welcome screen links are not centered. After some digging, I've found that there are duplicate CSS classes for the links.
• [x] dialog windows now have weird corners

Nice to have

• [ ] analyze if it's possible to have resizable Connections Explorer
• [x] i would open the blog post in new tab
• [x] could we make text select background color in codemirror more visible? (@lukashornych)
• [x] could we make the AWESOME bubble animation so that the bubbles lose opacity overtime so it flickers less?
• [x] looking at the GD, there is nice blue circular glow from the bottom, would it be too difficult to implement it? Or at least have it on the welcome page?
• [x] make the welcome screen blog posts look the same as blog posts on evitaDB web

[lukashornych]

@MiroslavAlt FYI: When trying to solve issues with the green almost non-visible codemirror code selection and autocomplete popup, I've discovered that we tried to use two different codemirror themes simultanously :smile: They were somehow rewriting each other and the used token coloring wasn't even from the used dracula theme. After fixing this, I've discovered that the thememirror's dracula theme is not quite working, there for still problem with the token selection. So I've found different version https://github.com/dennis84/codemirror-themes which seems to work quite good, the selection is cleary visible and the autocomplete too.

Also, I've notice that on the evitaDB web although the theme for prism is called in dracula in our code, really it's the default vsDark which is not similar to dracula nor the Visual Studio One Dark. I wanted to use this theme in lab as well, but it seems that it's Prism-specific. We should discuss it more.

[lukashornych]

@MiroslavAlt I've made couple fixed/changes, please look at the changes so you know what's been done. Also, I've corrected the variants on VChips as we've talked about, i.e. plain for non-clickable and outline for actionable.

[lukashornych]

@MiroslavAlt I've implemented the RSS feed fetcher. Only problem is CORS headers on the RSS feed endpoint, so I've prepared MR for the evitaDB web, please look at it when you have time.

[lukashornych]

@MiroslavAlt FYI I've merged the reworked grid cell detail window from #8 to this branch, so that we could review its UI/UX. Some fixes needed to be done, but now it seems quite ok to me,

[lukashornych]

@MiroslavAlt I've changed toast notification coloring according to alert/notes on evitaDB web. Is it okay with you? I had to improvise little bit, because on the evitaDB web the background color is transparent so it blends with the background which I didn't want because there may be values underneath, but overall we use same background as on the evitaDB web so it should match.

EDIT: since than, I've managed to fix the icons to outline versions to match.

[MiroslavAlt]

@MiroslavAlt I've implemented the RSS feed fetcher. Only problem is CORS headers on the RSS feed endpoint, so I've prepared MR for the evitaDB web, please look at it when you have time.

Merged!

[MiroslavAlt]

@MiroslavAlt I've changed toast notification coloring according to alert/notes on evitaDB web. Is it okay with you? I had to improvise little bit, because on the evitaDB web the background color is transparent so it blends with the background which I didn't want because there may be values underneath, but overall we use same background as on the evitaDB web so it should match.

EDIT: since than, I've managed to fix the icons to outline versions to match.

Brilliant, thank you!

[lukashornych]

• [x] this over effect and active blue color is not working in firefox
• [x] will we keep this rectangular change for standard buttons ?
• [x] padding in this dialog window seems to be unique only for this window
• [x] plain chips should be clickable/hoverable
• [x] shouldn't this background color be used only for codeblocks and base background color for other markdown text be blue like in docs? Also the codeblock may be placed inside longer text (some website post?) so it should be in its own box
• we still have weird corners on dialog

[lukashornych]

• [x] To me: try to render HTML in cell detail.

[lukashornych]

FYI: After some thinking, I want to release this as 1.0.0 so there cannot be any alpha working on welcome screen, and (breaking) commit must exist. Also, I need to aggregate all important changes and new feature for the release summary.

Maybe we could wait for https://github.com/lukashornych/evitalab/issues/52 and representative attributes?

[MiroslavAlt]

FYI: After some thinking, I want to release this as 1.0.0 so there cannot be any alpha working on welcome screen, and (breaking) commit must exist. Also, I need to aggregate all important changes and new feature for the release summary.

Maybe we could wait for #52 and representative attributes?

@lukashornych I've made changes as discussed here and on out meetings.