🎨 Suggest me aesthetic improvements 🎨

[GyulyVGC]

I'm considering to improve styles with the goal to create a more modern and minimal UI.

Recently I've made some improvements here and there, but I think that in order to improve the app design to a greater extent it's useful if you could share your opinions with me.

Here you can see some of the changes I made:

What has changed?	Before	After	Released in
Containers borders and color			v1.1.3
Scrollbars			v1.1.3
Adapter selection boxes			v1.1.4
Volume slider			v1.1.4
Page tabs, scrollbars, highlighted headings			v1.2.2
Traffic chart smoother interpolation			v1.3.0
...and many other details! Read the discussion below to find out more ⬇️	⬇️	⬇️	⬇️

[Aloso]

Suggestions for the settings dialog (before/after):

• Close button
  • Consistent distance to the top and to the right (status: 🚫)
  • Use the multiplication sign rather than an X (status: ✅)
  • Don't put it in a black circle (status: 🚫)
• Volume slider
  • Remove the black dot (status: ✅)
• Check boxes
  • Remove the rounded boxes (status: 🚫)
  • Don't make the text orange on hover, it's irritating (status: ✅)

[GyulyVGC]

Thank you very much for the suggestions, they will be kept into account 👍

[GyulyVGC]

Suggestions for the settings dialog (before/after)

I'm curious about two more things and want to hear your feedback:

• would you remove the text color change on hover also from the radio buttons?
• would you also remove the round boxes when the respective notification is active?

[Aloso]

would you remove the text color change on hover also from the radio buttons?

Yes.

would you also remove the round boxes when the respective notification is active?

This is something I didn't consider. I would either remove the boxes (both in the active and inactive state) or keep them. I think I'd prefer to keep the boxes.

[Aloso]

Some suggestions for the "overview" (before/after):

• Remove boxes, use dark gray lines instead (status: 🚫)
• Areas always use all available space when the window is maximized (status: 🚫)
• Buttons at the top don't have a black background (status: 🚫)
• The legend in the traffic diagram has a dark, semi-transparent background instead of a border (status: ✅)
• The house icon for "localhost" is white in the dark theme (status: ✅)
• Icons at the bottom (like the GitHub logo) are monochrome (status: 🚫)
• The exclamation mark at the bottom left should be in only one shape (a circle or a triangle, but not both) (status: ✅)

[Aloso]

Suggestions about this part:

• Make the star itself yellow and filled out (in light themes it can have a slightly darker outline)
• Make the black icons white

[GyulyVGC]

@all-contributors please add @Aloso for ideas.

[allcontributors]

@GyulyVGC

I've put up a pull request to add @Aloso! 🎉

[sysms]

Suggestion: make the font & size user selectable. :)

[GyulyVGC]

Suggestion: make the font & size user selectable. :)

Thanks for the suggestion, however the library I use for the GUI doesn't support yet font fallback (soon it will).
For what concerns font size, what do you think about making available a selection between some alternatives (eg small, medium, large..)?
A different font size means different dimensions for some widgets, so having a limited set of choices would make the implementation more manageable.

[sysms]

what do you think about making available a selection between some alternatives (eg small, medium, large..)?

I think this would be a great idea and a good compromise!
Thanks for evaluating this.

[Quicksilver151]

try coloring the text in some parts. headings in a bright color, properties in another color and values in white. and maybe units like kb and mb in different colors

also yes i really need different scales of the ui. i cant use it without allocating a full maximized screen for it and id like to see a change there

[GyulyVGC]

try coloring the text in some parts. headings in a bright color, properties in another color and values in white.

Thanks for the feedback @Quicksilver151
I've done some of the text-colouring modifications you suggested and I'd like to know what you think about them 😄

[Irene-123]

Hii I'm looking to contribute here, are these enhancements still up or completed? wanna help :)

[GyulyVGC]

Hi @Irene-123
I'm still up to new suggestions.
Feel free to exchange your thoughts with me about possible enhancements 😄

[zhangyangyiniao]

Hello, I am very happy to provide some small suggestions for the beautification of this project,are these enhancements still up?This is my first time making some small contributions to this community, and I hope I haven't bother you :)

[GyulyVGC]

Hey @zhangyangyiniao

Don't worry, your suggestions/contributions are welcome!

[zhangyangyiniao]

(1)The switch of bytes and packets in Data representation can be done using buttons, which I personally feel is more intuitive.

(2)Add filter buttons for bytes and packets in Notifications.

The above are my personal suggestions and I hope they can be helpful to you :)

[GyulyVGC]

Thanks for sharing your ideas! 😄
I can definitely consider 1), while I think 2) couldn't be necessary since you can already enable or disable a specific notification type from the settings

[GyulyVGC]

Suggestion: make the font & size user selectable. :)

...

also yes i really need different scales of the ui. i cant use it without allocating a full maximized screen for it and id like to see a change there

Hey @sysms @Quicksilver151 your suggestions have been kept into account and now the application settings include the possibility to set a custom zoom level: this impacts all the widgets, including text.
This feature has been merged to the main branch as part of #365 and will be officially released in version 1.3.

[GyulyVGC]

Suggestions about this part:

• Make the black icons white

I've finally implemented this suggestion in 223352e.

Now the SVGs not related to country flags have the same color as the body text.

This is how it looks like:

[GyulyVGC]

(1)The switch of bytes and packets in Data representation can be done using buttons, which I personally feel is more intuitive.

@zhangyangyiniao following you suggestion, I decided to apply your idea to all the radio buttons of the application.
So in practice I've totally removed radio buttons, replacing them with more modern-looking buttons.
Below you can see screenshots of how different parts of the app now appear.

[lingfish]

Hi, like I suggest to most network tools... the ability to display in bits/second.

[GyulyVGC]

Hi @lingfish,
thanks for the suggestion.

Since this is not directly related to aesthetics, it may be a good idea to open a separate issue.
By doing so, you can also express which in your opinion are the benefits with respect to the current representation.

[PrethamMuthappa]

is it possible to create blur effect? if so making the containers and boxes into macOS kind of blur/glass effects would be cool assuming ICED has that feature

[GyulyVGC]

is it possible to create blur effect? if so making the containers and boxes into macOS kind of blur/glass effects would be cool assuming ICED has that feature

It's one of the improvements I have in mind as well, but the PR featuring blur capability is not merged in Iced yet.

It'd be really cool to have a semi-transparent, blurred background and I'll definitely give it a try once available.
More specifically, I think it could be a nice idea to introduce in Sniffnet's settings a checkbox to make the current theme optionally have a glass effect.

Let me know if you have other ideas, but what I was considering is the whole background like this @PrethamMuthappa

[PrethamMuthappa]

@GyulyVGC yeah i agree with the sniffnet's settings for theme gives users options to choose , all the best :)

[GyulyVGC]

A new exciting aesthetic improvement is being introduced with #461.
Feel free to let me know what you think about it!

---

Before

After

[GyulyVGC]

I’m planning to change Sniffnet’s logo and wanted to gather some feedback.

Here are two different candidate icons I’ve realised, and I’ll pick the one that gets more appreciation.

Comment on #464 which of the two you prefer and feel free to let me know what you'd improve.

---