diff --git a/src/calendar-app/calendar/gui/day-selector/DaySelectorSidebar.ts b/src/calendar-app/calendar/gui/day-selector/DaySelectorSidebar.ts index 744eb68b0b..d957751380 100644 --- a/src/calendar-app/calendar/gui/day-selector/DaySelectorSidebar.ts +++ b/src/calendar-app/calendar/gui/day-selector/DaySelectorSidebar.ts @@ -33,7 +33,7 @@ export class DaySelectorSidebar implements Component { const disableHighlight = !isSameDay(vnode.attrs.selectedDate, this.currentDate) return m( - isDesktop() ? ".plr-m.mt-24" : ".plr-m.mt-8", + isDesktop() ? ".plr-12.mt-24" : ".plr-12.mt-8", m(".elevated-bg.pt-8.pb-12.border-radius.flex.flex-column", [ this.renderPickerHeader(this.currentDate), m(".flex-grow.overflow-hidden", [ diff --git a/src/calendar-app/calendar/gui/eventeditor-view/AttendeeListEditor.ts b/src/calendar-app/calendar/gui/eventeditor-view/AttendeeListEditor.ts index 03a2ff4570..a031b10373 100644 --- a/src/calendar-app/calendar/gui/eventeditor-view/AttendeeListEditor.ts +++ b/src/calendar-app/calendar/gui/eventeditor-view/AttendeeListEditor.ts @@ -163,7 +163,7 @@ export class AttendeeListEditor implements Component { const attendingOptions = createAttendingItems().filter((option) => option.selectable !== false) const attendingStatus = attendingOptions.find((option) => option.value === status) - return m(".flex.flex-column.pl-8.pr-vpad-s", [ + return m(".flex.flex-column.pl-8.pr-8", [ m(Select, { onchange: (option) => { if (option.selectable === false) return @@ -219,7 +219,7 @@ export class AttendeeListEditor implements Component { m("small.uppercase.pb-8.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("organizer_label")), m(Card, { style: { padding: `0` } }, [ m(".flex.flex-column", [ - m(".flex.pl-8.pr-vpad-s", [ + m(".flex.pl-8.pr-8", [ m(Select, { classes: ["flex-grow", "button-min-height"], onchange: (option) => { diff --git a/src/calendar-app/calendar/gui/eventeditor-view/CalendarEventEditView.ts b/src/calendar-app/calendar/gui/eventeditor-view/CalendarEventEditView.ts index 2eae1f4780..752fe1a951 100644 --- a/src/calendar-app/calendar/gui/eventeditor-view/CalendarEventEditView.ts +++ b/src/calendar-app/calendar/gui/eventeditor-view/CalendarEventEditView.ts @@ -322,7 +322,7 @@ export class CalendarEventEditView implements Component this.renderCalendarOptions(option, deepEqual(option.value, selected.value), false), renderDisplay: (option) => this.renderCalendarOptions(option, false, true), ariaLabel: lang.get("calendar_label"), @@ -334,7 +334,7 @@ export class CalendarEventEditView implements Component { return m(".flex", [ m(".flex.col.flex-grow.gap-vpad-s", [ - m(".flex.gap-vpad-s.items-center.pr-vpad-s", [ + m(".flex.gap-vpad-s.items-center.pr-8", [ m(Icon, { icon: Icons.Time, style: { @@ -56,7 +56,7 @@ export class EventTimeEditor implements Component { ]), m(".flex.col.full-width.flex-grow.gap-vpad-s", { style: { paddingLeft: px(size.icon_24 + size.spacing_8) } }, [ m(Divider, { color: theme.outline_variant }), - m(".time-selection-grid.pr-vpad-s", [ + m(".time-selection-grid.pr-8", [ m("", lang.get("dateFrom_label")), m( `${isApp() ? "" : ".pl-32"}`, diff --git a/src/calendar-app/calendar/gui/eventpopup/ContactPreviewView.ts b/src/calendar-app/calendar/gui/eventpopup/ContactPreviewView.ts index 350a6cf118..0609e45967 100644 --- a/src/calendar-app/calendar/gui/eventpopup/ContactPreviewView.ts +++ b/src/calendar-app/calendar/gui/eventpopup/ContactPreviewView.ts @@ -59,7 +59,7 @@ export class ContactPreviewView implements Component { private renderSectionIndicator(icon: AllIcons, style: Record = {}): Children { return m(Icon, { icon, - class: "pr", + class: "pr-12", size: IconSize.PX24, style: Object.assign( { diff --git a/src/calendar-app/calendar/search/CalendarSearchBarOverlay.ts b/src/calendar-app/calendar/search/CalendarSearchBarOverlay.ts index c7f34e950e..b123c5b480 100644 --- a/src/calendar-app/calendar/search/CalendarSearchBarOverlay.ts +++ b/src/calendar-app/calendar/search/CalendarSearchBarOverlay.ts @@ -27,7 +27,7 @@ export class CalendarSearchBarOverlay implements Component { return m( - "li.plr-l.flex-v-center.", + "li.plr-24.flex-v-center.", { style: { height: px(52), @@ -82,7 +82,7 @@ export class CalendarSearchBarOverlay implements Component m(BackgroundColumnLayout, { backgroundColor: theme.surface_container, - classes: this.isTabletView() ? "pr-m pl-8" : "", + classes: this.isTabletView() ? "pr-16 pl-8" : "", columnLayout: m( ".mlr-safe-inset.fill-absolute.content-bg.border-radius-top-left-m.border-radius-top-right-m", { @@ -379,7 +379,7 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi return m( ".flex.col.pl-16.pt-8.pb-8", { - class: styles.isSingleColumnLayout() ? "pr-m" : "pr-vpad-s", + class: styles.isSingleColumnLayout() ? "pr-16" : "pr-8", }, [ m("small.uppercase.pb-8.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.getTranslationText(title)), diff --git a/src/calendar-app/calendar/settings/GlobalSettingsViewer.ts b/src/calendar-app/calendar/settings/GlobalSettingsViewer.ts index 1d54d88621..4bdb3a8ae4 100644 --- a/src/calendar-app/calendar/settings/GlobalSettingsViewer.ts +++ b/src/calendar-app/calendar/settings/GlobalSettingsViewer.ts @@ -33,7 +33,7 @@ export class GlobalSettingsViewer implements UpdatableSettingsViewer { } view(): Children { - return m("#global-settings.fill-absolute.scroll.plr-l", [ + return m("#global-settings.fill-absolute.scroll.plr-24", [ m(AccountMaintenanceSettings, { customerServerProperties: this.props, setOnUpdateHandler: (fn: AccountMaintenanceUpdateNotifier) => { diff --git a/src/calendar-app/calendar/settings/NotificationSettingsViewer.ts b/src/calendar-app/calendar/settings/NotificationSettingsViewer.ts index abda91ea8c..489471db47 100644 --- a/src/calendar-app/calendar/settings/NotificationSettingsViewer.ts +++ b/src/calendar-app/calendar/settings/NotificationSettingsViewer.ts @@ -60,7 +60,7 @@ export class NotificationSettingsViewer implements UpdatableSettingsViewer { }) .sort((l, r) => +r.attrs.current - +l.attrs.current) - return m(".fill-absolute.scroll.plr-l.pb-48", [ + return m(".fill-absolute.scroll.plr-24.pb-48", [ m(".flex.col", [ m(".flex-space-between.items-center.mt-32.mb-8", [m(".h4", lang.get("notificationSettings_action"))]), m(NotificationTargetsList, { rowAdd: null, rows, onExpandedChange: this.expanded } satisfies NotificationTargetsListAttrs), diff --git a/src/calendar-app/calendar/view/CalendarDesktopToolbar.ts b/src/calendar-app/calendar/view/CalendarDesktopToolbar.ts index 8dfadb2bb1..eb8ad8f8ea 100644 --- a/src/calendar-app/calendar/view/CalendarDesktopToolbar.ts +++ b/src/calendar-app/calendar/view/CalendarDesktopToolbar.ts @@ -18,7 +18,7 @@ export class CalendarDesktopToolbar implements Component): Children { const { navConfig } = attrs return m( - ".flex.row.items-center.content-bg.border-radius-big.mlr-24.rel.pr.pl-16", + ".flex.row.items-center.content-bg.border-radius-big.mlr-24.rel.pr-12.pl-16", { style: { marginLeft: `5px`, diff --git a/src/calendar-app/calendar/view/CalendarView.ts b/src/calendar-app/calendar/view/CalendarView.ts index 4ea2a5c90e..e1b560a7be 100644 --- a/src/calendar-app/calendar/view/CalendarView.ts +++ b/src/calendar-app/calendar/view/CalendarView.ts @@ -1058,7 +1058,7 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView { view({ attrs }: Vnode) { this.model = attrs.eventPreviewModel - return m(".content-bg.border-radius-big.pl-24.pb-8.flex.pr", [ + return m(".content-bg.border-radius-big.pl-24.pb-8.flex.pr-12", [ m( ".flex-grow.scroll.visible-scrollbar", { diff --git a/src/calendar-app/calendar/view/MultiDayCalendarView.ts b/src/calendar-app/calendar/view/MultiDayCalendarView.ts index ffb6654781..95569dcb8f 100644 --- a/src/calendar-app/calendar/view/MultiDayCalendarView.ts +++ b/src/calendar-app/calendar/view/MultiDayCalendarView.ts @@ -332,7 +332,7 @@ export class MultiDayCalendarView implements Component { }) : null, onclick: attrs.click, - class: `flex justify-start full-width gap-vpad pl-16 pr-m items-center`, + class: `flex justify-start full-width gap-vpad pl-16 pr-16 items-center`, }, m(Icon, { icon: Icons.ArrowForward, diff --git a/src/common/calendar/gui/CalendarImporter.ts b/src/common/calendar/gui/CalendarImporter.ts index d774a23efe..9797338ba2 100644 --- a/src/common/calendar/gui/CalendarImporter.ts +++ b/src/common/calendar/gui/CalendarImporter.ts @@ -86,7 +86,7 @@ export function showEventsImportDialog(events: CalendarEvent[], okAction: (dialo ], }), /** 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( ".flex.col.rel.mt-8", { @@ -179,7 +179,7 @@ export function calendarSelectionDialog( ], }), - m(".dialog-max-height.plr-l.pt-16.pb-16.text-break.scroll", [ + m(".dialog-max-height.plr-24.pt-16.pb-16.text-break.scroll", [ m(".text-break.selectable", lang.get("calendarImportSelection_label")), m(DropDownSelector, { label: "calendar_label", diff --git a/src/common/calendar/gui/TimeView.ts b/src/common/calendar/gui/TimeView.ts index 253ff7c521..fdaa4298a0 100644 --- a/src/common/calendar/gui/TimeView.ts +++ b/src/common/calendar/gui/TimeView.ts @@ -174,7 +174,7 @@ export class TimeView implements Component { }, times.map((time, index) => m( - ".flex.ptb-button-double.small.pr-vpad-s.border-right.rel.items-center", + ".flex.ptb-16.small.pr-8.border-right.rel.items-center", { class: index !== times.length - 1 ? "after-as-border-bottom" : "", }, diff --git a/src/common/desktop/mailimport/MailImporter.ts b/src/common/desktop/mailimport/MailImporter.ts index 89f4931ed7..08c3a0dd67 100644 --- a/src/common/desktop/mailimport/MailImporter.ts +++ b/src/common/desktop/mailimport/MailImporter.ts @@ -41,7 +41,7 @@ export function folderSelectionDialog(indentedFolders: IndentedFolder[], okActio ], }), - m(".dialog-max-height.plr-l.pt-16.pb-16.text-break.scroll", [ + m(".dialog-max-height.plr-24.pt-16.pb-16.text-break.scroll", [ m(".text-break.selectable", lang.get("mailImportSelection_label")), m(DropDownSelector, { label: "mailFolder_label", diff --git a/src/common/gui/AttachmentBubble.ts b/src/common/gui/AttachmentBubble.ts index e5b8943dc0..2f61bec050 100644 --- a/src/common/gui/AttachmentBubble.ts +++ b/src/common/gui/AttachmentBubble.ts @@ -193,14 +193,14 @@ export class AttachmentDetailsPopup implements ModalComponent { // It is somewhat harder as it looks different with mobile layout. const { remove, open, download, attachment, fileImport, type } = this.attrs return m( - ".flex.mb-8.pr", + ".flex.mb-8.pr-12", { oncreate: (vnode) => (this.domContent = vnode.dom as HTMLElement), }, [ m(Icon, { icon: getAttachmentIcon(type), - class: "pr-s flex items-center", + class: "pr-4 flex items-center", style: { fill: theme.on_surface, "background-color": "initial", diff --git a/src/common/gui/DesktopToolbars.ts b/src/common/gui/DesktopToolbars.ts index ebc1350993..747ceae0e2 100644 --- a/src/common/gui/DesktopToolbars.ts +++ b/src/common/gui/DesktopToolbars.ts @@ -37,7 +37,7 @@ export const DesktopViewerToolbar = pureComponent((__, children) => { }, }, m( - ".flex.list-bg.pt-4.pb-4.plr-m", + ".flex.list-bg.pt-4.pb-4.plr-12", { style: { "border-radius": `0 ${size.radius_8}px ${size.radius_8}px 0`, diff --git a/src/common/gui/FolderColumnView.ts b/src/common/gui/FolderColumnView.ts index bbee6db900..1794daf9cd 100644 --- a/src/common/gui/FolderColumnView.ts +++ b/src/common/gui/FolderColumnView.ts @@ -27,7 +27,7 @@ export class FolderColumnView implements Component { private renderMainButton(attrs: Attrs): Children { if (attrs.button) { - return m(".plr-button-double.scrollbar-gutter-stable-or-fallback", m(MainCreateButton, { label: attrs.button.label, click: attrs.button.click })) + return m(".plr-16.scrollbar-gutter-stable-or-fallback", m(MainCreateButton, { label: attrs.button.label, click: attrs.button.click })) } else { return null } diff --git a/src/common/gui/MobileActionBar.ts b/src/common/gui/MobileActionBar.ts index ff2108d37a..a418f4ce1e 100644 --- a/src/common/gui/MobileActionBar.ts +++ b/src/common/gui/MobileActionBar.ts @@ -18,7 +18,7 @@ export class MobileActionBar implements Component { const { attrs } = vnode return m( - ".bottom-nav.bottom-action-bar.flex.items-center.plr-l", + ".bottom-nav.bottom-action-bar.flex.items-center.plr-24", { style: { justifyContent: "space-around", diff --git a/src/common/gui/MobileBottomActionBar.ts b/src/common/gui/MobileBottomActionBar.ts index 4efd4ae0e1..b164d638e9 100644 --- a/src/common/gui/MobileBottomActionBar.ts +++ b/src/common/gui/MobileBottomActionBar.ts @@ -3,5 +3,5 @@ import m from "mithril" /** A layout that is used instead of bottom navigation in some situations. */ export const MobileBottomActionBar = pureComponent((_, children) => { - return m(".bottom-nav.flex.items-center.plr-l.justify-between", children) + return m(".bottom-nav.flex.items-center.plr-24.justify-between", children) }) diff --git a/src/common/gui/SelectableRowContainer.ts b/src/common/gui/SelectableRowContainer.ts index 35e07f0e46..8b0c532611 100644 --- a/src/common/gui/SelectableRowContainer.ts +++ b/src/common/gui/SelectableRowContainer.ts @@ -20,7 +20,7 @@ export class SelectableRowContainer implements ClassComponent) { return m( - ".flex.mb-4.border-radius.pt-12.pb-12.pl-12.pr.ml-8", + ".flex.mb-4.border-radius.pt-12.pb-12.pl-12.pr-12.ml-8", { style: { paddingTop: "12px", diff --git a/src/common/gui/SidebarSection.ts b/src/common/gui/SidebarSection.ts index b203ac1547..396b87633c 100644 --- a/src/common/gui/SidebarSection.ts +++ b/src/common/gui/SidebarSection.ts @@ -29,8 +29,8 @@ export class SidebarSection implements Component { }, }, [ - m(".folder-row.flex-space-between.plr-button.pt-8.button-height", [ - m("small.b.align-self-center.text-ellipsis.plr-button", lang.getTranslationText(name).toLocaleUpperCase()), + m(".folder-row.flex-space-between.plr-8.pt-8.button-height", [ + m("small.b.align-self-center.text-ellipsis.plr-8", lang.getTranslationText(name).toLocaleUpperCase()), button ?? null, ]), content, diff --git a/src/common/gui/base/Badge.ts b/src/common/gui/base/Badge.ts index 25e2c1c288..f56bc9fbb5 100644 --- a/src/common/gui/base/Badge.ts +++ b/src/common/gui/base/Badge.ts @@ -5,6 +5,6 @@ type BadgeAttrs = { } export default class Badge implements Component { view(vnode: Vnode): Children { - return m(".teamLabel.pl-4.pr-s.border-radius.no-wrap" + (vnode.attrs.classes || ""), vnode.children) + return m(".teamLabel.pl-4.pr-4.border-radius.no-wrap" + (vnode.attrs.classes || ""), vnode.children) } } diff --git a/src/common/gui/base/BaseSearchBar.ts b/src/common/gui/base/BaseSearchBar.ts index f383692450..4628da8cb6 100644 --- a/src/common/gui/base/BaseSearchBar.ts +++ b/src/common/gui/base/BaseSearchBar.ts @@ -33,7 +33,7 @@ export class BaseSearchBar implements ClassComponent { view({ attrs }: Vnode) { return m( - ".flex-end.items-center.border-radius.plr-s.pt-4.pb-4.search-bar.flex-grow.click", + ".flex-end.items-center.border-radius.plr-4.pt-4.pb-4.search-bar.flex-grow.click", { focused: String(this.isFocused), ...landmarkAttrs(AriaLandmarks.Search), diff --git a/src/common/gui/base/Button.ts b/src/common/gui/base/Button.ts index e3622000ba..21508e0729 100644 --- a/src/common/gui/base/Button.ts +++ b/src/common/gui/base/Button.ts @@ -114,7 +114,7 @@ export class Button implements ClassComponent { classes.push("b") } else { if (!inline) { - classes.push("plr-button") + classes.push("plr-8") classes.push("button-content") } } diff --git a/src/common/gui/base/Dialog.ts b/src/common/gui/base/Dialog.ts index 3a4f197001..1988768443 100644 --- a/src/common/gui/base/Dialog.ts +++ b/src/common/gui/base/Dialog.ts @@ -620,7 +620,7 @@ export class Dialog implements ModalComponent { const dialog = new Dialog(DialogType.Alert, { view: () => - m(".flex.flex-column.pl-24.pr-l.pb-8", [ + m(".flex.flex-column.pl-24.pr-24.pb-8", [ m("#dialog-message.dialog-max-height.text-break.text-prewrap.selectable.scroll", getContent()), buttonAttrs.length === 0 ? null @@ -688,7 +688,7 @@ export class Dialog implements ModalComponent { middle: lang.makeTranslation("title", title()), } saveDialog = new Dialog(DialogType.EditMedium, { - view: () => m("", [m(DialogHeaderBar, actionBarAttrs), m(".plr-l.pb-16.text-break", m(child))]), + view: () => m("", [m(DialogHeaderBar, actionBarAttrs), m(".plr-24.pb-16.text-break", m(child))]), }) .setCloseHandler(closeAction) .show() @@ -709,7 +709,7 @@ export class Dialog implements ModalComponent { dialog = new Dialog(DialogType.EditMedium, { view: () => m( - ".plr-l", + ".plr-24", m(ImageWithOptionsDialog, { image: `${window.tutao.appState.prefixWithoutFile}/images/update/update_needed_illu_${ client.isCalendarApp() ? "calendar" : "mail" @@ -813,7 +813,7 @@ export class Dialog implements ModalComponent { dialog = new Dialog(DialogType.EditMedium, { view: () => m( - ".plr-2l", + ".plr-48", m(ImageWithOptionsDialog, { image: `${window.tutao.appState.prefixWithoutFile}/images/newsletter-unsubscribe/unsubscribe_${success ? "success" : "failure"}_${getUnsubscribeImageSuffix(theme.themeId)}.svg`, titleText: success ? "unsubscribeSuccessful_title" : "unsubscribeFailed_title", @@ -918,7 +918,7 @@ export class Dialog implements ModalComponent { dialog = new Dialog(type, { view: () => [ m(DialogHeaderBar, actionBarAttrs), - m(".dialog-max-height.plr-l.pb-16.text-break.scroll", ["function" === typeof child ? child() : m(child)]), + m(".dialog-max-height.plr-24.pb-16.text-break.scroll", ["function" === typeof child ? child() : m(child)]), ], }).setCloseHandler(doCancel) dialog.addShortcut({ @@ -1066,7 +1066,7 @@ export class Dialog implements ModalComponent { static largeDialog(headerBarAttrs: DialogHeaderBarAttrs, child: Component): Dialog { return new Dialog(DialogType.EditLarge, { view: () => { - return m("", [m(DialogHeaderBar, headerBarAttrs), m(".dialog-container.scroll", m(".fill-absolute.plr-l", m(child)))]) + return m("", [m(DialogHeaderBar, headerBarAttrs), m(".dialog-container.scroll", m(".fill-absolute.plr-24", m(child)))]) }, }) } @@ -1078,7 +1078,7 @@ export class Dialog implements ModalComponent { /** fixed-height header with a title, left and right buttons that's fixed to the top of the dialog's area */ headerBarAttrs.noHeader ? null : m(DialogHeaderBar, headerBarAttrs), /** variable-size child container that may be scrollable. */ - m(".dialog-container.scroll.hide-outline", m(".fill-absolute.plr-l", m(child, childAttrs))), + m(".dialog-container.scroll.hide-outline", m(".fill-absolute.plr-24", m(child, childAttrs))), ]), }) } @@ -1095,7 +1095,7 @@ export class Dialog implements ModalComponent { /** fixed-height header with a title, left and right buttons that's fixed to the top of the dialog's area */ headerBarAttrs.noHeader ? null : m(DialogHeaderBar, headerBarAttrs), /** variable-size child container that may be scrollable. */ - m(".scroll.hide-outline.plr-l.flex-grow", { style: { "overflow-x": "hidden" } }, m(child, childAttrs)), + m(".scroll.hide-outline.plr-24.flex-grow", { style: { "overflow-x": "hidden" } }, m(child, childAttrs)), ]), }) } @@ -1106,7 +1106,7 @@ export class Dialog implements ModalComponent { /** fixed-height header with a title, left and right buttons that's fixed to the top of the dialog's area */ headerBarAttrs.noHeader ? null : m(DialogHeaderBar, headerBarAttrs), /** variable-size child container that may be scrollable. */ - m(".scroll.hide-outline.plr-l", child()), + m(".scroll.hide-outline.plr-24", child()), ], }) } diff --git a/src/common/gui/base/DialogHeaderBar.ts b/src/common/gui/base/DialogHeaderBar.ts index 1a4c88f7d3..97fada0691 100644 --- a/src/common/gui/base/DialogHeaderBar.ts +++ b/src/common/gui/base/DialogHeaderBar.ts @@ -30,7 +30,7 @@ export class DialogHeaderBar implements Component { ) let columnClass = a.middle ? ".flex-third.overflow-hidden" : ".flex-half.overflow-hidden" return m( - ".dialog-header.plr-l.flex-space-between.dialog-header-line-height", + ".dialog-header.plr-24.flex-space-between.dialog-header-line-height", { oncreate: ({ dom }) => { if (a.create) a.create(dom as HTMLElement) diff --git a/src/common/gui/base/DialogInjectionRight.ts b/src/common/gui/base/DialogInjectionRight.ts index 1bc7455be0..74984a7360 100644 --- a/src/common/gui/base/DialogInjectionRight.ts +++ b/src/common/gui/base/DialogInjectionRight.ts @@ -23,7 +23,7 @@ export class DialogInjectionRight implements Component { return this.isFilterable ? m( - "input.input.dropdown-bar.elevated-bg.doNotClose.button-height.button-min-height.pr-s", + "input.input.dropdown-bar.elevated-bg.doNotClose.button-height.button-min-height.pr-4", { placeholder: lang.get("typeToFilter_label"), oncreate: (vnode) => { diff --git a/src/common/gui/base/FilterChip.ts b/src/common/gui/base/FilterChip.ts index 3f1765e7ba..b058a924be 100644 --- a/src/common/gui/base/FilterChip.ts +++ b/src/common/gui/base/FilterChip.ts @@ -26,9 +26,9 @@ export class FilterChip implements Component { selectors += ".pl-16" } if (chevron) { - selectors += ".pr-vpad-s" + selectors += ".pr-8" } else { - selectors += ".pr-vpad-m" + selectors += ".pr-16" } const contentColor = selected ? theme.on_secondary_container : theme.on_surface diff --git a/src/common/gui/base/GuiUtils.ts b/src/common/gui/base/GuiUtils.ts index 79b9d9cbb6..08d8ea22f0 100644 --- a/src/common/gui/base/GuiUtils.ts +++ b/src/common/gui/base/GuiUtils.ts @@ -221,7 +221,7 @@ export function renderTwoColumnsIfFits(left: Children, right: Children): Childre if (client.isMobileDevice()) { return m(".flex.col", [m(".flex", left), m(".flex", right)]) } else { - return m(".flex", [m(".flex.flex-half.pr-s", left), m(".flex.flex-half.pl-4", right)]) + return m(".flex", [m(".flex.flex-half.pr-4", left), m(".flex.flex-half.pl-4", right)]) } } diff --git a/src/common/gui/base/InfoBanner.ts b/src/common/gui/base/InfoBanner.ts index 8bfaf3ed21..52a3eea97d 100644 --- a/src/common/gui/base/InfoBanner.ts +++ b/src/common/gui/base/InfoBanner.ts @@ -43,7 +43,7 @@ export class InfoBanner implements Component { } : undefined return m( - ".center-vertically.border-bottom.pr-s.pl-12.border-radius.mt-4", + ".center-vertically.border-bottom.pr-4.pl-12.border-radius.mt-4", { style: { border: `solid 2px ${type === BannerType.Warning ? theme.warning : theme.outline}`, diff --git a/src/common/gui/base/List.ts b/src/common/gui/base/List.ts index 4afc115781..ed6b1ea547 100644 --- a/src/common/gui/base/List.ts +++ b/src/common/gui/base/List.ts @@ -492,7 +492,7 @@ export class List> implements ClassComponent> implements ClassComponent (this.domSwipeSpacerLeft = vnode.dom as HTMLElement), tabindex: TabIndex.Programmatic, diff --git a/src/common/gui/base/MultiSelectionBar.ts b/src/common/gui/base/MultiSelectionBar.ts index 8a7b22fdc7..8957961a7d 100644 --- a/src/common/gui/base/MultiSelectionBar.ts +++ b/src/common/gui/base/MultiSelectionBar.ts @@ -10,7 +10,7 @@ interface MultiSelectionBarAttrs { export class MultiSelectionBar { view(vnode: Vnode): Children { return m( - ".flex.items-center.justify-between.pl-4.pr-s", + ".flex.items-center.justify-between.pl-4.pr-4", { style: { height: "100%", diff --git a/src/common/gui/base/NavBar.ts b/src/common/gui/base/NavBar.ts index 5e09d57fc2..32936a0f5b 100644 --- a/src/common/gui/base/NavBar.ts +++ b/src/common/gui/base/NavBar.ts @@ -10,7 +10,7 @@ export class NavBar implements Component { return m( "nav.nav-bar.flex-end", landmarkAttrs(AriaLandmarks.Navigation, "top"), - (children as Array).map((child) => m(".plr-nav-button", child)), + (children as Array).map((child) => m(".plr-8", child)), ) } } diff --git a/src/common/gui/base/NavButton.ts b/src/common/gui/base/NavButton.ts index 2f0d655dd6..4e183a433a 100644 --- a/src/common/gui/base/NavButton.ts +++ b/src/common/gui/base/NavButton.ts @@ -83,7 +83,7 @@ export class NavButton implements Component { _getNavButtonClass(a: NavButtonAttrs): string { return ( - "a.nav-button.noselect.items-center.click.plr-button.no-text-decoration.button-height.border-radius" + + "a.nav-button.noselect.items-center.click.plr-8.no-text-decoration.button-height.border-radius" + (a.vertical ? ".col" : "") + (!a.centred ? ".flex-start" : ".flex-center") + (a.disableHoverBackground ? "" : ".state-bg") + diff --git a/src/common/gui/base/RadioSelector.ts b/src/common/gui/base/RadioSelector.ts index a91390f741..23fd5de3ff 100644 --- a/src/common/gui/base/RadioSelector.ts +++ b/src/common/gui/base/RadioSelector.ts @@ -42,7 +42,7 @@ export class RadioSelector implements Component> { // The wrapper is needed because is self-closing and will not take the label as a child return m( - ".state-bg.border.border-radius.flex.items-center.mb-16.pl-24.pr", + ".state-bg.border.border-radius.flex.items-center.mb-16.pl-24.pr-12", { // Make the option the same size as a button if a description is not given class: "button-min-width button-min-height" + attrClasses, diff --git a/src/common/gui/base/SidebarSectionRow.ts b/src/common/gui/base/SidebarSectionRow.ts index d95eecaf45..ec923fa6ab 100644 --- a/src/common/gui/base/SidebarSectionRow.ts +++ b/src/common/gui/base/SidebarSectionRow.ts @@ -68,7 +68,7 @@ export class SidebarSectionRow implements Component { [ // we render icon on our own to be able to override the color and to control the padding m( - ".button-height.flex.items-center.plr-button", + ".button-height.flex.items-center.plr-8", m(Icon, { icon: attrs.icon, size: IconSize.PX24, diff --git a/src/common/gui/base/Table.ts b/src/common/gui/base/Table.ts index 15eb98b9ce..c303a65c8e 100644 --- a/src/common/gui/base/Table.ts +++ b/src/common/gui/base/Table.ts @@ -123,7 +123,7 @@ export class Table implements Component { "", { class: useHelpButton ? "flex items-center height-100p full-width" : "" }, m( - ".text-ellipsis.pr.pt-8" + + ".text-ellipsis.pr-12.pt-8" + (bold ? ".b" : "") + (cellTextData.click ? ".click" : "" + (cellTextData.mainStyle ? cellTextData.mainStyle : "")) + (columnAlignments[index] ? ".right" : ""), @@ -146,7 +146,7 @@ export class Table implements Component { } else { cells = lineAttrs.cells.map((text, index) => m( - "td.text-ellipsis.pr.pt-8.pb-8." + columnWidths[index] + (bold ? ".b" : "") + (columnAlignments[index] ? ".right" : ""), + "td.text-ellipsis.pr-12.pt-8.pb-8." + columnWidths[index] + (bold ? ".b" : "") + (columnAlignments[index] ? ".right" : ""), { title: text, // show the text as tooltip, so ellipsed lines can be shown }, @@ -182,7 +182,7 @@ export class Table implements Component { return m(InfoIcon, { text: info.join("\n") }) } else { return m( - ".small.text-ellipsis.pr" + (cellTextData.click ? ".click" : ""), + ".small.text-ellipsis.pr-12" + (cellTextData.click ? ".click" : ""), { onclick: cellTextData.click ? (event: MouseEvent) => { diff --git a/src/common/gui/base/TextDisplayArea.ts b/src/common/gui/base/TextDisplayArea.ts index 13df3a84a7..6888a07026 100644 --- a/src/common/gui/base/TextDisplayArea.ts +++ b/src/common/gui/base/TextDisplayArea.ts @@ -17,7 +17,7 @@ export class TextDisplayArea implements Component { view(vnode: Vnode): Children { return m(".flex.flex-grow.flex-column.text.pt-16", [ m( - "label.text-ellipsis.noselect.z1.i.pr-s", + "label.text-ellipsis.noselect.z1.i.pr-4", { style: { fontSize: px(font_size.small), diff --git a/src/common/gui/base/TextField.ts b/src/common/gui/base/TextField.ts index 076b549d14..38cab668dd 100644 --- a/src/common/gui/base/TextField.ts +++ b/src/common/gui/base/TextField.ts @@ -125,7 +125,7 @@ export class TextField implements ClassComponent { }, [ m( - "label.abs.text-ellipsis.noselect.z1.i.pr-s", + "label.abs.text-ellipsis.noselect.z1.i.pr-4", { "aria-hidden": "true", class: this.active ? "content-accent-fg" : "" + " " + getOperatingClasses(a.disabled), diff --git a/src/common/gui/base/WizardDialog.ts b/src/common/gui/base/WizardDialog.ts index 44dc871318..a4018c288b 100644 --- a/src/common/gui/base/WizardDialog.ts +++ b/src/common/gui/base/WizardDialog.ts @@ -147,7 +147,7 @@ class WizardDialog implements Component> { a.currentPage && a.currentPage.attrs.hideAllPagingButtons ? null : m( - "nav#wizard-paging.flex-space-around.center-vertically.mb-8.plr-2l", + "nav#wizard-paging.flex-space-around.center-vertically.mb-8.plr-48", { "aria-label": "Breadcrumb", }, diff --git a/src/common/gui/base/buttons/BubbleButton.ts b/src/common/gui/base/buttons/BubbleButton.ts index 028bcd4473..2cd77f46a2 100644 --- a/src/common/gui/base/buttons/BubbleButton.ts +++ b/src/common/gui/base/buttons/BubbleButton.ts @@ -22,7 +22,7 @@ export function usingMobileBubbleButton() { } export function bubbleButtonPadding(): string { - return usingMobileBubbleButton() ? "plr-button-double" : "plr-button" + return usingMobileBubbleButton() ? "plr-16" : "plr-8" } /** diff --git a/src/common/gui/base/buttons/LoginButton.ts b/src/common/gui/base/buttons/LoginButton.ts index af3ab53a70..1492ae4877 100644 --- a/src/common/gui/base/buttons/LoginButton.ts +++ b/src/common/gui/base/buttons/LoginButton.ts @@ -45,9 +45,9 @@ export class LoginButton implements Component { } if (attrs.type === LoginButtonType.FlexWidth) { - classes.push("plr-2l") + classes.push("plr-48") } else { - classes.push("full-width plr-button") + classes.push("full-width plr-8") } return classes diff --git a/src/common/gui/base/buttons/OutlineButton.ts b/src/common/gui/base/buttons/OutlineButton.ts index 8062ddf40d..ff4175da7a 100644 --- a/src/common/gui/base/buttons/OutlineButton.ts +++ b/src/common/gui/base/buttons/OutlineButton.ts @@ -42,7 +42,7 @@ export class OutlineButton implements ClassComponent { "button-content", "border-accent", "border-radius", - "plr-button", + "plr-8", "limit-width", "noselect", "bg-transparent", diff --git a/src/common/gui/base/buttons/RowButton.ts b/src/common/gui/base/buttons/RowButton.ts index 1be7971c88..812cfd09fa 100644 --- a/src/common/gui/base/buttons/RowButton.ts +++ b/src/common/gui/base/buttons/RowButton.ts @@ -29,7 +29,7 @@ export class RowButton implements Component { return m(BaseButton, { label: attrs.label, text: m( - ".plr-button.text-ellipsis", + ".plr-8.text-ellipsis", { style: { color }, // When the label doesn't match content, screen readers read both @@ -51,7 +51,7 @@ export class RowButton implements Component { : attrs.icon === "none" ? m(".icon-24.mr-8") : null, - class: "flex items-center state-bg button-content plr-button " + attrs.class, + class: "flex items-center state-bg button-content plr-8 " + attrs.class, style: { ...attrs.style, color, diff --git a/src/common/gui/base/colorPicker/ColorPickerView.ts b/src/common/gui/base/colorPicker/ColorPickerView.ts index d2c8438cb7..bc095fe3a0 100644 --- a/src/common/gui/base/colorPicker/ColorPickerView.ts +++ b/src/common/gui/base/colorPicker/ColorPickerView.ts @@ -73,7 +73,7 @@ export class ColorPickerView implements Component { return m(".color-picker", [ this.renderHuePicker(attrs.onselect), m( - ".flex.wrap.full-width.items-center.justify-between.p0.plr-s", + ".flex.wrap.full-width.items-center.justify-between.p0.plr-4", { style: { rowGap: px(size.spacing_4), @@ -87,7 +87,7 @@ export class ColorPickerView implements Component { selectedColor: attrs.value, onselect: attrs.onselect, // add right divider to first color option - className: i === 0 ? ".pr-vpad-s.mr-4" : undefined, + className: i === 0 ? ".pr-8.mr-4" : undefined, style: i === 0 ? { diff --git a/src/common/gui/cards.ts b/src/common/gui/cards.ts index 62827dd922..5161b5efd7 100644 --- a/src/common/gui/cards.ts +++ b/src/common/gui/cards.ts @@ -5,5 +5,5 @@ export function responsiveCardHMargin() { } export function responsiveCardHPadding() { - return styles.isSingleColumnLayout() ? "plr-8" : "plr-l" + return styles.isSingleColumnLayout() ? "plr-8" : "plr-24" } diff --git a/src/common/gui/dialogs/SelectCredentialsEncryptionModeDialog.ts b/src/common/gui/dialogs/SelectCredentialsEncryptionModeDialog.ts index 619ddea168..c01c394818 100644 --- a/src/common/gui/dialogs/SelectCredentialsEncryptionModeDialog.ts +++ b/src/common/gui/dialogs/SelectCredentialsEncryptionModeDialog.ts @@ -55,7 +55,7 @@ class CredentialEncryptionMethodDialog { }) : null, m(SelectCredentialsEncryptionModeView, { - class: "scroll pt-16 plr-l height-100p", + class: "scroll pt-16 plr-24 height-100p", error: this.error, onConfirm: (mode) => this.onModeSelected(mode), supportedModes: this.supportedModes, diff --git a/src/common/gui/editor/HtmlEditor.ts b/src/common/gui/editor/HtmlEditor.ts index 2da0bc8d8e..827a424512 100644 --- a/src/common/gui/editor/HtmlEditor.ts +++ b/src/common/gui/editor/HtmlEditor.ts @@ -65,7 +65,7 @@ export class HtmlEditor implements Component { const getPlaceholder = () => !this.active && this.isEmpty() ? m( - ".abs.text-ellipsis.noselect.z1.i.pr-s", + ".abs.text-ellipsis.noselect.z1.i.pr-4", { oncreate: (vnode) => (this.placeholderDomElement = vnode.dom as HTMLElement), onclick: () => diff --git a/src/common/gui/main-styles.ts b/src/common/gui/main-styles.ts index b7a3838ec3..824aeb9fd8 100644 --- a/src/common/gui/main-styles.ts +++ b/src/common/gui/main-styles.ts @@ -487,24 +487,21 @@ styles.registerStyle("main", () => { ".pl-32": { "padding-left": px(size.spacing_32), }, - ".pr": { + ".pr-12": { "padding-right": px(size.spacing_12), }, - ".pr-s": { + ".pr-4": { "padding-right": px(size.spacing_4), }, - ".pr-vpad-s": { + ".pr-8": { "padding-right": px(size.spacing_8), }, - ".pr-vpad-m": { + ".pr-16": { "padding-right": px(size.spacing_16), }, - ".pr-vpad-l": { + ".pr-32": { "padding-right": px(size.spacing_32), }, - ".pr-m": { - "padding-right": px(size.spacing_16), - }, ".plr": { "padding-left": px(size.spacing_12), "padding-right": px(size.spacing_12), @@ -513,54 +510,37 @@ styles.registerStyle("main", () => { "padding-left": px(size.spacing_8), "padding-right": px(size.spacing_8), }, - ".plr-vpad": { + ".plr-16": { "padding-left": px(size.spacing_16), "padding-right": px(size.spacing_16), }, - ".plr-s": { + ".plr-4": { "padding-left": px(size.spacing_4), "padding-right": px(size.spacing_4), }, - ".plr-sm": { - "padding-left": px(6), - "padding-right": px(6), - }, - ".plr-m": { + ".plr-12": { "padding-left": px(size.spacing_12), "padding-right": px(size.spacing_12), }, - // p-l will be overwritten in media query mobile - ".plr-l": { + ".plr-24": { "padding-left": px(size.spacing_24), "padding-right": px(size.spacing_24), }, - ".plr-2l": { - "padding-left": px(size.spacing_24 * 2), - "padding-right": px(size.spacing_24 * 2), + ".plr-48": { + "padding-left": px(size.spacing_48), + "padding-right": px(size.spacing_48), }, - ".ptb-button-double": { - "padding-top": px(size.spacing_8 * 2), - "padding-bottom": px(size.spacing_8 * 2), + ".ptb-16": { + "padding-top": px(size.spacing_16), + "padding-bottom": px(size.spacing_16), }, ".pl-24": { "padding-left": px(size.spacing_24), }, - ".pr-l": { + ".pr-24": { "padding-right": px(size.spacing_24), }, - ".plr-button": { - "padding-left": px(size.spacing_8), - "padding-right": px(size.spacing_8), - }, - ".plr-button-double": { - "padding-left": px(size.spacing_8 * 2), - "padding-right": px(size.spacing_8 * 2), - }, - ".plr-nav-button": { - "padding-left": px(size.spacing_8), - "padding-right": px(size.spacing_8), - }, - ".pl-button": { + ".pl-8": { "padding-left": px(size.spacing_8), }, ".mt-negative-8": { diff --git a/src/common/login/LoginView.ts b/src/common/login/LoginView.ts index b9b3892de2..fca131df44 100644 --- a/src/common/login/LoginView.ts +++ b/src/common/login/LoginView.ts @@ -98,7 +98,7 @@ export class LoginView extends BaseTopLevelView implements TopLevelView { @@ -109,7 +109,7 @@ export class LoginView extends BaseTopLevelView implements TopLevelView { const newsListItem = vnode.attrs.liveNewsListItems[liveNewsId.newsItemName] return m( - ".pt-16.pl-24.pr-l.flex.fill.border-grey.left.list-border-bottom", + ".pt-16.pl-24.pr-24.flex.fill.border-grey.left.list-border-bottom", { key: liveNewsId.newsItemId }, newsListItem.render(liveNewsId, vnode.attrs.dialog), ) diff --git a/src/common/native/main/SelectAppLockMethodDialog.ts b/src/common/native/main/SelectAppLockMethodDialog.ts index 7212a91c44..c9592a01ec 100644 --- a/src/common/native/main/SelectAppLockMethodDialog.ts +++ b/src/common/native/main/SelectAppLockMethodDialog.ts @@ -39,7 +39,7 @@ class AppLockMethodDialog { return m("", [ null, m(SelectAppLockMethodView, { - class: "scroll pt-16 plr-l height-100p", + class: "scroll pt-16 plr-24 height-100p", error: this.error, onConfirm: (mode) => this.onMethodSelected(mode), supportedModes: this.supportedModes, diff --git a/src/common/settings/AffiliateKpisViewer.ts b/src/common/settings/AffiliateKpisViewer.ts index e0a5727dc6..532cc0bd32 100644 --- a/src/common/settings/AffiliateKpisViewer.ts +++ b/src/common/settings/AffiliateKpisViewer.ts @@ -17,7 +17,7 @@ export class AffiliateKpisViewer implements UpdatableSettingsDetailsViewer { return m( ListColumnWrapper, m( - ".flex.flex-column.fill-absolute.plr-l", + ".flex.flex-column.fill-absolute.plr-24", m("h4.mt-32", "KPIs"), m( ".overflow-auto.pt-8", diff --git a/src/common/settings/AffiliateSettingsViewer.ts b/src/common/settings/AffiliateSettingsViewer.ts index e2cc4bde46..8a1d87699c 100644 --- a/src/common/settings/AffiliateSettingsViewer.ts +++ b/src/common/settings/AffiliateSettingsViewer.ts @@ -48,7 +48,7 @@ export class AffiliateSettingsViewer implements UpdatableSettingsViewer { return m( ListColumnWrapper, m( - "section.fill-absolute.scroll.plr-l", + "section.fill-absolute.scroll.plr-24", m("h4.mt-32", lang.get("affiliateSettings_label")), m(TextField, { isReadOnly: true, diff --git a/src/common/settings/AppearanceSettingsViewer.ts b/src/common/settings/AppearanceSettingsViewer.ts index 7ff09ecac5..a62c3ad8c4 100644 --- a/src/common/settings/AppearanceSettingsViewer.ts +++ b/src/common/settings/AppearanceSettingsViewer.ts @@ -126,7 +126,7 @@ export class AppearanceSettingsViewer implements UpdatableSettingsViewer { locator.entityClient.update(userSettingsGroupRoot).catch(ofClass(LockedError, noOp)) }, } - return m(".fill-absolute.scroll.plr-l.pb-48", [ + return m(".fill-absolute.scroll.plr-24.pb-48", [ m(".h4.mt-32", lang.get("settingsForDevice_label")), m(DropDownSelector, languageDropDownAttrs), this._renderThemeSelector(), diff --git a/src/common/settings/IdentifierRow.ts b/src/common/settings/IdentifierRow.ts index 5b37670c13..ede5c66240 100644 --- a/src/common/settings/IdentifierRow.ts +++ b/src/common/settings/IdentifierRow.ts @@ -51,7 +51,7 @@ export class IdentifierRow implements Component { private renderIdentifier({ identifier, formatIdentifier }: IdentifierRowAttrs): Children { const identifierText = formatIdentifier - ? neverNull(identifier.match(/.{2}/g)).map((el, i) => m("span.pr-s" + (i % 2 === 0 ? ".b" : ""), el)) + ? neverNull(identifier.match(/.{2}/g)).map((el, i) => m("span.pr-4" + (i % 2 === 0 ? ".b" : ""), el)) : identifier return m(".text-break.small.monospace.mt-negative-8.selectable", identifierText) } diff --git a/src/common/settings/ReferralSettingsViewer.ts b/src/common/settings/ReferralSettingsViewer.ts index 9315fa39ac..b730939c39 100644 --- a/src/common/settings/ReferralSettingsViewer.ts +++ b/src/common/settings/ReferralSettingsViewer.ts @@ -15,7 +15,7 @@ export class ReferralSettingsViewer implements UpdatableSettingsViewer { } view(): Children { - return m(".mt-32.plr-l.pb-48", m(ReferralLinkViewer, { referralLink: this.referralLink })) + return m(".mt-32.plr-24.pb-48", m(ReferralLinkViewer, { referralLink: this.referralLink })) } async entityEventsReceived(updates: ReadonlyArray): Promise { diff --git a/src/common/settings/SettingsFolderRow.ts b/src/common/settings/SettingsFolderRow.ts index de413aa18f..41b79a70a8 100644 --- a/src/common/settings/SettingsFolderRow.ts +++ b/src/common/settings/SettingsFolderRow.ts @@ -14,7 +14,7 @@ export class SettingsFolderRow implements Component { view(vnode: Vnode): Children { const { mainButtonAttrs, extraButton } = vnode.attrs const isSelected = isNavButtonSelected(mainButtonAttrs) - const selector = `.folder-row.flex-start.pl-button.pr-m${isSelected ? ".row-selected" : ""}` + const selector = `.folder-row.flex-start.pl-8.pr-16${isSelected ? ".row-selected" : ""}` return m(selector, [m(NavButton, mainButtonAttrs), extraButton && isSelected ? extraButton : null]) } } diff --git a/src/common/settings/UserListView.ts b/src/common/settings/UserListView.ts index 619e02703f..833e20aaaa 100644 --- a/src/common/settings/UserListView.ts +++ b/src/common/settings/UserListView.ts @@ -94,7 +94,7 @@ export class UserListView implements UpdatableSettingsViewer { ListColumnWrapper, { headerContent: m( - ".flex.flex-space-between.center-vertically.plr-l", + ".flex.flex-space-between.center-vertically.plr-24", m(BaseSearchBar, { text: this.searchQuery, onInput: (text) => this.updateQuery(text), diff --git a/src/common/settings/UserViewer.ts b/src/common/settings/UserViewer.ts index ed15c8db85..9313ed10d0 100644 --- a/src/common/settings/UserViewer.ts +++ b/src/common/settings/UserViewer.ts @@ -111,7 +111,7 @@ export class UserViewer implements UpdatableSettingsDetailsViewer { injectionsRight: () => [m(IconButton, changePasswordButtonAttrs)], isReadOnly: true, } as const - return m("#user-viewer.fill-absolute.scroll.plr-l.pb-floating", [ + return m("#user-viewer.fill-absolute.scroll.plr-24.pb-floating", [ m(".h4.mt-32", lang.get("userSettings_label")), m("", [ m(TextField, { diff --git a/src/common/settings/groups/GroupDetailsView.ts b/src/common/settings/groups/GroupDetailsView.ts index cc7dcce56d..968fee633f 100644 --- a/src/common/settings/groups/GroupDetailsView.ts +++ b/src/common/settings/groups/GroupDetailsView.ts @@ -33,7 +33,7 @@ export class GroupDetailsView implements UpdatableSettingsDetailsViewer { } renderView(): Children { - return m("#user-viewer.fill-absolute.scroll.plr-l", [this.renderHeader(), this.renderCommonInfo(), this.renderMailGroupInfo()]) + return m("#user-viewer.fill-absolute.scroll.plr-24", [this.renderHeader(), this.renderCommonInfo(), this.renderMailGroupInfo()]) } /** diff --git a/src/common/settings/keymanagement/KeyManagementSettingsViewer.ts b/src/common/settings/keymanagement/KeyManagementSettingsViewer.ts index e3bd1ab655..3850c3c813 100644 --- a/src/common/settings/keymanagement/KeyManagementSettingsViewer.ts +++ b/src/common/settings/keymanagement/KeyManagementSettingsViewer.ts @@ -113,7 +113,7 @@ export class KeyManagementSettingsViewer implements UpdatableSettingsViewer { return m("", [ m( - ".fill-absolute.scroll.plr-l.pb-48", + ".fill-absolute.scroll.plr-24.pb-48", { style: { backgroundColor: theme.surface_container, diff --git a/src/common/settings/login/LoginSettingsViewer.ts b/src/common/settings/login/LoginSettingsViewer.ts index b8734a99d3..1821f56ce9 100644 --- a/src/common/settings/login/LoginSettingsViewer.ts +++ b/src/common/settings/login/LoginSettingsViewer.ts @@ -156,7 +156,7 @@ export class LoginSettingsViewer implements UpdatableSettingsViewer { if (locator.logins.isUserLoggedIn()) { const user = locator.logins.getUserController() return m("", [ - m("#user-settings.fill-absolute.scroll.plr-l.pb-48", [ + m("#user-settings.fill-absolute.scroll.plr-24.pb-48", [ m(".h4.mt-32", lang.get("loginCredentials_label")), this.renderName(user.userGroupInfo), m(TextField, mailAddressAttrs), diff --git a/src/common/settings/login/RecoverCodeDialog.ts b/src/common/settings/login/RecoverCodeDialog.ts index 9b9d264616..c2275bff11 100644 --- a/src/common/settings/login/RecoverCodeDialog.ts +++ b/src/common/settings/login/RecoverCodeDialog.ts @@ -101,9 +101,9 @@ export class RecoverCodeField { showMessage ? image ? m(".flex-space-around.flex-wrap", [ - m(".flex-grow-shrink-half.plr-l.flex-center.align-self-center", this.renderRecoveryText()), + m(".flex-grow-shrink-half.plr-24.flex-center.align-self-center", this.renderRecoveryText()), m( - ".flex-grow-shrink-half.plr-l.flex-center.align-self-center", + ".flex-grow-shrink-half.plr-24.flex-center.align-self-center", m("img.pt-16.bg-white.pt-16.pb-16", { src: image.src, alt: lang.getTranslationText(image.alt), diff --git a/src/common/settings/whitelabel/CustomColorEditorPreview.ts b/src/common/settings/whitelabel/CustomColorEditorPreview.ts index 9952572532..eb6c038c62 100644 --- a/src/common/settings/whitelabel/CustomColorEditorPreview.ts +++ b/src/common/settings/whitelabel/CustomColorEditorPreview.ts @@ -129,7 +129,7 @@ export class CustomColorEditorPreview implements Component { }, [ m( - ".list-row.pl-12.pr-l.odd-row", + ".list-row.pl-12.pr-24.odd-row", { oncreate: (vnode) => { this._mailRow.domElement = vnode.dom as HTMLElement @@ -139,7 +139,7 @@ export class CustomColorEditorPreview implements Component { this._mailRow.render(), ), m( - ".list-row.pl-12.pr-l", + ".list-row.pl-12.pr-24", { oncreate: (vnode) => { this._mailRow2.domElement = vnode.dom as HTMLElement diff --git a/src/common/settings/whitelabel/WhitelabelBrandingDomainSettings.ts b/src/common/settings/whitelabel/WhitelabelBrandingDomainSettings.ts index 1d701b1bbd..57be946564 100644 --- a/src/common/settings/whitelabel/WhitelabelBrandingDomainSettings.ts +++ b/src/common/settings/whitelabel/WhitelabelBrandingDomainSettings.ts @@ -124,7 +124,7 @@ export class WhitelabelBrandingDomainSettings implements Component m( ".flex", - components.map((c) => m(".pr-s", c)), + components.map((c) => m(".pr-4", c)), ) } diff --git a/src/common/settings/whitelabel/WhitelabelSettingsViewer.ts b/src/common/settings/whitelabel/WhitelabelSettingsViewer.ts index d9cd4897f6..4711c5e89a 100644 --- a/src/common/settings/whitelabel/WhitelabelSettingsViewer.ts +++ b/src/common/settings/whitelabel/WhitelabelSettingsViewer.ts @@ -89,7 +89,7 @@ export class WhitelabelSettingsViewer implements UpdatableSettingsViewer { const brandingDomainConfig = this._renderBrandingDomainConfig() return m( - "#global-settings.fill-absolute.scroll.plr-l", + "#global-settings.fill-absolute.scroll.plr-24", brandingDomainConfig ? [ m(".h4.mt-32", lang.get("whitelabel_label")), diff --git a/src/common/sharing/view/GroupInvitationFolderRow.ts b/src/common/sharing/view/GroupInvitationFolderRow.ts index a3db8a0724..df982c8f6b 100644 --- a/src/common/sharing/view/GroupInvitationFolderRow.ts +++ b/src/common/sharing/view/GroupInvitationFolderRow.ts @@ -18,7 +18,7 @@ export class GroupInvitationFolderRow implements Component): Children { const { invitation, icon } = vnode.attrs return [ - m(".folder-row.flex-start.plr-l", [ + m(".folder-row.flex-start.plr-24", [ m( ".flex-v-center.flex-grow.button-height", { diff --git a/src/common/subscription/InvoiceAndPaymentDataPage.ts b/src/common/subscription/InvoiceAndPaymentDataPage.ts index d31961a0c2..4a60ad9b04 100644 --- a/src/common/subscription/InvoiceAndPaymentDataPage.ts +++ b/src/common/subscription/InvoiceAndPaymentDataPage.ts @@ -182,7 +182,7 @@ export class InvoiceAndPaymentDataPage implements WizardPageN { view: (): Children => [ m(DialogHeaderBar, actionBarAttrs), m( - ".plr-l.pb-16", + ".plr-24.pb-16", m("", [ m(".pt-16", lang.get("invoicePayConfirm_msg")), m(TextField, { diff --git a/src/common/subscription/SetupLeavingUserSurveyPage.ts b/src/common/subscription/SetupLeavingUserSurveyPage.ts index 959764ff24..c5ffc0a62d 100644 --- a/src/common/subscription/SetupLeavingUserSurveyPage.ts +++ b/src/common/subscription/SetupLeavingUserSurveyPage.ts @@ -17,7 +17,7 @@ export class SetupLeavingUserSurveyPage implements Component): Children { return m("#leaving-user-survey-dialog.pt-16.flex-center", [ m( - ".flex.flex-column.max-width-m.pt-16.pb-16.plr-l", + ".flex.flex-column.max-width-m.pt-16.pb-16.plr-24", { style: { minHeight: styles.isDesktopLayout() ? "850px" : "", diff --git a/src/common/subscription/SignupForm.ts b/src/common/subscription/SignupForm.ts index b80718dc07..3cae65ddb9 100644 --- a/src/common/subscription/SignupForm.ts +++ b/src/common/subscription/SignupForm.ts @@ -182,7 +182,7 @@ export class SignupForm implements Component { return m( "#signup-account-dialog.flex-center", - m(".flex-grow-shrink-auto.max-width-m.pt-16.pb-16.plr-l", [ + m(".flex-grow-shrink-auto.max-width-m.pt-16.pb-16.plr-24", [ a.readonly ? m(TextField, { label: "mailAddress_label", diff --git a/src/common/subscription/SubscriptionViewer.ts b/src/common/subscription/SubscriptionViewer.ts index e538c88dcf..ed072629ed 100644 --- a/src/common/subscription/SubscriptionViewer.ts +++ b/src/common/subscription/SubscriptionViewer.ts @@ -135,7 +135,7 @@ export class SubscriptionViewer implements UpdatableSettingsViewer { this._giftCardsExpanded = stream(false) this.view = (): Children => { - return m("#subscription-settings.fill-absolute.scroll.plr-l", [ + return m("#subscription-settings.fill-absolute.scroll.plr-24", [ m(".h4.mt-32", lang.get("currentlyBooked_label")), m(TextField, { label: "subscription_label", diff --git a/src/common/subscription/UpgradeConfirmSubscriptionPage.ts b/src/common/subscription/UpgradeConfirmSubscriptionPage.ts index b109c6420c..f4ae251f4c 100644 --- a/src/common/subscription/UpgradeConfirmSubscriptionPage.ts +++ b/src/common/subscription/UpgradeConfirmSubscriptionPage.ts @@ -133,7 +133,7 @@ export class UpgradeConfirmSubscriptionPage implements WizardPageN { return [ m( ".flex-grow.flex-center.scroll", - m(".flex-grow-shrink-auto.max-width-s.pt-16.plr-l", [this.renderLoginForm(model), this.renderCredentialsSelector(model)]), + m(".flex-grow-shrink-auto.max-width-s.pt-16.plr-24", [this.renderLoginForm(model), this.renderCredentialsSelector(model)]), ), ] } @@ -380,7 +380,7 @@ class RedeemGiftCardPage implements WizardPageN { return m("", [ mapNullable(model.newAccountData?.recoverCode, (code) => m( - ".pt-32.plr-l", + ".pt-32.plr-24", m(RecoverCodeField, { showMessage: true, recoverCode: code, @@ -450,10 +450,10 @@ class RedeemGiftCardPage implements WizardPageN { private renderInfoForFreeAccounts(model: RedeemGiftCardModel): Children { return [ - m(".pt-32.plr-l", `${lang.get("giftCardUpgradeNotifyRevolutionary_msg")} ${this.getCreditOrDebitMessage(model)}`), + m(".pt-32.plr-24", `${lang.get("giftCardUpgradeNotifyRevolutionary_msg")} ${this.getCreditOrDebitMessage(model)}`), m(".center.h4.pt-16", lang.get("upgradeConfirm_msg")), m(".flex-space-around.flex-wrap", [ - m(".flex-grow-shrink-half.plr-l", [ + m(".flex-grow-shrink-half.plr-24", [ m(TextField, { label: "subscription_label", value: "Revolutionary", @@ -476,7 +476,7 @@ class RedeemGiftCardPage implements WizardPageN { }), ]), m( - ".flex-grow-shrink-half.plr-l.flex-center.items-end", + ".flex-grow-shrink-half.plr-24.flex-center.items-end", m("img[src=" + HabReminderImage + "].pt-16.bg-white.border-radius", { style: { width: "200px", @@ -490,13 +490,13 @@ class RedeemGiftCardPage implements WizardPageN { private renderInfoForPaidAccounts(model: RedeemGiftCardModel): Children { return [ m( - ".pt-32.plr-l.flex-center", + ".pt-32.plr-24.flex-center", `${lang.get("giftCardCreditNotify_msg", { "{credit}": formatPrice(Number(model.giftCardInfo.value), true), })} ${lang.get("creditUsageOptions_msg")}`, ), m( - ".flex-grow-shrink-half.plr-l.flex-center.items-end", + ".flex-grow-shrink-half.plr-24.flex-center.items-end", m("img[src=" + HabReminderImage + "].pt-16.bg-white.border-radius", { style: { width: "200px", diff --git a/src/common/support/pages/EmailSupportUnavailablePage.ts b/src/common/support/pages/EmailSupportUnavailablePage.ts index 94be355abd..689003d0e2 100644 --- a/src/common/support/pages/EmailSupportUnavailablePage.ts +++ b/src/common/support/pages/EmailSupportUnavailablePage.ts @@ -59,7 +59,7 @@ export class EmailSupportUnavailablePage implements Component { await showUpgradeDialog() diff --git a/src/common/termination/TerminationView.ts b/src/common/termination/TerminationView.ts index ef6c8c5173..0fcf685a6f 100644 --- a/src/common/termination/TerminationView.ts +++ b/src/common/termination/TerminationView.ts @@ -61,7 +61,7 @@ export class TerminationView extends BaseTopLevelView implements TopLevelView= 1 @@ -50,7 +50,7 @@ export class ContactListEntryViewer implements Component { const phoneticName = this.contactPhoneticName(attrs.contact) - return m(".plr-l.pb-floating.mlr-safe-inset", [ + return m(".plr-24.pb-floating.mlr-safe-inset", [ m("", [ m( ".flex-space-between.flex-wrap.mt-12", @@ -199,7 +199,7 @@ export class ContactViewer implements ClassComponent { private renderJobInformation(contact: Contact): Children { const spacerFunction = () => m( - "span.plr-s", + "span.plr-4", { style: { fontWeight: "900", @@ -221,7 +221,7 @@ export class ContactViewer implements ClassComponent { private renderPronounsInfo(contact: Contact): Children { const spacerFunction = () => m( - "span.plr-s", + "span.plr-4", { style: { fontWeight: "900", diff --git a/src/mail-app/gui/EventBannerSkeleton.ts b/src/mail-app/gui/EventBannerSkeleton.ts index b371e45976..d4007eb725 100644 --- a/src/mail-app/gui/EventBannerSkeleton.ts +++ b/src/mail-app/gui/EventBannerSkeleton.ts @@ -24,7 +24,7 @@ export const EventBannerSkeleton = pureComponent(() => }, }, [ - m(".flex.flex-column.center.items-center.pr-vpad-l.pl-32.pb-16.pt-16.justify-center.skeleton-bg-1.gap-vpad-xs.fill-grid-column", [ + m(".flex.flex-column.center.items-center.pr-32.pl-32.pb-16.pt-16.justify-center.skeleton-bg-1.gap-vpad-xs.fill-grid-column", [ m(Skeleton, { style: { width: "25px", @@ -47,7 +47,7 @@ export const EventBannerSkeleton = pureComponent(() => }, }), ]), - m(".flex.flex-column.pr-vpad-l.pl-32.pb-16.pt-16.skeleton-bg-2.gap-vpad-xs", [ + m(".flex.flex-column.pr-32.pl-32.pb-16.pt-16.skeleton-bg-2.gap-vpad-xs", [ m(Skeleton, { style: { width: "75%", @@ -68,7 +68,7 @@ export const EventBannerSkeleton = pureComponent(() => }), ]), m( - ".flex.flex-column.pr-vpad-l.pl-32.pb-16.pt-16.skeleton-bg-2.gap-vpad-xs.skeleton-border-1", + ".flex.flex-column.pr-32.pl-32.pb-16.pt-16.skeleton-bg-2.gap-vpad-xs.skeleton-border-1", { class: styles.isSingleColumnLayout() ? "border-sm border-left-none border-right-none border-bottom-none" : "border-left-sm", }, diff --git a/src/mail-app/gui/date/EventBannerImpl.ts b/src/mail-app/gui/date/EventBannerImpl.ts index 2c3a8844bc..4130f815a8 100644 --- a/src/mail-app/gui/date/EventBannerImpl.ts +++ b/src/mail-app/gui/date/EventBannerImpl.ts @@ -145,7 +145,7 @@ export class EventBannerImpl implements ClassComponent { m( ".flex.flex-column.center.items-center.pb-16.pt-16.justify-center.fill-grid-column", { - class: styles.isSingleColumnLayout() ? "plr-vpad" : "pr-vpad-l pl-32", + class: styles.isSingleColumnLayout() ? "plr-16" : "pr-32 pl-32", style: { "background-color": theme.surface_container_high, color: theme.on_surface_variant, @@ -158,7 +158,7 @@ export class EventBannerImpl implements ClassComponent { ], ), /* Invite Column */ - m(".flex.flex-column.plr-vpad.pb-16.pt-16.justify-start", [ + m(".flex.flex-column.plr-16.pb-16.pt-16.justify-start", [ m(".flex", [ m(Icon, { icon: BootIcons.Calendar, @@ -180,7 +180,7 @@ export class EventBannerImpl implements ClassComponent { /* Time Overview */ !recipientIsOrganizer ? m( - ".flex.flex-column.plr-vpad.pb-16.pt-16.justify-start", + ".flex.flex-column.plr-16.pb-16.pt-16.justify-start", { class: styles.isSingleColumnLayout() ? "border-sm border-left-none border-right-none border-bottom-none" : "border-left-sm", style: { @@ -250,7 +250,7 @@ export class EventBannerImpl implements ClassComponent { : null, isNotEmpty(allDayEvents) ? m( - "span.border-radius.pt-4.pb-4.plr-sm.text-break", + "span.border-radius.pt-4.pb-4.plr-8.text-break", { style: { color: theme.on_warning_container, "background-color": theme.warning_container } }, [ m("strong", allDayEvents.length === 1 ? `1 ${lang.get("allDay_label").toLowerCase()}: ` : `${allDayEvents.length} `), diff --git a/src/mail-app/knowledgebase/view/KnowledgeBaseDialogContent.ts b/src/mail-app/knowledgebase/view/KnowledgeBaseDialogContent.ts index f94a6bcca5..c00bef55c9 100644 --- a/src/mail-app/knowledgebase/view/KnowledgeBaseDialogContent.ts +++ b/src/mail-app/knowledgebase/view/KnowledgeBaseDialogContent.ts @@ -81,7 +81,7 @@ export class KnowledgeBaseDialogContent implements Component 0 ? m(".small.full-width", lang.get("matchingKeywords_label")) : null, matchedKeywords.map((keyword) => { - return m(".keyword-bubble-no-padding.plr-button.pl-4.pr-s.border-radius.no-wrap.mr-8.min-content", keyword) + return m(".keyword-bubble-no-padding.plr-8.pl-4.pr-4.border-radius.no-wrap.mr-8.min-content", keyword) }), ]) } diff --git a/src/mail-app/knowledgebase/view/KnowledgeBaseListEntry.ts b/src/mail-app/knowledgebase/view/KnowledgeBaseListEntry.ts index f0dfd66485..21e25726fa 100644 --- a/src/mail-app/knowledgebase/view/KnowledgeBaseListEntry.ts +++ b/src/mail-app/knowledgebase/view/KnowledgeBaseListEntry.ts @@ -24,7 +24,7 @@ export class KnowledgeBaseListEntry implements Component { - return m("small.teamLabel.pl-4.pr-s.border-radius.no-wrap.small.mr-8.min-content", keyword.keyword) + return m("small.teamLabel.pl-4.pr-4.border-radius.no-wrap.small.mr-8.min-content", keyword.keyword) }), ]), ], diff --git a/src/mail-app/mail/view/CollapsedMailView.ts b/src/mail-app/mail/view/CollapsedMailView.ts index 998dbccee0..cfb2db6b05 100644 --- a/src/mail-app/mail/view/CollapsedMailView.ts +++ b/src/mail-app/mail/view/CollapsedMailView.ts @@ -70,7 +70,7 @@ export class CollapsedMailView implements Component { private renderUnreadDot(): Children { return m( - ".flex.flex-no-grow.no-shrink.pr-s", + ".flex.flex-no-grow.no-shrink.pr-4", { "data-testid": "unread-indicator", }, diff --git a/src/mail-app/mail/view/EditFoldersDialog.ts b/src/mail-app/mail/view/EditFoldersDialog.ts index 6bc7d2c86c..d03e39f21a 100644 --- a/src/mail-app/mail/view/EditFoldersDialog.ts +++ b/src/mail-app/mail/view/EditFoldersDialog.ts @@ -104,7 +104,7 @@ export class EditFoldersDialog implements ModalComponent { }, [ m( - ".plr-button.mt-16.mb-16", + ".plr-8.mt-16.mb-16", m(LoginButton, { label: "done_action", onclick: () => this.close(), diff --git a/src/mail-app/mail/view/ExternalLoginView.ts b/src/mail-app/mail/view/ExternalLoginView.ts index 2332099065..f3cfdaf62c 100644 --- a/src/mail-app/mail/view/ExternalLoginView.ts +++ b/src/mail-app/mail/view/ExternalLoginView.ts @@ -220,7 +220,7 @@ export class ExternalLoginView extends BaseTopLevelView implements TopLevelView< view({ attrs }: Vnode): Children { return m(".main-view.flex.col.nav-bg", [ m(LoginScreenHeader), - m(".flex-grow.flex.col.items-center.scroll", m(".flex-grow-shrink-auto.flex.col.max-width-m.pt-16.pb-16.plr-l", this.renderContent())), + m(".flex-grow.flex.col.items-center.scroll", m(".flex-grow-shrink-auto.flex.col.max-width-m.pt-16.pb-16.plr-24", this.renderContent())), ]) } @@ -231,7 +231,7 @@ export class ExternalLoginView extends BaseTopLevelView implements TopLevelView< return m("p.center", m(MessageBox, {}, lang.getTranslationText(this.viewModel.errorMessageId))) } else { return [ - m(".flex.col.content-bg.border-radius-big.plr-2l.mt-16", [ + m(".flex.col.content-bg.border-radius-big.plr-48.mt-16", [ this.viewModel.showAutoLoginButton ? this.renderAutoLoginButton() : this.renderForm(), m("p.center.statusTextColor.mt-4.mb-8", m("small", lang.getTranslationText(this.viewModel.helpText), [])), ]), diff --git a/src/mail-app/mail/view/LabelsPopup.ts b/src/mail-app/mail/view/LabelsPopup.ts index 70ae66a03b..4dd95c22cb 100644 --- a/src/mail-app/mail/view/LabelsPopup.ts +++ b/src/mail-app/mail/view/LabelsPopup.ts @@ -106,7 +106,7 @@ export class LabelsPopup implements ModalComponent { m(BaseButton, { label: "apply_action", text: lang.get("apply_action"), - class: "limit-width noselect bg-transparent button-height text-ellipsis content-accent-fg flex items-center plr-button button-content justify-center border-top state-bg", + class: "limit-width noselect bg-transparent button-height text-ellipsis content-accent-fg flex items-center plr-8 button-content justify-center border-top state-bg", onclick: () => { this.applyLabels() }, diff --git a/src/mail-app/mail/view/MailListView.ts b/src/mail-app/mail/view/MailListView.ts index ca27730022..96014e9573 100644 --- a/src/mail-app/mail/view/MailListView.ts +++ b/src/mail-app/mail/view/MailListView.ts @@ -393,7 +393,7 @@ export class MailListView implements Component { return m(".flex.col", [ this.showingSpamOrTrash ? [ - m(".flex.flex-column.plr-l", [ + m(".flex.flex-column.plr-24", [ m(".small.flex-grow.pt-16", lang.get("storageDeletion_msg")), m(".mr-negative-8.align-self-end", m(Button, purgeButtonAttrs)), ]), diff --git a/src/mail-app/mail/view/MailViewerHeader.ts b/src/mail-app/mail/view/MailViewerHeader.ts index 9ba579c430..5d31a728e0 100644 --- a/src/mail-app/mail/view/MailViewerHeader.ts +++ b/src/mail-app/mail/view/MailViewerHeader.ts @@ -270,7 +270,7 @@ export class MailViewerHeader implements Component { private renderUnreadDot(): Children { return m( - ".flex.flex-no-grow.no-shrink.pr-s", + ".flex.flex-no-grow.no-shrink.pr-4", { "data-testid": "unread-indicator", style: { @@ -538,7 +538,7 @@ export class MailViewerHeader implements Component { // Show a loading symbol if we are loading attachments if (viewModel.isLoadingAttachments() && !viewModel.isConnectionLost()) { return m(".flex." + responsiveCardHMargin(), [ - m(".flex-v-center.pl-button", progressIcon()), + m(".flex-v-center.pl-8", progressIcon()), m(".small.flex-v-center.plr.button-height", lang.get("loading_msg")), ]) } else { diff --git a/src/mail-app/mail/view/MailViewerUtils.ts b/src/mail-app/mail/view/MailViewerUtils.ts index c37eba1e21..a2de38d12e 100644 --- a/src/mail-app/mail/view/MailViewerUtils.ts +++ b/src/mail-app/mail/view/MailViewerUtils.ts @@ -494,7 +494,7 @@ async function showUnsubscribeDialog(nextUnsubscribeActions: Array const { attrs } = vnode return m( - ".bottom-nav.bottom-action-bar.flex.items-center.plr-l.justify-between", + ".bottom-nav.bottom-action-bar.flex.items-center.plr-24.justify-between", { oncreate: (vnode) => { this.dom = vnode.dom as HTMLElement diff --git a/src/mail-app/mail/view/MultiItemViewer.ts b/src/mail-app/mail/view/MultiItemViewer.ts index 1cea28f8c4..b590c36634 100644 --- a/src/mail-app/mail/view/MultiItemViewer.ts +++ b/src/mail-app/mail/view/MultiItemViewer.ts @@ -49,7 +49,7 @@ export class MultiItemViewer implements Component> { stopLoadAll() }, }), - m(".flex.items-center.plr-button", progressIcon()), + m(".flex.items-center.plr-8", progressIcon()), ]) : selectedEntities.length === 0 ? null diff --git a/src/mail-app/search/SearchBarOverlay.ts b/src/mail-app/search/SearchBarOverlay.ts index 492ebdb49e..794a58200a 100644 --- a/src/mail-app/search/SearchBarOverlay.ts +++ b/src/mail-app/search/SearchBarOverlay.ts @@ -49,7 +49,7 @@ export class SearchBarOverlay implements Component { m("ul.list.click.mail-list", [ state.entities.map((result) => { return m( - "li.plr-l.flex-v-center.", + "li.plr-24.flex-v-center.", { style: { height: px(52), @@ -93,7 +93,7 @@ export class SearchBarOverlay implements Component { _renderProgress(state: SearchBarState): Children { return m(".flex.col.rel", [ m( - ".plr-l.pt-8.pb-8.flex.items-center.flex-space-between.mr-negative-8", + ".plr-24.pt-8.pb-8.flex.items-center.flex-space-between.mr-negative-8", { style: { height: px(52), @@ -146,7 +146,7 @@ export class SearchBarOverlay implements Component { return m(".flex.rel", [ m( - ".plr-l.pt-8.pb-8.flex.items-center.flex-space-between.mr-negative-8", + ".plr-24.pt-8.pb-8.flex.items-center.flex-space-between.mr-negative-8", { style: { height: px(52), @@ -214,7 +214,7 @@ export class SearchBarOverlay implements Component { return indexInfo ? [m(".top.flex-center", infoText), m(".bottom.flex-center.small", indexInfo)] - : m("li.plr-l.pt-8.pb-8.items-center.flex-center", m(".flex-center", infoText)) + : m("li.plr-24.pt-8.pb-8.items-center.flex-center", m(".flex-center", infoText)) } private renderContactResult(contact: Contact): Children { diff --git a/src/mail-app/search/view/SearchView.ts b/src/mail-app/search/view/SearchView.ts index d7dc4b1236..f20f399fe9 100644 --- a/src/mail-app/search/view/SearchView.ts +++ b/src/mail-app/search/view/SearchView.ts @@ -177,7 +177,7 @@ export class SearchView extends BaseTopLevelView implements TopLevelView (this.searchQuery = text), diff --git a/src/mail-app/settings/EditOutOfOfficeNotificationDialog.ts b/src/mail-app/settings/EditOutOfOfficeNotificationDialog.ts index 9b0fff1fbb..03942e1bfc 100644 --- a/src/mail-app/settings/EditOutOfOfficeNotificationDialog.ts +++ b/src/mail-app/settings/EditOutOfOfficeNotificationDialog.ts @@ -145,7 +145,7 @@ class EditOutOfOfficeNotificationDialog implements Component m( - ".flex-no-grow-no-shrink-auto.pr-s", + ".flex-no-grow-no-shrink-auto.pr-4", { style: { "line-height": px(24), @@ -168,7 +168,7 @@ class EditOutOfOfficeNotificationDialog implements Component m( - ".flex-no-grow-no-shrink-auto.pr-s", + ".flex-no-grow-no-shrink-auto.pr-4", { style: { "line-height": px(24), diff --git a/src/mail-app/settings/GlobalSettingsViewer.ts b/src/mail-app/settings/GlobalSettingsViewer.ts index 504c9b9dc6..43335f0f57 100644 --- a/src/mail-app/settings/GlobalSettingsViewer.ts +++ b/src/mail-app/settings/GlobalSettingsViewer.ts @@ -136,7 +136,7 @@ export class GlobalSettingsViewer implements UpdatableSettingsViewer { } return [ - m("#global-settings.fill-absolute.scroll.plr-l", [ + m("#global-settings.fill-absolute.scroll.plr-24", [ m(ExpandableTable, { title: "adminSpam_action", table: spamRuleTableAttrs, diff --git a/src/mail-app/settings/KnowledgeBaseListView.ts b/src/mail-app/settings/KnowledgeBaseListView.ts index c02f4b6d79..122f656407 100644 --- a/src/mail-app/settings/KnowledgeBaseListView.ts +++ b/src/mail-app/settings/KnowledgeBaseListView.ts @@ -114,7 +114,7 @@ export class KnowledgeBaseListView implements UpdatableSettingsViewer { ListColumnWrapper, { headerContent: m( - ".flex.flex-space-between.center-vertically.plr-l", + ".flex.flex-space-between.center-vertically.plr-24", m(BaseSearchBar, { text: this.searchQuery, onInput: (text) => this.updateQuery(text), @@ -239,7 +239,7 @@ export class KnowledgeBaseSettingsDetailsViewer implements UpdatableSettingsDeta renderView(): Children { return m( - ".plr-l", + ".plr-24", m(KnowledgeBaseEntryView, { entry: this.entry, onTemplateSelected: (templateId) => m.route.set(`/settings/templates/${listIdPart(templateId)}}`), diff --git a/src/mail-app/settings/MailExportViewer.ts b/src/mail-app/settings/MailExportViewer.ts index c66b63753d..2925768ff2 100644 --- a/src/mail-app/settings/MailExportViewer.ts +++ b/src/mail-app/settings/MailExportViewer.ts @@ -27,7 +27,7 @@ export class MailExportViewer implements UpdatableSettingsViewer { view(): Children { return [ m( - ".fill-absolute.scroll.plr-l.pb-48", + ".fill-absolute.scroll.plr-24.pb-48", m(".h4.mt-32", lang.get("mailExportSettings_label")), isDesktop() ? this.renderMailExportSettings() : this.renderExportOnlyOnDesktopText(), ), diff --git a/src/mail-app/settings/MailSettingsViewer.ts b/src/mail-app/settings/MailSettingsViewer.ts index 6670174e77..6b98bed03e 100644 --- a/src/mail-app/settings/MailSettingsViewer.ts +++ b/src/mail-app/settings/MailSettingsViewer.ts @@ -337,7 +337,7 @@ export class MailSettingsViewer implements UpdatableSettingsViewer { } return [ m( - "#user-settings.fill-absolute.scroll.plr-l.pb-48", + "#user-settings.fill-absolute.scroll.plr-24.pb-48", { role: "group", oncreate: () => { diff --git a/src/mail-app/settings/NotificationSettingsViewer.ts b/src/mail-app/settings/NotificationSettingsViewer.ts index 5ce25f7c09..bb87a3cf1c 100644 --- a/src/mail-app/settings/NotificationSettingsViewer.ts +++ b/src/mail-app/settings/NotificationSettingsViewer.ts @@ -101,7 +101,7 @@ export class NotificationSettingsViewer implements UpdatableSettingsViewer { }) .sort((l, r) => +r.attrs.current - +l.attrs.current) - return m(".fill-absolute.scroll.plr-l.pb-48", [ + return m(".fill-absolute.scroll.plr-24.pb-48", [ m(".flex.col", [ m(".flex-space-between.items-center.mt-32.mb-8", [m(".h4", lang.get("notificationSettings_action"))]), this.extendedNotificationMode diff --git a/src/mail-app/settings/TemplateDetailsViewer.ts b/src/mail-app/settings/TemplateDetailsViewer.ts index de95913309..f88a78364f 100644 --- a/src/mail-app/settings/TemplateDetailsViewer.ts +++ b/src/mail-app/settings/TemplateDetailsViewer.ts @@ -38,7 +38,7 @@ export class TemplateDetailsViewer implements UpdatableSettingsDetailsViewer { } readonly renderView: UpdatableSettingsDetailsViewer["renderView"] = () => { - return m("#user-viewer.fill-absolute.scroll.plr-l.pb-floating", [this.renderTitleLine(), this.renderContent()]) + return m("#user-viewer.fill-absolute.scroll.plr-24.pb-floating", [this.renderTitleLine(), this.renderContent()]) } private renderTitleLine(): Children { diff --git a/src/mail-app/settings/TemplateListView.ts b/src/mail-app/settings/TemplateListView.ts index d6fb2a1179..b8369188a2 100644 --- a/src/mail-app/settings/TemplateListView.ts +++ b/src/mail-app/settings/TemplateListView.ts @@ -113,7 +113,7 @@ export class TemplateListView implements UpdatableSettingsViewer { ListColumnWrapper, { headerContent: m( - ".flex.flex-space-between.center-vertically.plr-l", + ".flex.flex-space-between.center-vertically.plr-24", m(BaseSearchBar, { text: this.searchQuery, onInput: (text) => this.updateQuery(text), diff --git a/src/mail-app/settings/WebMailImportSettingsViewer.ts b/src/mail-app/settings/WebMailImportSettingsViewer.ts index 2e855b05b9..39df92f772 100644 --- a/src/mail-app/settings/WebMailImportSettingsViewer.ts +++ b/src/mail-app/settings/WebMailImportSettingsViewer.ts @@ -15,7 +15,7 @@ export class WebMailImportSettingsViewer implements UpdatableSettingsViewer { constructor() {} view(): Children { - return m(".fill-absolute.scroll.plr-l.pb-48", [m(".h4.mt-32", lang.get("mailImportSettings_label")), this.renderNoImportOnWebText()]) + return m(".fill-absolute.scroll.plr-24.pb-48", [m(".h4.mt-32", lang.get("mailImportSettings_label")), this.renderNoImportOnWebText()]) } private renderNoImportOnWebText() { diff --git a/src/mail-app/settings/groups/GroupListView.ts b/src/mail-app/settings/groups/GroupListView.ts index 6bc017b22b..5e61afc7b8 100644 --- a/src/mail-app/settings/groups/GroupListView.ts +++ b/src/mail-app/settings/groups/GroupListView.ts @@ -81,7 +81,7 @@ export class GroupListView implements UpdatableSettingsViewer { ListColumnWrapper, { headerContent: m( - ".flex.flex-space-between.center-vertically.plr-l", + ".flex.flex-space-between.center-vertically.plr-24", m(BaseSearchBar, { text: this.searchQuery, onInput: (text) => this.updateQuery(text), diff --git a/src/mail-app/templates/view/TemplateExpander.ts b/src/mail-app/templates/view/TemplateExpander.ts index d0f2818d66..34789b5c5b 100644 --- a/src/mail-app/templates/view/TemplateExpander.ts +++ b/src/mail-app/templates/view/TemplateExpander.ts @@ -55,7 +55,7 @@ export class TemplateExpander implements Component { }, template.title, ), - m(".text-break.flex-grow.pr.overflow-y-visible.pt-16", selectedContent ? m.trust(this.sanitizedText(selectedContent.text)) : null), + m(".text-break.flex-grow.pr-12.overflow-y-visible.pt-16", selectedContent ? m.trust(this.sanitizedText(selectedContent.text)) : null), ], ) } diff --git a/src/mail-app/templates/view/TemplatePopup.ts b/src/mail-app/templates/view/TemplatePopup.ts index 32a5c65a3b..eee1979c14 100644 --- a/src/mail-app/templates/view/TemplatePopup.ts +++ b/src/mail-app/templates/view/TemplatePopup.ts @@ -191,7 +191,7 @@ export class TemplatePopup implements ModalComponent { this._renderHeader(), m(".flex.flex-grow.scroll.mb-8", [ m( - ".flex.flex-column.scroll" + (showTwoColumns ? ".pr" : ""), + ".flex.flex-column.scroll" + (showTwoColumns ? ".pr-12" : ""), { style: { flex: "1 1 40%", @@ -218,7 +218,7 @@ export class TemplatePopup implements ModalComponent { _renderHeader(): Children { const selectedTemplate = this._templateModel.getSelectedTemplate() - return m(".flex-space-between.center-vertically.pl-12.pr-s", [ + return m(".flex-space-between.center-vertically.pl-12.pr-4", [ m(".flex-start", [m(".flex.center-vertically", this._renderSearchBar()), this._renderAddButton()]), m(".flex-end", [ selectedTemplate @@ -368,7 +368,7 @@ export class TemplatePopup implements ModalComponent { }), ] : null, - m(".pr-s", m(".nav-bar-spacer")), + m(".pr-4", m(".nav-bar-spacer")), m( "", { diff --git a/src/mail-app/templates/view/TemplatePopupResultRow.ts b/src/mail-app/templates/view/TemplatePopupResultRow.ts index dc9d4e2e85..394037c93c 100644 --- a/src/mail-app/templates/view/TemplatePopupResultRow.ts +++ b/src/mail-app/templates/view/TemplatePopupResultRow.ts @@ -36,7 +36,7 @@ export class TemplatePopupResultRow implements Component ), m(".flex.badge-line-height.text-ellipsis", [ tag - ? m(".small.keyword-bubble-no-padding.pl-4.pr-s.border-radius.no-wrap.small.min-content", TEMPLATE_SHORTCUT_PREFIX + tag.toLowerCase()) + ? m(".small.keyword-bubble-no-padding.pl-4.pr-4.border-radius.no-wrap.small.min-content", TEMPLATE_SHORTCUT_PREFIX + tag.toLowerCase()) : null, ]), ],