"Add mail account" button looks wonky

[auroraanna]

Steps to reproduce

1. Open the app
2. Setup and account
3. Open the navigation on the left
4. Click "Mail settings"

Expected behavior

• The "Add mail account" should the the full width that is available inside it's container like the other buttons in navigation.
• The "Add mail account" button icon and text should be aligned left or center like the other buttons.

Actual behavior

The "Add mail account" button is not full width and it's icon and text and not aligned left or center. The button's icon and text look like they're aligned right but actually there is extra padding on the left:

.app-settings-button.button.primary.new-button[data-v-16724163] {
    color: var(--color-primary-element-text);
    padding-left: 34px;
    gap: 4px;
    width: fit-content;
}

Mail app version

3.4.0-beta.1

Mailserver or service

Mailcow (mail server)

Operating system

NixOS 23.11.2023080 (Linux)

PHP engine version

PHP 8.2

Web server

Apache (supported)

Database

MariaDB

Additional info

No response

[auroraanna]

I tried to properly do the buttons in the settings according to the documentation with NcButton but the alignment property just doesn't work, even though my nextcloud/vue is on 7.12.2. I don't wanna write legacy CSS when I could be using that property.

[GretaD]

'Add mail account' is a router link, not an NcButton, I dont think you can change the router link to NcButton because most probably it will not work, unless we find a way with :href.

That styling for that button is most probably a leftover, because you can see that theres a comment that says: This style will be removed...

mail/src/components/AppSettingsMenu.vue

Lines 282 to 285 in dc6c209

	//this style will be removed after we migrate also the 'add mail account' to material design
	padding-left: 34px;
	gap: 4px;
	width: fit-content;

if you remove that padding and you change the width to 100%, you'll have the same design as the other buttons. Icon+text is left aligned.

[auroraanna]

'Add mail account' is a router link, not an NcButton, I dont think you can change the router link to NcButton because most probably it will not work, unless we find a way with :href.

NcButton has a to property which makes it a router-link

[GretaD]

'Add mail account' is a router link, not an NcButton, I dont think you can change the router link to NcButton because most probably it will not work, unless we find a way with :href.

NcButton has a to property which makes it a router-link

ah, thats true, i missed that. If you wrote it on the template as NcButton and not as ButtonVue, i think that was the issue why it was not working for you, because: https://github.com/nextcloud/mail/blob/main/src/components/AppSettingsMenu.vue#L119

We can try together tomorrow.

[starmanager01]

Here I have a notice. There is no way to delete the mail account.

Greetings.

Klaus

[GretaD]

@starmanager01 yes there is, is under the account action menu. See pic below

[starmanager01]

Hi, thank you. That was the hint. I like the E-mail program.