finalize margin classes

src/common/gui/base/ActionBar.ts

@@ -13,7 +13,7 @@ export type ActionBarAttrs = {
 export class ActionBar implements Component<ActionBarAttrs> {
 	view(vnode: Vnode<ActionBarAttrs>): Children {
 		return m(
-			".action-bar.flex-end.items-center.ml-between-s",
+			".action-bar.flex-end.items-center.ml-between-4",
 			vnode.attrs.buttons.map((b) => m(IconButton, b)),
 		)
 	}

src/common/gui/base/DialogHeaderBar.ts

@@ -42,7 +42,7 @@ export class DialogHeaderBar implements Component<DialogHeaderBarAttrs> {
 			},
 			[
 				m(
-					columnClass + ".ml-negative-s",
+					columnClass + ".ml-negative-8",
 					resolveMaybeLazy(a.left).map((a) => m(Button, a)),
 				), // ellipsis is not working if the text is directly in the flex element, so create a child div for it
 				a.middle
@@ -55,7 +55,7 @@ export class DialogHeaderBar implements Component<DialogHeaderBarAttrs> {
 						)
 					: null,
 				m(
-					columnClass + ".mr-negative-s.flex.justify-end",
+					columnClass + ".mr-negative-8.flex.justify-end",
 					resolveMaybeLazy(a.right).map((a) => m(Button, a)),
 				),
 			],

src/common/gui/base/InfoBanner.ts

@@ -58,7 +58,7 @@ export class InfoBanner implements Component<InfoBannerAttrs> {
 					{ style: { "margin-left": px(size.icon_24 + 1) } }, // allow room for the icon
 					[
 						m(".mr-12.pt-s.pb-s", typeof message === "function" ? message() : m(".small.text-break", lang.get(message))),
-						m(".flex.ml-negative-s", { style: buttonContainerStyle }, [this.renderButtons(buttons), this.renderHelpLink(helpLink)]),
+						m(".flex.ml-negative-8", { style: buttonContainerStyle }, [this.renderButtons(buttons), this.renderHelpLink(helpLink)]),
 					],
 				),
 			],

src/common/gui/base/RadioSelector.ts

@@ -56,7 +56,7 @@ export class RadioSelector<T> implements Component<RadioSelectorAttrs<T>> {
 				},
 			},
 			[
-				m("input[type=radio].m-0.mr-button.content-accent-accent", {
+				m("input[type=radio].m-0.mr-8.content-accent-accent", {
 					/* The `name` attribute defines the group the radio button belongs to. Not the name/label of the radio button itself.
 					 * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#defining_a_radio_group
 					 */

src/common/gui/base/RecipientButton.ts

@@ -10,7 +10,7 @@ export type Attrs = {
 export class RecipientButton implements Component<Attrs> {
 	view({ attrs }: Vnode<Attrs>): Children {
 		return m(
-			"button.mr-button.content-accent-fg.print.small",
+			"button.mr-8.content-accent-fg.print.small",
 			{
 				style: Object.assign(
 					{

src/common/gui/base/RichTextToolbar.ts

@@ -58,7 +58,7 @@ export class RichTextToolbar implements Component<RichTextToolbarAttrs> {
 			},
 			[
 				m(
-					".flex-end.wrap.items-center.mb-4.mt-4.ml-between-s",
+					".flex-end.wrap.items-center.mb-4.mt-4.ml-between-4",
 					this.renderStyleButtons(attrs),
 					this.renderCustomButtons(attrs),
 					this.renderAlignDropDown(attrs),

src/common/gui/base/buttons/RowButton.ts

@@ -44,12 +44,12 @@ export class RowButton implements Component<RowButtonAttrs> {
 					? m(Icon, {
 							icon: attrs.icon,
 							container: "div",
-							class: "mr-button",
+							class: "mr-8",
 							style: { fill: color },
 							size: IconSize.PX24,
 						})
 					: attrs.icon === "none"
-						? m(".icon-24.mr-button")
+						? m(".icon-24.mr-8")
 						: null,
 			class: "flex items-center state-bg button-content plr-button " + attrs.class,
 			style: {

src/common/gui/dialogs/ProgressDialog.ts

@@ -32,7 +32,7 @@ export async function showProgressDialog<T>(
 				headerBarAttrs
 					? m(DialogHeaderBar, {
 							...headerBarAttrs,
-							class: "mb-32 mt-negative-l mr-negative-l ml-negative-l",
+							class: "mb-32 mt-negative-24 mr-negative-24 ml-negative-24",
 						})
 					: null,
 				m(

src/common/gui/main-styles.ts

@@ -591,54 +591,32 @@ styles.registerStyle("main", () => {
 		".pl-button": {
 			"padding-left": px(size.spacing_8),
 		},
-		".mr-button": {
+		".mt-negative-8": {
-			"margin-right": px(size.spacing_8),
-		},
-		".ml-button": {
-			"margin-left": px(size.spacing_8),
-		},
-		".mt-negative-hpad-button": {
 			"margin-top": px(-size.spacing_8),
 		},
-		".mt-negative-s": {
+		".mt-negative-24": {
-			"margin-top": px(-size.spacing_8),
-		},
-		".mt-negative-m": {
-			"margin-top": px(-size.spacing_16),
-		},
-		".mt-negative-l": {
 			"margin-top": px(-size.spacing_24),
 		},
-		".mr-negative-s": {
+		".mr-negative-8": {
 			"margin-right": px(-size.spacing_8),
 		},
-		".mr-negative-l": {
+		".mr-negative-24": {
 			"margin-right": px(-size.spacing_24),
 		},
-		".ml-negative-s": {
+		".ml-negative-8": {
 			"margin-left": px(-size.spacing_8),
 		},
 		// negative margin to handle the default padding of a button
-		".ml-negative-l": {
+		".ml-negative-24": {
 			"margin-left": px(-size.spacing_24),
 		},
-		".ml-negative-xs": {
-			"margin-left": px(-3),
-		},
-		".ml-negative-bubble": {
-			"margin-left": px(-7),
-		},
-		".mr-negative-m": {
-			"margin-right": px(-(size.spacing_8 + size.spacing_8)),
-		},
-		// negative margin to handle the padding of a nav button
 		".fixed-bottom-right": {
 			position: "fixed",
 			bottom: px(size.spacing_12),
 			right: px(size.spacing_24),
 		},
-		".mr-negative-xs": {
+		".mr-negative-4": {
-			"margin-right": px(-3),
+			"margin-right": px(-size.base_4),
 		},
 		// common setting
 		".text-ellipsis": {
@@ -1858,15 +1836,12 @@ styles.registerStyle("main", () => {
 			width: "initial",
 			"margin-left": "auto",
 		},
-		".ml-between-s > :not(:first-child)": {
+		".ml-between-4 > :not(:first-child)": {
 			"margin-left": px(size.spacing_4),
 		},
-		".mt-between-s > :not(:first-child)": {
+		".mt-between-4 > :not(:first-child)": {
 			"margin-top": px(size.spacing_4),
 		},
-		".mt-between-m > :not(:first-child)": {
-			"margin-top": px(size.spacing_12),
-		},
 		// dropdown
 		".dropdown-panel": {
 			position: "absolute",

src/common/login/LoginView.ts

@@ -320,7 +320,7 @@ export class LoginView extends BaseTopLevelView implements TopLevelView<LoginVie
 	}
 
 	_renderAppButtons(): Children {
-		return m(".flex-center.pt-l.ml-between-s", [
+		return m(".flex-center.pt-l.ml-between-4", [
 			client.isDesktopDevice() || client.device === DeviceType.ANDROID
 				? m(IconButton, {
 						title: "appInfoAndroidImageAlt_alt",

src/common/misc/ErrorReporter.ts

@@ -234,7 +234,7 @@ export async function showErrorDialogNotLoggedIn(e: ErrorInfo): Promise<void> {
 			},
 			[
 				m(
-					"div.mr-negative-xs",
+					"div.mr-negative-4",
 					m(ExpanderButton, {
 						expanded: expanded(),
 						onExpandedChange: expanded,

src/common/settings/IdentifierRow.ts

@@ -53,6 +53,6 @@ export class IdentifierRow implements Component<IdentifierRowAttrs> {
 		const identifierText = formatIdentifier
 			? neverNull(identifier.match(/.{2}/g)).map((el, i) => m("span.pr-s" + (i % 2 === 0 ? ".b" : ""), el))
 			: identifier
-		return m(".text-break.small.monospace.mt-negative-hpad-button.selectable", identifierText)
+		return m(".text-break.small.monospace.mt-negative-8.selectable", identifierText)
 	}
 }

src/common/settings/UserListView.ts

@@ -107,7 +107,7 @@ export class UserListView implements UpdatableSettingsViewer {
 						placeholder: lang.get("searchUsers_placeholder"),
 					} satisfies BaseSearchBarAttrs),
 					m(
-						".mr-negative-s",
+						".mr-negative-8",
 						m(IconButton, {
 							title: "addUsers_action",
 							icon: Icons.Add,

src/common/settings/whitelabel/WhitelabelBrandingDomainSettings.ts

@@ -36,7 +36,7 @@ export class WhitelabelBrandingDomainSettings implements Component<WhitelabelBra
 			helpLabel: this.renderWhitelabelInfo(certificateInfo),
 			isReadOnly: true,
 			injectionsRight: () =>
-				m(".ml-between-s", [
+				m(".ml-between-4", [
 					whitelabelDomain ? this.renderDeactivateButton(whitelabelDomain) : null,
 					customerInfo ? this._renderEditButton(customerInfo, certificateInfo, isWhitelabelFeatureEnabled) : null,
 				]),

src/mail-app/mail/editor/MailEditor.ts

@@ -401,7 +401,7 @@ export class MailEditor implements Component<MailEditorAttrs> {
 		m.render(
 			quoteIndicator,
 			m(
-				".ml-button.fit-content",
+				".ml-8.fit-content",
 				{
 					style: {
 						borderRadius: "25%",
@@ -502,7 +502,7 @@ export class MailEditor implements Component<MailEditorAttrs> {
 			value: model.getSubject(),
 			oninput: (val) => model.setSubject(val),
 			injectionsRight: () =>
-				m(".flex.end.ml-between-s.items-center", [
+				m(".flex.end.ml-between-4.items-center", [
 					isDarkTheme()
 						? m(IconButton, {
 								title: "viewInLightMode_action",

src/mail-app/mail/view/CollapsedMailView.ts

@@ -45,7 +45,7 @@ export class CollapsedMailView implements Component<CollapsedMailViewAttrs> {
 				viewModel.isUnread() ? this.renderUnreadDot() : null,
 				viewModel.isDraftMail() ? m(".mr-4", this.renderIcon(Icons.Edit, lang.get("draft_label"))) : null,
 				this.renderSender(viewModel),
-				m(".flex.ml-between-s.items-center", [
+				m(".flex.ml-between-4.items-center", [
 					mail.attachments.length > 0 ? this.renderIcon(Icons.Attachment, lang.get("attachment_label")) : null,
 					viewModel.isConfidential() ? this.renderIcon(getConfidentialIcon(mail), lang.get("confidential_label")) : null,
 					this.renderIcon(getFolderIconByType(folderInfo.folderType), folderInfo.name),

src/mail-app/mail/view/MailListView.ts

@@ -395,7 +395,7 @@ export class MailListView implements Component<MailListViewAttrs> {
 				? [
 						m(".flex.flex-column.plr-l", [
 							m(".small.flex-grow.pt", lang.get("storageDeletion_msg")),
-							m(".mr-negative-s.align-self-end", m(Button, purgeButtonAttrs)),
+							m(".mr-negative-8.align-self-end", m(Button, purgeButtonAttrs)),
 						]),
 					]
 				: null,

src/mail-app/mail/view/MailViewerHeader.ts

@@ -164,12 +164,12 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
 				m(".flex", [
 					this.getRecipientEmailAddress(attrs),
 					m(".flex-grow"),
-					m(".flex.items-center.white-space-pre.ml-8.ml-between-s", {
+					m(".flex.items-center.white-space-pre.ml-8.ml-between-4", {
 						// Orca refuses to read ut unless it's not focusable
 						tabindex: TabIndex.Default,
 						"aria-label": lang.get(viewModel.isConfidential() ? "confidential_action" : "nonConfidential_action") + ", " + dateTime,
 					}),
-					m(".flex.ml-between-s.items-center", [
+					m(".flex.ml-between-4.items-center", [
 						viewModel.isConfidential()
 							? m(Icon, {
 									icon: getConfidentialIcon(viewModel.mail),
@@ -254,7 +254,7 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
 				],
 			),
 			m(
-				".flex-end.items-start.ml-between-s",
+				".flex-end.items-start.ml-between-4",
 				{
 					class: styles.isSingleColumnLayout() ? "" : "mt-4",
 					style: {
@@ -425,7 +425,7 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
 					? [
 							m(".small.b", lang.get("to_label")),
 							m(
-								".flex.col.mt-between-s",
+								".flex.col.mt-between-4",
 								viewModel.getToRecipients().map((recipient) =>
 									m(
 										".flex",
@@ -880,7 +880,7 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
 		if (relevantRecipient) {
 			const numberOfAllRecipients = viewModel.getNumberOfRecipients()
 			return m(
-				".flex.click.small.ml-between-s.items-center",
+				".flex.click.small.ml-between-4.items-center",
 				{
 					style: {
 						// use this to allow the container to shrink, otherwise it doesn't want to cut the recipient address

src/mail-app/mail/view/MailViewerToolbar.ts

@@ -34,7 +34,7 @@ export class MailViewerActions implements Component<MailViewerToolbarAttrs> {
 	view(vnode: Vnode<MailViewerToolbarAttrs>) {
 		const singleMailActions = this.renderSingleMailActions(vnode.attrs)
 
-		return m(".flex.ml-between-s.items-center", { "data-testid": "nav:action_bar" }, [
+		return m(".flex.ml-between-4.items-center", { "data-testid": "nav:action_bar" }, [
 			singleMailActions,
 			singleMailActions != null ? m(".nav-bar-spacer") : null,
 			this.renderActions(vnode.attrs),

src/mail-app/search/SearchBarOverlay.ts

@@ -93,7 +93,7 @@ export class SearchBarOverlay implements Component<SearchBarOverlayAttrs> {
 	_renderProgress(state: SearchBarState): Children {
 		return m(".flex.col.rel", [
 			m(
-				".plr-l.pt-s.pb-s.flex.items-center.flex-space-between.mr-negative-s",
+				".plr-l.pt-s.pb-s.flex.items-center.flex-space-between.mr-negative-8",
 				{
 					style: {
 						height: px(52),
@@ -146,7 +146,7 @@ export class SearchBarOverlay implements Component<SearchBarOverlayAttrs> {
 
 		return m(".flex.rel", [
 			m(
-				".plr-l.pt-s.pb-s.flex.items-center.flex-space-between.mr-negative-s",
+				".plr-l.pt-s.pb-s.flex.items-center.flex-space-between.mr-negative-8",
 				{
 					style: {
 						height: px(52),

src/mail-app/search/view/SearchView.ts

@@ -480,7 +480,7 @@ export class SearchView extends BaseTopLevelView implements TopLevelView<SearchV
 		if (searchText == null) {
 			return null
 		}
-		return m("div.ml-button.mt-12.small.plr-button.content-fg.mb-16", m(Card, searchText))
+		return m("div.ml-8.mt-12.small.plr-button.content-fg.mb-16", m(Card, searchText))
 	}
 
 	oncreate(): void {

src/mail-app/settings/DummyTemplateListView.ts

@@ -31,7 +31,7 @@ export class DummyTemplateListView implements Component<DummyTemplateListViewAtt
 						placeholder: lang.get("searchTemplates_placeholder"),
 					} satisfies BaseSearchBarAttrs),
 					m(
-						".mr-negative-s",
+						".mr-negative-8",
 						m(IconButton, {
 							title: "addTemplate_label",
 							icon: Icons.Add,

src/mail-app/settings/KnowledgeBaseListView.ts

@@ -129,7 +129,7 @@ export class KnowledgeBaseListView implements UpdatableSettingsViewer {
 					} satisfies BaseSearchBarAttrs),
 					this.userCanEdit()
 						? m(
-								".mr-negative-s",
+								".mr-negative-8",
 								m(IconButton, {
 									title: "addEntry_label",
 									icon: Icons.Add,

src/mail-app/settings/MailSettingsViewer.ts

@@ -430,7 +430,7 @@ export class MailSettingsViewer implements UpdatableSettingsViewer {
 			m(TextField, {
 				label: "emptyString_msg",
 				// Negative upper margin to make up for no label
-				class: "mt-negative-s",
+				class: "mt-negative-8",
 				value: textFieldValue,
 				isReadOnly: true,
 				helpLabel: () => lang.get("localDataSection_msg"),

src/mail-app/settings/TemplateEditor.ts

@@ -102,7 +102,7 @@ class TemplateEditor implements Component<TemplateEditorAttrs> {
 				label: "language_label",
 				value: this.model.selectedContent() ? lang.getTranslationText(getLanguageName(this.model.selectedContent())) : "",
 				injectionsRight: () =>
-					m(".flex.ml-between-s", [
+					m(".flex.ml-between-4", [
 						this.model.getAddedLanguages().length > 1 ? [this.renderRemoveLangButton(), this.renderSelectLangButton()] : null,
 						this.renderAddLangButton(),
 					]),

src/mail-app/settings/TemplateListView.ts

@@ -128,7 +128,7 @@ export class TemplateListView implements UpdatableSettingsViewer {
 					} satisfies BaseSearchBarAttrs),
 					this.userCanEdit()
 						? m(
-								".mr-negative-s",
+								".mr-negative-8",
 								m(IconButton, {
 									title: "addTemplate_label",
 									icon: Icons.Add,

src/mail-app/settings/groups/GroupListView.ts

@@ -94,7 +94,7 @@ export class GroupListView implements UpdatableSettingsViewer {
 						placeholder: lang.get("searchMailboxes_placeholder"),
 					} satisfies BaseSearchBarAttrs),
 					m(
-						".mr-negative-s",
+						".mr-negative-8",
 						m(IconButton, {
 							title: "createSharedMailbox_label",
 							icon: Icons.Add,