Better visual desing

[ai]

Out current UX is nice, but we need better visual design:

1. Better fonts
2. More modern controls

We could always try Material design, its visual langauge pretty nice and better then nothing (but custom visual design will be nicer).

With better visual design this tool will look more professional.

[andywer]

Did you get any feedback yet?

[Gaserd]

@andywer Yes, and i will change logo, because all dont understand what is this

[Gaserd]

@ai @andywer Maybe Gothic-Diablo style ?

[ai]

@Gaserd :D strage look.

[andywer]

@Gaserd Haha :'D

[Gaserd]

@ai @andywer I think we leave our current icon 👍 And in future we have make new icon for this plugin, because I dont have idea for icon

[andywer]

@Gaserd Seems fair. But can we make it monochrome? ;)

PS: We can collect ideas here: https://github.com/andywer/postcss-debug/issues/12

[Gaserd]

@andywer you could insert PostCSS logo in white color ?

[Gaserd]

@ai @andywer added small fix in mobile UI

[ai]

@Gaserd it is hard to understand that click on file block change plugin list. They looks like similar links. People will ask: “why nothing changed after I clicked on file block”

[Gaserd]

@ai Okay.

[andywer]

@Gaserd You are doing great work here! I wasn't sure if anyone really uses a debugging utility on their phone, but... It will be pretty cool for demoing!

We should put the inspector with some sample code in gh-pages so people can try it out without installing it and it will even be usable when they try it on their iPhone :)

[Gaserd]

@andywer Thanks and you are right!

[Gaserd]

@andywer are you life ?

[andywer]

@Gaserd Hey! Sorry for the delay. On one hand I have have been very busy the past days, on the other hand I guess I planned too much for the next release.

Here is the current roadmap:

1. Come up with postcss-debug webpack plugin (https://github.com/andywer/postcss-debug/issues/11)
2. Use webpack for the inspector
3. Use CSS modules and refactor styles (they have become really messy already)
4. Use stylelint
5. Put a sample installation on gh-pages

I should probably cut it down in favor of releasing soon.

[Gaserd]

@andywer Awesome! I can you help ?

[andywer]

@Gaserd I wish I could share some work on this, but I think this kind of refactoring requires too much insight into the code.

[Gaserd]

@andywer okay :)

[andywer]

@Gaserd I just recognized we still need a solution to prevent accidentally clicking the plugin documentation link when you want to expand a snapshot. This happens to me permanently when using the latest (not yet released) UI.

[Gaserd]

@andywer https://github.com/andywer/postcss-debug/compare/a4d140e2f0...44980a1d2b#diff-66d5b211acafc61a9b202fc438dc503eR46 see it. Delete "ы"

[Gaserd]

@andywer are you live ? :)

[andywer]

Hey @Gaserd. Yes, I am, but I was on holidays last week ;)

There are currently still two issues left:

• Usability: Plugin help link will now often be accidentally clicked (https://github.com/andywer/postcss-debug/pull/10#issuecomment-227008044)
• Styles: The CSS files have grown wild and are pretty much unmaintainable now. Not sure how to solve this without re-writing the stylesheets completely... :-/

Sorry for the long delay!

[Gaserd]

@andywer Ow! Maybe I help you with CSS yet you write nice core code ? Push (commit) master branch and go write nice code :)

[andywer]

@Gaserd Not sure if I got you right... Do you mean you can clean up the CSS? The problem is that I want to fix stuff before merging to master, since the master branch should always remain "clean(ish)".

And... we still have to come up with a solution for

Usability: Plugin help link will now often be accidentally clicked (#10 (comment))

Because that will annoy users a lot, I think.

[Gaserd]

@andywer Yeah, I sure can clean CSS. I think about this problem:

Plugin help link will now often be accidentally clicked (#10 (comment))

I start today clean CSS in develop branch.

[Gaserd]

@ai @andywer

Plugin help link will now often be accidentally clicked (#10 (comment))

I think we can make so

[ai]

Looks good 😊

[andywer]

@Gaserd Yeah, I like it to :)

[Gaserd]

@ai @andywer Yeah! Congrats!

[andywer]

Just published version 0.4.0 with the updated UI. Will close this issue ☀️

[andywer]

Thanks @Gaserd!