wip: design adjustments

[thymikee]

Followup to discussion in #20

[thymikee]

Let's move the discussion here.

For the apps using similar layout, I know one (wow, I don't really use too much apps :D) and it's 1password.

For now, I've left the centering as is, just removed the popup.

Sure, why not. I'm currently experimenting with styled-components so adding a dark/light theme support would be even simpler.

I like that you want to switch to css-in-js solution – it makes so much more sense in this case (I literally had problems on where is this particular thing styled/overwritten, maybe I got used to React Native way of styling too much, but no regrets).

Feel free to suggest any other UI or styling changes. I'm not a front-end developer 🙃

I'm far from being a UI expert or even a designer, though have a little background. I can just try fix stuff that bothers my personal common sense.

I'll also cc @kdzwinel on this one, because he might be interested.

[jsynowiec]

For the apps using similar layout, I know one (wow, I don't really use too much apps :D) and it's 1password.

But 1Password mini (the tray one) is a menu with lots of submenus. A bit different use case if you ask me.

You can find lots of apps in the App Store that use the NSPopover (it has an arrow, called "anchor") style, i.a.

• Dropzone,
• Battery Monitor
• Chargeberry
• Mini Calendar
• Noizio
• Fantastical (sadly, no longer available)
• itsyscal

I'm not saying no. It's just that I think this particular UI pattern (NSPopover-like) is more suited for Airqmon (displaying data instead of a list of rows~menu).
Do you have more arguments for this solution other than personal preference?

I like that you want to switch to css-in-js solution – it makes so much more sense in this case (I literally had problems on where is this particular thing styled/overwritten, maybe I got used to React Native way of styling too much, but no regrets).

I have a hard time switching to styled-components from BEM and css preprocessors 😎 But I'm determined to give it a try and Airqmon is a perfect playground.

[thymikee]

Oh, cool! I just wasn't aware of that. I have no objections to it now, will update the PR and let you know the results in a day or two

[jsynowiec]

When doing a restyle, please look at the apps I linked earlier and following examples of Popover:

• https://www.sketchappsources.com/free-source/2340-asana-widget-macos-sketch-freebie-resource.html
• https://freebiesupply.com/free-sketch-misc/caffeine-app-redesign-sketch-resource/
• https://reviewtimes.cocoanaut.com
• https://www.macupdate.com/app/mac/43064/calendarmenu

Looking at the screenshots, I think that maybe the anchor arrow should be a bit bigger? I think that the header can be safely removed. Also I'll be happy to test for a couple of days a version with grey/vibrant background and unified footer.

[kdzwinel]

Since I was summoned I'll share my two cents ;) IMO these changes are more UI than UX, so it's more an art than science - there are no right answers here. I really like the idea of consistency with macOS, but making these couple of changes (font, background, dropping popup) won't make it look 100% native. IMO it's a bit harder than that to match Apple's design (esp. that this UI isn't trivial) ;) On the other hand, it might be a good first step if @jsynowiec wants to ultimately have native-like experience. I personally don't mind current look - it's clean and it does the job.

[jsynowiec]

Updated font and adjusted font size/width.

It does look better 👍

[thymikee]

Awesome! Btw, should I close the PR?

[jsynowiec]

@thymikee I'm still waiting for your adjustments and contributions :) All are welcome.

Right now I'm focused on testing the Core Location, see #28. It's not working the way I expected.

[thymikee]

I'll close it (because I mostly like what we have now) and put something up later, when I find some time 🙂