Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

🎨 Suggest me aesthetic improvements 🎨 #119

Open
GyulyVGC opened this issue Mar 29, 2023 · 31 comments
Open

🎨 Suggest me aesthetic improvements 🎨 #119

GyulyVGC opened this issue Mar 29, 2023 · 31 comments
Labels
design Styling and appearance good first issue Good for newcomers help wanted Extra attention is needed

Comments

@GyulyVGC
Copy link
Owner

GyulyVGC commented Mar 29, 2023

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 ⬇️ ⬇️ ⬇️ ⬇️
@GyulyVGC GyulyVGC added enhancement New feature, request, or improvement design Styling and appearance labels Mar 29, 2023
@GyulyVGC GyulyVGC pinned this issue Mar 29, 2023
@GyulyVGC GyulyVGC changed the title 🖼️ Suggest me stylistic improvements 🖼️ 💅 Suggest me stylistic improvements 💅 Mar 29, 2023
@GyulyVGC GyulyVGC changed the title 💅 Suggest me stylistic improvements 💅 🎨 Suggest me aesthetic improvements 🎨 Mar 29, 2023
@GyulyVGC GyulyVGC added the help wanted Extra attention is needed label Apr 19, 2023
@GyulyVGC GyulyVGC added good first issue Good for newcomers and removed enhancement New feature, request, or improvement labels May 24, 2023
@Aloso
Copy link
Contributor

Aloso commented Jun 8, 2023

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
Copy link
Owner Author

GyulyVGC commented Jun 8, 2023

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

@GyulyVGC
Copy link
Owner Author

GyulyVGC commented Jun 8, 2023

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
Copy link
Contributor

Aloso commented Jun 8, 2023

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
Copy link
Contributor

Aloso commented Jun 8, 2023

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

sniffnet

sniffnet_better

  • 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
Copy link
Contributor

Aloso commented Jun 8, 2023

Suggestions about this part:

image

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

@GyulyVGC
Copy link
Owner Author

GyulyVGC commented Jun 9, 2023

@all-contributors please add @Aloso for ideas.

@allcontributors
Copy link
Contributor

@GyulyVGC

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

@sysms
Copy link

sysms commented Jul 1, 2023

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

@GyulyVGC
Copy link
Owner Author

GyulyVGC commented Jul 1, 2023

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
Copy link

sysms commented Jul 2, 2023

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
Copy link

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
Copy link
Owner Author

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 😄

Screenshot 2023-07-25 at 17 46 45

@Irene-123
Copy link

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

@GyulyVGC
Copy link
Owner Author

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

@zhangyangyiniao
Copy link

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
Copy link
Owner Author

GyulyVGC commented Oct 7, 2023

Hey @zhangyangyiniao

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

@zhangyangyiniao
Copy link

(1)The switch of bytes and packets in Data representation can be done using buttons, which I personally feel is more intuitive.
S1
(2)Add filter buttons for bytes and packets in Notifications.
S2
The above are my personal suggestions and I hope they can be helpful to you :)

@GyulyVGC
Copy link
Owner Author

GyulyVGC commented Oct 7, 2023

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
Copy link
Owner Author

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
Copy link
Owner Author

Suggestions about this part:

image

  • 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:
Screenshot 2023-12-21 at 10 30 39

@GyulyVGC
Copy link
Owner Author

(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.

Screenshot 2023-12-21 at 14 35 12

Screenshot 2023-12-21 at 17 09 46

Screenshot 2023-12-21 at 17 48 01

@lingfish
Copy link

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

@GyulyVGC
Copy link
Owner Author

GyulyVGC commented Jan 27, 2024

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
Copy link

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
Copy link
Owner Author

GyulyVGC commented Feb 15, 2024

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
Copy link

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

@GyulyVGC
Copy link
Owner Author

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


Before

After

@GyulyVGC
Copy link
Owner Author

GyulyVGC commented Mar 3, 2024

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.


Screenshot 2024-03-03 at 21 19 24

@Ladvace
Copy link

Ladvace commented Nov 19, 2024

this is more a functionality thing than an aesthetical one, but I would add a "pause" button in the overview tab, so you can pause it an give it a look at the traffic without getting other info

@GyulyVGC
Copy link
Owner Author

this is more a functionality thing than an aesthetical one, but I would add a "pause" button in the overview tab, so you can pause it an give it a look at the traffic without getting other info

@Ladvace thanks for the suggestion. Actually we're already tracking this request in #551.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
design Styling and appearance good first issue Good for newcomers help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

9 participants