Mix of UI styles

[Jak2k]

Is there an existing issue for this?

• I have searched the existing issues and did not find anything similar.

Bug Description

The mix of UI styles makes the app difficult to use and gives it a low-quality appearance.

Operating System

Linux

OS Version

Fedora 43

App Version

0.1.6

RClone Version

No response

Steps to Reproduce

1. RClone Manager

Expected Behavior

The UI uses Adwaita design consistently.

Relevant Logs

Screenshots/Recordings

No response

Additional Context

No response

[Hakanbaban53]

Thanks for this feedback.

The app is built on web technologies, and I'm trying to make it look and feel like a native Adwaita application. My goal is to match the simple, basic usability of other Adwaita apps, but I admit I sometimes get carried away and "overdose" the design.

This is very helpful feedback, and I appreciate you reporting it. I'll work on simplifying this.

[Hakanbaban53]

It’s been a long development road, but v0.2.0 is finally here, @Jak2k!
I’ve overhauled the UI with a focus on a cleaner experience, specifically by removing unnecessary hover effects and significantly refining the Dark Mode. I’ve also updated the modal behaviors (they now adapt to bottom sheets on mobile!) to make the app feel more native.
I’d love to hear your thoughts on the new look and feel!

[Jak2k]

Title bar

The title bar still doesn't look native at all. There are buttons that are disabled user-wide. Icons are completely off and unsharp.

The menu

• The first time I open the menu, the diagonal divider in the automatic theme selection is very pixelated.
• The theme selection doesn't look like in GTK at all.
• The GTK accent color is completely ignored.
• The order of items is completely random.
• Labels of entries are not what they should be.

Preferences

• Icons are off.
• Margins are off.
• The individual settings don't look native at all.
• Language shouldn't be a setting. Please respect the user's language.
• The text is not sharp.
• Dropdowns don't look like GTK dropdowns.

Keyboard shortcuts

I probably don't have to point out what's wrong here. It looks completely different, and even the order (whether the label or the shortcut comes first) is wrong.

My advice

Use a design language that has a library for the tech stack you are working with. Use a popular Material UI library or PrimeNG. If you want to build a native Linux application, use GTK and Adwaita, but don't fake it. That certainly goes wrong. There are apps that have different interfaces for different platforms if you want that.
Oh, and please stop that slop-coding. There is a reason why all the good Adwaita/GNOME apps are not developed using "AI".

[Hakanbaban53]

Thanks for the detailed feedback and screenshots. You're right about most of it.

When I first started building this app, I tried using GNOME Builder. But since I'm used to VSCode all the time, it became too hard for me, especially as an old web developer and sysadmin. I also checked out Flutter, but when I saw the large binary sizes I dropped that framework.

So I found Tauri and started coding the app. I really wanted a GTK app but needed faster development, so I tried mimicking GTK applications like Bottles, Nautilus, Resources and other GNOME Libadwaita apps.

I've been working on this for about a year now. In the early development (like 3-4 months), I used AI way too much and honestly this app became AI slop. Now I understand why people hate AI usage, they don't actually hate AI itself, they hate badly written code. I'm currently trying to optimize and fix those early AI-generated parts. I still use AI yeah, but not like spamming code anymore. More careful, more efficient.

About the app design, I need to change from the GTK look to a new design, and I'm working on that now. Also, about native applications: I know Parabolic and saw its early development, but I can't use native frameworks because this app has a web server mode for browser access.

I used Angular and Angular Material because they're lightweight and efficient, but since I changed the Material theme so much, it causes weird paddings and margins. I checked out PrimeNG and Material UI too, they look really great and polished.

So at this point I'm going to keep polishing the UI. Maybe it won't look exactly like native desktop libraries, but it'll look way better.

Edit: You tell the title bar icons not sharp (Also other icons the anywhere the app). This because the font awesome icons are not fitting the angular material grid. Now I try the found new Open source icon packs and I gonna replace the all font awesome icons. I found tables, lucide and other good ones to fit the grid. I continue with the tables.