plr

src/calendar-app/calendar/gui/eventpopup/CalendarContactPopup.ts

@@ -51,7 +51,7 @@ export class ContactEventPopup implements ModalComponent {
 
 	view(): Children {
 		return m(
-			".abs.elevated-bg.plr.pb-16.border-radius.dropdown-shadow.flex.flex-column",
+			".abs.elevated-bg.plr-12.pb-16.border-radius.dropdown-shadow.flex.flex-column",
 			{
 				style: {
 					// minus margin, need to apply it now to not overflow later

src/calendar-app/calendar/gui/eventpopup/CalendarEventPopup.ts

@@ -111,7 +111,7 @@ export class CalendarEventPopup implements ModalComponent {
 
 	view(): Children {
 		return m(
-			".abs.elevated-bg.plr.pb-16.border-radius.dropdown-shadow.flex.flex-column",
+			".abs.elevated-bg.plr-12.pb-16.border-radius.dropdown-shadow.flex.flex-column",
 			{
 				style: {
 					// minus margin, need to apply it now to not overflow later

src/calendar-app/calendar/gui/pickers/DatePicker.ts

@@ -213,7 +213,7 @@ export class DatePicker implements Component<DatePickerAttrs> {
 		// We would like to show the date being typed in the dropdown
 		const dropdownDate = this.parseDate(this.inputText) ?? date ?? new Date()
 		return m(
-			".content-bg.z3.menu-shadow.plr.pb-8",
+			".content-bg.z3.menu-shadow.plr-12.pb-8",
 			{
 				"aria-modal": "true",
 				"aria-label": lang.get(label),

src/calendar-app/calendar/settings/CalendarSettingsView.ts

@@ -211,7 +211,7 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi
 			[
 				// Support button
 				m(BaseButton, {
-					class: "flash flex justify-center center-vertically pt-8 pb-8 plr border-radius",
+					class: "flash flex justify-center center-vertically pt-8 pb-8 plr-12 border-radius",
 					style: {
 						marginInline: "auto",
 						border: `1px solid ${theme.outline}`,

src/calendar-app/calendar/view/CalendarAgendaItemView.ts

@@ -27,7 +27,7 @@ export class CalendarAgendaItemView implements Component<CalendarAgendaItemViewA
 		const eventTitle = getDisplayEventTitle(attrs.event.summary)
 
 		return m(
-			".flex.items-center.click.plr.border-radius.pt-8.pb-8.rel.limit-width.full-width",
+			".flex.items-center.click.plr-12.border-radius.pt-8.pb-8.rel.limit-width.full-width",
 			{
 				// Implement the background color via JavaScript on Desktop, so we can react to `attrs.selected`
 				class: styles.isDesktopLayout() ? "hide-outline" : "state-bg",

src/common/gui/LogDialogUtils.ts

@@ -27,7 +27,7 @@ export async function showLogsDialog(logContent: string) {
 		},
 		class {
 			view() {
-				return m(".fill-absolute.selectable.scroll.white-space-pre.plr.pt-16.pb-16", logContent)
+				return m(".fill-absolute.selectable.scroll.white-space-pre.plr-12.pt-16.pb-16", logContent)
 			}
 		},
 		{},

src/common/gui/RenderLoginInfoLinks.ts

@@ -21,7 +21,7 @@ export function renderInfoLinks(): Children {
 				? m(ExternalLink, {
 						href: privacyPolicyLink,
 						text: lang.get("privacyLink_label"),
-						class: "plr",
+						class: "plr-12",
 						isCompanySite: true,
 						specialType: "privacy-policy",
 					})
@@ -30,7 +30,7 @@ export function renderInfoLinks(): Children {
 				? m(ExternalLink, {
 						href: imprintLink,
 						text: lang.get("imprint_label"),
-						class: "plr",
+						class: "plr-12",
 						isCompanySite: true,
 						specialType: "license",
 					})

src/common/gui/base/MessageBox.ts

@@ -13,7 +13,7 @@ export type MessageBoxAttrs = {
 export class MessageBox implements Component<MessageBoxAttrs> {
 	view({ attrs, children }: Vnode<MessageBoxAttrs>): Children {
 		return m(
-			".justify-center.items-start.dialog-width-s.pt-16.pb-16.plr.border-radius",
+			".justify-center.items-start.dialog-width-s.pt-16.pb-16.plr-12.border-radius",
 			{
 				style: Object.assign(
 					{

src/common/gui/base/MonospaceTextDisplay.ts

@@ -37,7 +37,7 @@ export class MonospaceTextDisplay implements Component<MonospaceTextDisplayAttrs
 		let extraClasses = classes ?? ""
 
 		if (border) {
-			extraClasses += ".border.pt-16.pb-16.plr"
+			extraClasses += ".border.pt-16.pb-16.plr-12"
 		}
 
 		// in case the chunkSize parameter is set we want to preserve the line break to display the monospace content in multiple rows.

src/common/gui/base/SnackBar.ts

@@ -43,7 +43,7 @@ class SnackBar implements Component<SnackBarAttrs> {
 		return m(
 			".snackbar-content.flex.flex-space-between.border-radius.pb-4.pt-4",
 			{
-				class: vnode.attrs.dismissButton ? "pl-12" : "plr",
+				class: vnode.attrs.dismissButton ? "pl-12" : "plr-12",
 				onmouseenter: () => {
 					vnode.attrs.onHoverChange(true)
 				},

src/common/gui/main-styles.ts

@@ -597,10 +597,6 @@ styles.registerStyle("main", () => {
 			"padding-left": px(size.spacing_64),
 			"padding-right": px(size.spacing_64),
 		},
-		".plr": {
-			"padding-left": px(size.spacing_12),
-			"padding-right": px(size.spacing_12),
-		},
 		".pl-4": {
 			"padding-left": px(size.spacing_4),
 		},

src/common/misc/ErrorReporter.ts

@@ -226,7 +226,7 @@ export async function showErrorDialogNotLoggedIn(e: ErrorInfo): Promise<void> {
 
 	const info = () => [
 		m(
-			".flex.col.items-end.plr",
+			".flex.col.items-end.plr-12",
 			{
 				style: {
 					marginTop: "-16px",
@@ -250,7 +250,7 @@ export async function showErrorDialogNotLoggedIn(e: ErrorInfo): Promise<void> {
 			},
 			[
 				m(
-					".flex-end.plr",
+					".flex-end.plr-12",
 					m(Button, {
 						label: "copy_action",
 						click: () => copyToClipboard(message),
@@ -258,7 +258,7 @@ export async function showErrorDialogNotLoggedIn(e: ErrorInfo): Promise<void> {
 					}),
 				),
 				m(
-					".plr.selectable.pb-16.scroll.text-pre",
+					".plr-12.selectable.pb-16.scroll.text-pre",
 					{
 						style: {
 							height: px(200),

src/common/settings/keymanagement/dialogpages/FingerprintMismatchInfoPage.ts

@@ -44,7 +44,7 @@ export class FingerprintMismatchInfoPage implements Component<VerificationErrorI
 			}),
 			m(
 				Card,
-				m(".plr.flex.flex-column.gap-vpad", [
+				m(".plr-12.flex.flex-column.gap-vpad", [
 					m("", m.trust(warning)),
 					m(".b.mt-16", lang.get("keyVerificationErrorRecommendation_title")),
 					m("", m.trust(recommendation)),

src/common/settings/keymanagement/dialogpages/FingerprintMismatchKeepPage.ts

@@ -34,7 +34,7 @@ export class FingerprintMismatchKeepPage implements Component<FingerprintMismatc
 			}),
 			m(
 				Card,
-				m(".plr.flex.flex-column.gap-vpad.pt-8.pb-8", [
+				m(".plr-12.flex.flex-column.gap-vpad.pt-8.pb-8", [
 					m("", m.trust(message)),
 					m(ExternalLink, {
 						isCompanySite: true,

src/common/settings/keymanagement/dialogpages/MultiRecipientsKeyVerificationRecoveryUserSelectionPage.ts

@@ -40,7 +40,7 @@ export class MultiRecipientsKeyVerificationRecoveryUserSelectionPage implements
 			}),
 			m(
 				Card,
-				m(".plr.flex.flex-column.gap-vpad.pt-8.pb-8", [
+				m(".plr-12.flex.flex-column.gap-vpad.pt-8.pb-8", [
 					lang.get("keyManagement.mailRecipientsVerificationMismatchError_msg"),
 					m(
 						"",
@@ -80,7 +80,7 @@ export class MultiRecipientsKeyVerificationRecoveryUserSelectionPage implements
 				icon: Icons.CheckCircleOutline,
 				iconOptions: { color: theme.success },
 			}),
-			m(Card, m(".plr.flex.flex-column.gap-vpad.pt-8.pb-8", [message])),
+			m(Card, m(".plr-12.flex.flex-column.gap-vpad.pt-8.pb-8", [message])),
 		])
 	}
 

src/common/settings/keymanagement/dialogpages/RecipientKeyVerificationRecoveryAcceptPage.ts

@@ -27,7 +27,7 @@ export class RecipientKeyVerificationRecoveryAcceptPage implements Component<Ver
 			}),
 			m(
 				Card,
-				m(".plr.flex.flex-column.gap-vpad.pt-8.pb-8", [
+				m(".plr-12.flex.flex-column.gap-vpad.pt-8.pb-8", [
 					m("", m.trust(contactUpdatedText)),
 					m(ExternalLink, {
 						isCompanySite: true,

src/common/settings/keymanagement/dialogpages/RecipientKeyVerificationRecoveryInfoPage.ts

@@ -34,7 +34,7 @@ export class RecipientKeyVerificationRecoveryInfoPage implements Component<Verif
 			}),
 			m(
 				Card,
-				m(".plr.flex.flex-column.gap-vpad", [
+				m(".plr-12.flex.flex-column.gap-vpad", [
 					m("", m.trust(lang.get("keyVerificationErrorWarning_msg", { "{mailAddress}": contactMailAddress }))),
 					m(".b.mt-16", lang.get("keyVerificationErrorRecommendation_title")),
 					m("", m.trust(lang.get("keyVerificationErrorRecommendation_msg"))),

src/common/settings/keymanagement/dialogpages/RecipientKeyVerificationRecoveryRejectPage.ts

@@ -27,7 +27,7 @@ export class RecipientKeyVerificationRecoveryRejectPage implements Component<Ver
 			}),
 			m(
 				Card,
-				m(".plr.flex.flex-column.gap-vpad.pt-8.pb-8", [
+				m(".plr-12.flex.flex-column.gap-vpad.pt-8.pb-8", [
 					m("", m.trust(contactNotUpdatedText)),
 					m(ExternalLink, {
 						isCompanySite: true,

src/common/settings/keymanagement/dialogpages/SenderKeyVerificationRecoveryInfoPage.ts

@@ -35,7 +35,7 @@ export class SenderKeyVerificationRecoveryInfoPage implements Component<Verifica
 			}),
 			m(
 				Card,
-				m(".plr.flex.flex-column.gap-vpad", [
+				m(".plr-12.flex.flex-column.gap-vpad", [
 					m(
 						"",
 						m.trust(

src/common/settings/keymanagement/dialogpages/SenderKeyVerificationRecoverySuccessPage.ts

@@ -25,7 +25,7 @@ export class SenderKeyVerificationRecoverySuccessPage implements Component<Sende
 			}),
 			m(
 				Card,
-				m(".plr.flex.flex-column.gap-vpad.pt-8.pb-8", [
+				m(".plr-12.flex.flex-column.gap-vpad.pt-8.pb-8", [
 					m("", m.trust(contactUpdatedText)),
 					m(ExternalLink, {
 						isCompanySite: true,

src/common/subscription/PaymentMethodInput.ts

@@ -235,7 +235,7 @@ class PaypalInput {
 				m(BaseButton, {
 					label: lang.makeTranslation("PayPal", "PayPal"),
 					icon: m(".payment-logo.flex", m.trust(PayPalLogo)),
-					class: "border border-radius bg-white button-height plr",
+					class: "border border-radius bg-white button-height plr-12",
 					onclick: () => {
 						if (attrs.payPalRequestUrl.isLoaded()) {
 							window.open(attrs.payPalRequestUrl.getLoaded())

src/common/subscription/PlanSelector.ts

@@ -176,7 +176,7 @@ export class PlanSelector implements Component<PlanSelectorAttr> {
 				m(
 					".flex.flex-column.gap-vpad",
 					m(
-						"#continue-wrapper.flex-v-center.plr",
+						"#continue-wrapper.flex-v-center.plr-12",
 						{
 							style: this.shouldFixButtonPos() && {
 								position: "fixed",

src/common/support/pages/EmailSupportUnavailablePage.ts

@@ -21,7 +21,7 @@ export class EmailSupportUnavailablePage implements Component<EmailSupportUnavai
 			m(
 				Card,
 				{ shouldDivide: true },
-				m("div.pt-8.pb-8.plr", [
+				m("div.pt-8.pb-8.plr-12", [
 					m(".h4.mt-4", lang.get("supportNoDirectSupport_title")),
 					m("p", lang.get("supportNoDirectSupport_msg")),
 					m("img.block", {

src/common/support/pages/SupportRequestSentPage.ts

@@ -54,7 +54,7 @@ export class SupportRequestSentPage implements Component<SupportRequestSentPageA
 				),
 			),
 			isCalendarApp
-				? m(Card, { shouldDivide: true }, m(".plr.pt-16.pb-16", "You can access the response in Tuta Mail using your Tuta Calendar credentials."), [
+				? m(Card, { shouldDivide: true }, m(".plr-12.pt-16.pb-16", "You can access the response in Tuta Mail using your Tuta Calendar credentials."), [
 						m(SectionButton, {
 							text: "getTutaMail_action",
 							onclick: () => {

src/common/support/pages/SupportSuccessPage.ts

@@ -26,7 +26,7 @@ export class SupportSuccessPage implements Component<SupportSuccessPageAttrs> {
 				Card,
 				{ shouldDivide: true },
 				m(
-					".plr",
+					".plr-12",
 					m(".h4.center.pb-8.pt-8", lang.get("supportSuccess_msg")),
 					m("p.center.m-0", lang.get("supportRatingRequest_msg")),
 					m(

src/mail-app/contacts/ContactImporter.ts

@@ -298,7 +298,7 @@ export function showContactImportDialog(contacts: Contact[], okAction: (dialog:
 				],
 			} satisfies DialogHeaderBarAttrs),
 			/** variable-size child container that may be scrollable. */
-			m(".dialog-max-height.plr-s.pb-16.text-break.nav-bg", [
+			m(".dialog-max-height.plr-4.pb-16.text-break.nav-bg", [
 				m(
 					".list-bg.border-radius.mt-8.ml-8.mr-8",
 					m(SelectAllCheckbox, {

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

@@ -70,7 +70,7 @@ class OverwriteRemoteDraftDialog implements Component<OverwriteRemoteDraftDialog
 				icon: Icons.AlertCircleOutline,
 				iconOptions: { color: theme.error },
 			}),
-			m(Card, m(".plr.flex.flex-column.gap-vpad.center", lang.get("confirmOverwriteServerDraft_msg"))),
+			m(Card, m(".plr-12.flex.flex-column.gap-vpad.center", lang.get("confirmOverwriteServerDraft_msg"))),
 			m(LoginButton, {
 				class: "flex-center row center-vertically",
 				label: "yes_label",

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

@@ -78,7 +78,7 @@ export class LabelsPopup implements ModalComponent {
 							const opacity = !canToggleLabel ? 0.5 : undefined
 
 							return m(
-								"label-item.flex.items-center.plr.state-bg.cursor-pointer",
+								"label-item.flex.items-center.plr-12.state-bg.cursor-pointer",
 
 								{
 									"data-labelid": getElementId(label),

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

@@ -539,7 +539,7 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
 		if (viewModel.isLoadingAttachments() && !viewModel.isConnectionLost()) {
 			return m(".flex." + responsiveCardHMargin(), [
 				m(".flex-v-center.pl-8", progressIcon()),
-				m(".small.flex-v-center.plr.button-height", lang.get("loading_msg")),
+				m(".small.flex-v-center.plr-12.button-height", lang.get("loading_msg")),
 			])
 		} else {
 			const attachments = viewModel.getNonInlineAttachments()

src/mail-app/settings/SettingsView.ts

@@ -795,7 +795,7 @@ export class SettingsView extends BaseTopLevelView implements TopLevelView<Setti
 		return m(".pb-16.pt-32.flex-no-shrink.flex.col.justify-end.gap-vpad", [
 			// Support button
 			m(BaseButton, {
-				class: "flash flex justify-center center-vertically pt-8 pb-8 plr border-radius",
+				class: "flash flex justify-center center-vertically pt-8 pb-8 plr-12 border-radius",
 				style: {
 					marginInline: "auto",
 					border: `1px solid ${theme.on_surface_variant}`,