Passwords app font sizes and colors different to other Nextcloud apps

[nooblag]

System Information

Server:

{
    "version": {
        "server": "21.0.4.1",
        "app": "2021.9.20",
        "lsr": false,
        "php": "7.4.23"
    },
    "environment": {
        "os": "Linux",
        "architecture": "x86_64",
        "bits": 64,
        "database": "pgsql",
        "cron": "cron",
        "proxy": false,
        "sslProxy": true,
        "subdirectory": false
    },
    "legacyApi": {
        "enabled": 0,
        "used": false
    },
    "services": {
        "images": "imagick",
        "favicons": "local",
        "previews": "screeenly",
        "security": "hibp",
        "words": "local",
        "previewApi": true,
        "faviconApi": false
    },
    "settings": {
        "channel": "stable",
        "nightlies": false,
        "handbook": false,
        "performance": 5
    },
    "encryption": {
        "sse": {
            "SSEv1r1": false,
            "SSEv1r2": true,
            "SSEv2r1": false,
            "none": false,
            "default": "SSEv1r2"
        },
        "cse": {
            "CSEv1r1": false,
            "none": true,
            "default": "none"
        }
    }
}

Client:

 Browser and Version: Firefox 92.0
 Client OS and Version: Windows 10 and Linux Mint 20.2

Steps to reproduce

Small issue, but this app seems to have different font sizes and uses colors differently from other Nextcloud apps and so hence looks a bit inconsistent/odd. We especially notice this difference because we use a magenta theme (hence the "pink").

Password entry list and Right Click Menu

For example, the password entry and right-click menu, the font size is very small. The icons are also slightly different, and a light gray color instead of black (this may be an issue for those with visual impairments/color blindness or accessibility). The font alignment is also different for the "modified" column heading--it floats right instead of left.

Compared to Nextcloud Files app:

Sharing sidebar/tabs:

Compared to Nextcloud Files app:

Also missing "currently open app" indicator

Nextcloud Files app shows the small triangle down the bottom when it is the currently open app. Passwords seems to be missing this.

Expected result

App appearance is more consistent with other nextcloud apps

Actual result

Slight inconsistencies in visual appearance

Nextcloud log

Nextcloud log

No relevant entries.

Browser log

Browser log

16:30:37.328 jQuery is deprecated: The global jQuery is deprecated. It will be updated to v3.x in Nextcloud 21. In later versions of Nextcloud it might be removed completely. Please ship your own. 3 globals.js:60:15
16:30:38.260 No OC found index.js:46:12
16:30:38.300 jQuery is deprecated: The global jQuery is deprecated. It will be updated to v3.x in Nextcloud 21. In later versions of Nextcloud it might be removed completely. Please ship your own. globals.js:60:15
16:30:38.301 $ is deprecated: The global jQuery is deprecated. It will be updated to v3.x in Nextcloud 21. In later versions of Nextcloud it might be removed completely. Please ship your own. globals.js:60:15
16:30:38.355 OCA.Comments.View initialized comments-app.js:31:21
16:30:38.356 $ is deprecated: The global jQuery is deprecated. It will be updated to v3.x in Nextcloud 21. In later versions of Nextcloud it might be removed completely. Please ship your own. 4 globals.js:60:15
16:30:38.416 jQuery is deprecated: The global jQuery is deprecated. It will be updated to v3.x in Nextcloud 21. In later versions of Nextcloud it might be removed completely. Please ship your own. 2 globals.js:60:15
16:30:38.442 jQuery is deprecated: The global jQuery is deprecated. It will be updated to v3.x in Nextcloud 21. In later versions of Nextcloud it might be removed completely. Please ship your own. globals.js:60:15
16:30:38.443 $ is deprecated: The global jQuery is deprecated. It will be updated to v3.x in Nextcloud 21. In later versions of Nextcloud it might be removed completely. Please ship your own. globals.js:60:15
16:30:38.512 jQuery is deprecated: The global jQuery is deprecated. It will be updated to v3.x in Nextcloud 21. In later versions of Nextcloud it might be removed completely. Please ship your own. 4 globals.js:60:15
16:30:38.552 jQuery is deprecated: The global jQuery is deprecated. It will be updated to v3.x in Nextcloud 21. In later versions of Nextcloud it might be removed completely. Please ship your own. 4 globals.js:60:15
16:30:38.572 $ is deprecated: The global jQuery is deprecated. It will be updated to v3.x in Nextcloud 21. In later versions of Nextcloud it might be removed completely. Please ship your own. 5 globals.js:60:15
16:30:38.597 jQuery is deprecated: The global jQuery is deprecated. It will be updated to v3.x in Nextcloud 21. In later versions of Nextcloud it might be removed completely. Please ship your own. 168 globals.js:60:15
16:30:38.747 [DEBUG] unified-search: Unified Search initialized with the following providers 
Object { 0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}, 6: {…}, 7: {…}, 8: {…}, 9: {…}, … }
ConsoleLogger.js:42:18
16:30:38.896 $ is deprecated: The global jQuery is deprecated. It will be updated to v3.x in Nextcloud 21. In later versions of Nextcloud it might be removed completely. Please ship your own. 71 globals.js:60:15
16:30:40.017 jQuery is deprecated: The global jQuery is deprecated. It will be updated to v3.x in Nextcloud 21. In later versions of Nextcloud it might be removed completely. Please ship your own. 8 globals.js:60:15

[nooblag]

PS I'm on Nextcloud 21.0.4.

[marius-wieschollek]

Please make sure that you follow the contributing guidelines and file this issue correctly either as a bug or a feature. Otherwise i will close it.

[nooblag]

Apologies that I missed that. I've edited now to adhere to template. Thanks.

[ghost]

Please, fix it.

[ostasevych]

So, here are my suggestions for quick and dirty hack in css/app.css NC 27.1.6:

1. replace font-size: .8rem with font-size: 1rem everywhere
2. make changes between xxx: date {color:#6e6e6e; flex-shrink:0; font-size:**1rem**;line-height50px;padding 0 15px 0 5px;text-align:right;width:**130**px}
3. make changes between xxx: .menu li{color:var(--color-main-text);cursor:pointer;font-size:1rem;font-weight:**350**;line-height:40px;padding:0 20px 0 15px;white-space:nowrap}

This will make the look pf the app a bit closer to other NC apps.

[nooblag]

Thanks for that. Any chance of a PR to update the app?